0

Поместил ImageSource в Border в надежде не то что он срежет края изображения, если они вылазят за пределы его отрисовки. Но не тут то было.

<Border CornerRadius="2">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Border CornerRadius="2" Grid.RowSpan="3" Grid.Row="0" MinWidth="200">
            <Image Source="{Binding PreviewImage}" />
        </Border>

        <Border MinHeight="20" CornerRadius="2,2,0,0" BorderBrush="SlateGray" Grid.Row="0" Padding="0,0,0,15">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Offset="1" />
                    <GradientStop Color="#7EFFFFFF" Offset="0.8" />
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock Padding="7" ToolTip="{Binding TranslatedTitle}" VerticalAlignment="Center"
                       HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" Foreground="#696c74"
                       Text="{Binding TranslatedTitle}" />
        </Border>

        <Border Grid.Row="2" MinHeight="20" CornerRadius="0,0,2,2" BorderBrush="SlateGray" Padding="0,15,0,0">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Offset="1" Color="White" />
                    <GradientStop Color="#7FFFFFFF" Offset="0.2" />
                    <GradientStop />
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock Padding="7" ToolTip="{Binding OriginalTitle}" VerticalAlignment="Center"
                       HorizontalAlignment="Left"
                       TextTrimming="CharacterEllipsis" Foreground="#696c74" Text="{Binding OriginalTitle}" />
        </Border>
    </Grid>
</Border>

Image1 Image2

Как видно, он не срезал их.

Можно ли срезать эти края, что бы они не вылазили за пределы CornerRadius?

1
  • 1
    Варианта 2. 1- Использовать OpacityMask. 2 - Переписать чуть Border (например как тут)
    – EvgeniyZ
    17 мар 2019 в 14:16

1 ответ 1

1

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

<Border Width="120" Height="120" CornerRadius="50">
    <Border.Background>
        <ImageBrush ImageSource="RedBeast.jpg" Stretch="UniformToFill"/>
    </Border.Background>
</Border>

введите сюда описание изображения

Если же вам нужно обрезать любое содержимое Border, используйте варианты, предложенные в комментарии.

3
  • Хм, либо я чего-то не понял, либо все таки края не срезались? Хотя я подозреваю что это мыло wpf...
    – user206435
    18 мар 2019 в 6:31
  • Должны срезаться. А если побольше радиус поставить? 18 мар 2019 в 8:49
  • Да, они срезаны, это просто мыло... Теперь предстоит борьба с ним...
    – user206435
    18 мар 2019 в 8:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.