Question

I have an Image being clipped like so:

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

How can I apply a drop shadow effect to it?

UPDATE:
As pointed out by Ray, the best solution is the one proposed by Anderson - having a wrapping border. Thanks Anderson.

Answer 1

This should work

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

I ve not tried it in combination with Clip, though.

Update: That doesn t work (seems like a bug?)

I d just do this:

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

Bit lame and you might have to tweak some of the widths to make sure they match exactly, but you get the idea.

Answer 2

This will do the trick for you:

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

Which of course is your original idea, only with the DropShadowEffect applied to a wrapping Border. Because of the way bitmap effects work, they apply only to the visible part of what is contained.

Answer 3

I guess the answer is that I need to use CroppedBitmap instead of Image.Clip:

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

and if I need the round corners I can surround the outer image with a border and use a 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>

Please correct me if I am wrong or you can do it in a simpler manner. Thanks!

UPDATE: Apparently you cannot bind to CroppedBitmap s Source property!

友情链接