You need to create a similar interface - enter image description here PS What you need to create is darker

Currently using this code for this

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

But, I am sure that there is a way to create this with less resources. How can this be optimized?

  • Just use 2 Border 's in the Grid . - EvgeniyZ
  • one
    I would do through the Path here is an example - Vasek
  • @EvgeniyZ look, there is no rounding at the bottom left, and in the middle, between the transition to the lower part, there is a rounding in two directions. If it can still be done with Border 'a - issue it as an answer. - SKProCH 2:58 pm

1 answer 1

If you have a simple rounding of corners for the application “header”, then it is not necessary to use geometry. Break the figure into sections, "primitives", and you will be surprised how easy it can be done.

See, for the beginning, we will "split" your image into parts:

Division into parts

As we see here we have a simple grid, let's make it:

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

Next, we look at which parts we have, we see that in the first cell we have an element with a rounded corner, we will make it for the whole size of our grid and round the upper corners:

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

We get:

Result 1

Next we will make the right side, this object should occupy 2 rows of our grid and it should have two corners rounded:

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

The result will now be this:

Result 2

It remains for us to round the corner between these two objects, this is done by simply adding another Border 'a with the background color and setting Margin on the first panel. That is, all of our code will be like this:

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

Final result:

Result All

As you can see, without special knowledge of geometry, we made the shape you need with which it is very easy to work further.

Another, quite simple solution to this problem would be to use vector graphics, you just have to draw a layout (or a vector right away) and translate it into SVG. (I wrote about it here .)