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>

如何对其应用阴影效果？

更新
正如雷指出的那样，最好的解决方案是安德森提出的解决方案 - 具有包装边界。谢谢安德森。

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结合使用。

更新：这不起作用（好像是个bug？）

我只是这样做：

<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属性！

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

3 个答案: