WPF - 如何将效果应用于裁剪的图像？答案

【问题标题】：WPF - How to apply effect to a cropped image?WPF - 如何将效果应用于裁剪的图像？
【发布时间】：2009-11-10 18:02:37
【问题描述】：

我有一个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 提出的解决方案 - 具有环绕边框。谢谢安德森。

【问题讨论】：

标签： wpf image styles crop

【解决方案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 应用于包装边框。由于位图效果的工作方式，它们仅适用于所包含内容的可见部分。

【讨论】：

谢谢雷。我仔细检查过，它有效。我必须感谢安德森。
是的，我看到我的答案与他编辑的答案相同，除了 Stretch="None"，这会导致图像自动具有正确的大小，而无需对宽度进行硬编码。

【解决方案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>

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

【讨论】：

感谢安德森，但这不起作用，因为我正在剪辑图像，并且剪辑中不包含投影。
这很吸引人。似乎是一个疏忽。我会更新的。
安德森，它不像你建议的那样工作是有道理的。假设您有一个 100x100 的图像并且您剪辑到 50x50。效果将在 100x100 图像附近，由于您在图像内剪裁了一个较小的位置，因此不会出现模糊。意识到剪辑根本没有调整图片大小。
不，我肯定知道发生了什么，但最不意外的理论是它会在剪辑后应用效果。无论如何，将更改应用于边框应该可以工作。
对不起安德森，将效果应用于边框也不起作用。边框在图像周围，仍然保持原始大小。参考我之前的评论，您将有一个尺寸为 100x100 的边框和一个尺寸仅为 50x50 的小矩形。

【解决方案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 属性！

【讨论】：

更准确地说，绑定 CroppedBitmap 的 Source 属性时不能访问 DataContext。本地绑定和绑定到特定源对象 (Source=) 仍然是可能的，但在这种情况下没有用。不能使用 DataContext 或 FindAncestor 的原因是 CroppedBitmap 没有 DataContext 属性或 LogicalParent 的概念。仅供参考。
注意：我的评论并非旨在回答最初的问题，而只是为了揭开您遇到的行为的神秘面纱并澄清误解。
Ray，你能在这里回答我关于这个问题的问题吗？ stackoverflow.com/questions/1711151/… 谢谢！