WPF - 如何对裁剪后的图像应用效果？

Question

我有一个 Image 被剪裁如下：

<Image Width="45" Grid.Column="0" Source="{Binding Photo}">
    <Image.Clip>
        <RectangleGeometry Rect="0,0,45,55" RadiusX="8" RadiusY="8" />
    </Image.Clip>
</Image>

如何对其应用投影效果？

更新：
正如 Ray 所指出的，最好的解决方案是 Anderson 提出的方案 - 具有环绕边框。谢谢安德森。

Answer 1

这将为您解决问题：

<Border>
  <Border.Effect>
    <DropShadowEffect />
  </Border.Effect>
  <Image Stretch="None" Source="{Binding Photo}" >
    <Image.Clip>
      <RectangleGeometry Rect="0,0,45,55" RadiusX="8" RadiusY="8"/>
    </Image.Clip>
  </Image>
</Border>

这当然是您最初的想法，只是将 DropShadowEffect 应用于环绕边框。由于位图效果的工作方式，它们仅适用于所包含内容的可见部分。

Answer 2

这应该可行，

<Image Width="45" Grid.Column="0" Source="{Binding Photo}" 
    <Image.Clip>
        <RectangleGeometry Rect="0,0,45,55" RadiusX="8" RadiusY="8" />
    </Image.Clip>
    <Image.Effect>
        <DropShadowEffect Color="Black" BlurRadius="20" />
    </Image.Effect>
</Image>

不过我还没有尝试过与 Clip 结合使用。

更新：这不起作用（似乎是一个错误？）

我只是这样做：

<Border Grid.Column="0" >
     <Border.Effect>
          <DropShadowEffect />
     </Border.Effect>
    <Image Width="45" Source="{Binding Photo}" 
        <Image.Clip>
            <RectangleGeometry Rect="0,0,45,55" RadiusX="8" RadiusY="8" />
        </Image.Clip>
    </Image>
</Border>

有点蹩脚，你可能需要调整一些宽度以确保它们完全匹配，但你明白了。

Answer 3

我想答案是我需要使用 CroppedBitmap 而不是 Image.Clip：

<Image Width="45">
    <Image.Source>
        <CroppedBitmap Source="{Binding Photo}" SourceRect="0 0 45 55"/>
    </Image.Source>
    <Image.Effect>
        <DropShadowEffect/>
    </Image.Effect>
</Image>

如果我需要圆角，我可以用边框包围外部图像并使用 ImageBrush：

<Border Width="45" Height="55" CornerRadius="10" >
    <Border.Background>
        <ImageBrush>
            <ImageBrush.ImageSource>
                <CroppedBitmap Source="profile.jpg" SourceRect="0 0 45 55"/>
            </ImageBrush.ImageSource>
        </ImageBrush>    
    </Border.Background>
</Border>

如果我错了，请纠正我，或者你可以这样做以更简单的方式。
谢谢！

更新：显然您无法绑定到 CroppedBitmap 的 Source 属性！