Как добавить отдельные закругленные углы в элементе управления изображениями - PullRequest
Новая
       18

Как добавить отдельные закругленные углы в элементе управления изображениями

0 голосов
/ 12 февраля 2019

У меня проблемы с тем, как я могу индивидуально установить углы элемента управления изображением (или любого элемента управления, который находится внутри элемента управления окном).Использование тегов <Border> добавляет еще один пиксель или границу внутри внешней границы, что противоположно тому, что я хочу - внешняя и внутренняя граница должны сливаться там, где они будут перекрываться.

Я пробовал, что дает мне индивидуальностьугловые размеры.Тем не менее, он добавляет еще один слой границы под внешней границей - что я бы предпочел, чтобы он перекрывался / сливался с внешним слоем, чтобы я оставался размером его толщины.Попытка <Image.Clip> для <Image> элементов управления, однако, не дает мне свободы изменять отдельные углы.

Code Result A

Ниже код использует <Image.Clip> в <Image> Control, который производитприведенный выше результат: 

<Border CornerRadius="10" BorderBrush="White" BorderThickness="1">
    <Canvas Background="Transparent">
        <!--Acrylic Background-->
        <Rectangle
            Fill="White" Opacity="0.4"
            Height="400" Width="600">
            <Rectangle.Clip>
                <RectangleGeometry Rect="0,0,600,400" RadiusX="9" RadiusY="9" />
            </Rectangle.Clip>
        </Rectangle>

        <Image Height="200" Width="400" Source="D:\_\Downloads\shutterstock_389224732-1200x627.jpg" RenderTransformOrigin="0.5,0.5" Canvas.Left="-100" Canvas.Top="100" Stretch="Fill">
            <Image.Clip>
                <RectangleGeometry Rect="0,0,400,200" RadiusX="10" RadiusY="10" />
            </Image.Clip>

            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Border>

Code Result B

Ниже код использует обтекание Control (например), которое дает вышеуказанный результат: 

<Border CornerRadius="10" BorderBrush="White" BorderThickness="1">
    <Canvas Background="Transparent">
        <!--Acrylic Background-->
        <Rectangle
            Fill="White" Opacity="0.4"
            Height="400" Width="600">
            <Rectangle.Clip>
                <RectangleGeometry Rect="0,0,600,400" RadiusX="9" RadiusY="9" />
            </Rectangle.Clip>
        </Rectangle>

        <Border CornerRadius="9,0,0,9" BorderBrush="Red" BorderThickness="1">
            <Canvas Height="398" Width="198">

            </Canvas>
        </Border>
    </Canvas>
</Border>

Примечание нижеувеличенные результаты для кода A и B:

Code Result

Это показывает, что <Image.Clip> автоматически округляет все четыре угла (верхний левый, верхний правый, нижний левый, нижний правый) без добавлениядополнительный пограничный пиксель.Хотя с <Border> у меня есть свобода выбора вручную, какие углы округлять (вверху слева, внизу слева), но он добавляет еще один пиксель границы (как вы видите белые и красные пиксели).

Я ищуфункциональность <Image.Clip>, но свобода вручную выбирать, какие углы обрезать, при этом не добавляя дополнительный пиксель угла, как я пытаюсь достичь ниже пользовательского интерфейса:

Expected Result

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

Ура!

1 Ответ

0 голосов
/ 12 февраля 2019 
 <Grid
        Width="400"
        Height="600"
        Margin="0,0,0,0"
        HorizontalAlignment="Left"
        VerticalAlignment="Top">

        <!--  Add rounded corners here  -->
        <Border
            Name="Mask"
            Grid.RowSpan="2"
            Margin="-5"
            Background="Black"
            CornerRadius="18 0 0 18" />

        <!--  Image  -->
        <Grid Grid.RowSpan="2">
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=Mask}" />
            </Grid.OpacityMask>

            <Image
                Margin="-5"
                Source="{StaticResource UsmanImageSource}"
                Stretch="UniformToFill" />
        </Grid>

    </Grid>
...