WPF - Как применить эффект к обрезанному изображению? - PullRequest
Новая
       19

WPF - Как применить эффект к обрезанному изображению?

1 голос
/ 10 ноября 2009

У меня 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>

Как я могу применить к нему эффект тени?

UPDATE:
Как указал Рэй, лучшее решение - это предложенное Андерсоном - наличие границы обтекания. Спасибо Андерсон.

Ответы [ 3 ]

3 голосов
/ 11 ноября 2009

Это поможет вам: 

<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, примененным к границе обтекания. Из-за того, как работают растровые эффекты, они применяются только к видимой части содержимого.

2 голосов
/ 10 ноября 2009

Это должно работать 

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

Я не пробовал его в комбинации с клипом.

Обновление: это не работает (похоже на ошибку?)

Я бы просто сделал это: 

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

Немного хромает, и вам, возможно, придется настроить некоторые значения ширины, чтобы убедиться, что они точно совпадают, но вы поняли идею.

0 голосов
/ 10 ноября 2009

Полагаю, ответ таков: мне нужно использовать 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>

Пожалуйста, поправьте меня, если я ошибаюсь, или вы можете сделать это проще. Спасибо!

ОБНОВЛЕНИЕ: Очевидно, вы не можете привязать к свойству Source CroppedBitmap!

...