Закруглить Image

Question

Не получается правильно закруглить изображение.

<Border CornerRadius="5">
<Image x:Name="NewsImageControl" Stretch="Fill" Cursor="Hand" />
</Border>

Пробовал конечно же использовать:

<Image.Clip>
<EllipseGeometry Center="100,100" RadiusX="200" RadiusY="200" />
</Image.Clip>

Ничего нормального из этого конечно же не происходит

Answer 1

Да способов, по сути, куча. Если брать ваш пример, то EllipseGeometry стоит заменить на RectangleGeometry, который позволит закруглить углы, ну и задать правильные размеры. Выйдет примерно так:

<Image Width="200" Height="200" Stretch="UniformToFill"
       Source="https://lh3.googleusercontent.com/a-/AOh14GgkgAZ0YSM6q6tdBIq0CyGE9M8ekszuCz5485GabA=k-s328">
    <Image.Clip>
        <RectangleGeometry RadiusX="20" RadiusY="20" Rect="0,0,200,200"/>
    </Image.Clip>
</Image>

Можем пойти чуть другим путем и сделать на основе маски, то есть нам нужен объект, который подойдет в качестве маски для изображения, выглядеть будет тогда так:

<Grid Width="200" Height="200">
    <Border x:Name="Mask" Background="Red" CornerRadius="20" Margin="5"/>
    <Image Source="https://lh3.googleusercontent.com/a-/AOh14GgkgAZ0YSM6q6tdBIq0CyGE9M8ekszuCz5485GabA=k-s328">
        <Image.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=Mask}"/>
        </Image.OpacityMask>
    </Image>
</Grid>

Из плюсов, этот пример не привязан как-либо к размерам, но из минусов, цвет маски может заходить за пределы изображения. Для исправления этого недостатка тут Margin на ней, без него будет так:

Видно думаю, что изображение в некой красной рамке.

Есть более радикальный (и как по мне самый лучший) способ, это сделать свой Border, который будет сам следить за закруглением контента внутри себя.

Пишем в поисковике "wpf border cornerradius content" и находим например этот ответ.
Копируем код в проект, подправляем все под себя.

В XAML пишем:

<local:ClippingBorder CornerRadius="20">
    <Image Source="https://lh3.googleusercontent.com/a-/AOh14GgkgAZ0YSM6q6tdBIq0CyGE9M8ekszuCz5485GabA=k-s328" Stretch="UniformToFill"/>
</local:ClippingBorder>

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

Если нужно вообще полностью закруглить изображение, то лучше поступить так:

<Ellipse Height="200" Width="200">
    <Ellipse.Fill>
        <ImageBrush Stretch="UniformToFill" ImageSource="https://lh3.googleusercontent.com/a-/AOh14GgkgAZ0YSM6q6tdBIq0CyGE9M8ekszuCz5485GabA=k-s328"/>
    </Ellipse.Fill>
</Ellipse>

Результатом будет полноценный круг, но именно закругленные углы вы тут вряд-ли получите.

Вот, собственно, и основные пути решения данной задачи.

БЛОГ НА HUSL

Закруглить Image

Ответы (1 шт):