Многоугольник со скруглёнными углами

281

10 февраля 2020, 20:10

Необходимо создать подобный интерфейс - P.S. То, что необходимо создать - более тёмное

В данный момент использую для этого подобный код

<Grid x:Name="WindowsStyle" VerticalAlignment="Top" Height="30">
        <Rectangle Fill="#FF303030" RadiusX="10" RadiusY="10" Height="20" VerticalAlignment="Top">
        </Rectangle>
        <Rectangle Fill="#FF303030" Height="10" VerticalAlignment="Bottom"
                   HorizontalAlignment="Left" Width="10"
                   Margin="0,0,0,10">
        </Rectangle>
        <Rectangle HorizontalAlignment="Right" Margin="0,0,180,5" Width="10" Height="5" VerticalAlignment="Bottom"
                   Fill="#FF303030">
        </Rectangle>
        <Rectangle HorizontalAlignment="Right" Margin="0,0,180,0" Width="20" Height="10" VerticalAlignment="Bottom"
                   RadiusX="5" RadiusY="5" Fill="#FF3C3C3C" />
        <Grid x:Name="WindowsControls" Width="180" HorizontalAlignment="Right">
            <Rectangle RadiusX="5" RadiusY="5" Fill="#FF303030"></Rectangle>
            <Rectangle Fill="#FF303030" Width="5" Height="10" HorizontalAlignment="Right"
                       VerticalAlignment="Bottom">
            </Rectangle>
        </Grid>
    </Grid>

Но, я уверен, что есть способ создать подобное меньшими затратами ресурсов. Как можно это оптимизировать?

Answer 1

Если у вас простое закругление углов для "шапки" приложения, то не обязательно использовать геометрию. Разбейте фигуру на участки, "примитивы", и вы удивитесь как просто это можно сделать.

Смотрите, для начала "разобьем" ваше изображение на части:

Как видим у нас тут простая сетка, давайте сделаем ее:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

Далее мы смотрим какие части у нас существуют, видим что в первой ячейке у нас есть элемент с закругленным углом, сделаем ее на весь размер нашей сетки и закруглим верхние углы:

<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="#FF303030" CornerRadius="5 5 0 0"></Border>

Получаем:

Следующим мы сделаем правую часть, этот объект должен занимать 2 ряда нашей сетки и у него должны быть скруглены два угла:

<Border Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Background="#FF303030" CornerRadius="0 5 0 5" ></Border>

Результат уже сейчас будет такой:

Осталось нам закруглить угол между этими двумя объектами, делается это простым добавлением еще одного Border'a с цветом заднего фона и установкой Margin у первой панели. То есть весь наш код будет таким:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="#FF303030" CornerRadius="5 5 0 0" Margin="0 0 0 -5"></Border>
    <Border Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Background="#FF303030" CornerRadius="0 5 0 5" ></Border>
    <Border Grid.Row="1" Grid.Column="0" Background="White" CornerRadius="0 5 0 0"></Border>
</Grid>

Конечный результат:

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

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