2

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

4

3 回答 3

4

这将为您解决问题：

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

于 2009-11-10T22:50:31.577 回答
3

这应该工作

<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>

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

于 2009-11-10T18:51:59.283 回答
0

我想答案是我需要使用 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 属性！

于 2009-11-10T19:55:16.557 回答