CODEWITHSUNDEEP
wpf
Tom Xue
Tom Xue

Reputation: 3355

How to make Grid with round corner in WPF

I want to make my Grid with round corner in my WPF project. And due to some reason, I have to use ViewBox and hence to make it more difficult. My code is as below:

<Window x:Class="WpfApp5.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp5"
    mc:Ignorable="d"
    WindowStyle="None"
    AllowsTransparency="True"
    Background="Green"
    Width="500" Height="300">

<Grid x:Name="gridTotal">
    <Viewbox x:Name="vb">
        <Grid Width="500" Height="300">
            <Image x:Name="BlackMaskImage" Stretch="UniformToFill"/>
            <Button Width="100" Height="100">
                
            </Button>
        </Grid>
    </Viewbox>
</Grid>

I tries some method, like this: How can I make a rounded-corners form in WPF?

But not work for my case.

More：

In my code, there are two Grid. But for me, the final appearance of the window has 4 round corner is OK. That is I don't care which Grid is fabricated.

I tried to change the gridTotal to a Border, and that border can own round corner. But its content is still a rectangle with sharp right angle.

In UWP, a Grid can apply Style with setter to set its CornerRadius, but in WPF I cannot do so.

Upvotes: 0

Views: 527

Answers (2)

Ignacio Rios
Ignacio Rios

Reputation: 1

The easy way:

    WindowStyle="None" AllowsTransparency="True">
<Window.Clip>
    <RectangleGeometry Rect="0,0,800,450" RadiusX="100" RadiusY="90"/>
</Window.Clip>

    <Grid Background="#FF2B7D2B">

Upvotes: 0

EldHasp
EldHasp

Reputation: 7943

You don't specify any region breakdown in the Grid.
Use Border instead.

<Window x:Class="WpfApp5.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    WindowStyle="None"
    AllowsTransparency="True"
    Background="{x:Null}"
    Width="500" Height="300">

    <Border x:Name="gridTotal" CornerRadius="20"
            Background="Green">
            <Grid Width="500" Height="300">
                <Image x:Name="BlackMaskImage" Stretch="UniformToFill"/>
                <Button Width="100" Height="100">

                </Button>
            </Grid>
    </Border>
</Window>

Upvotes: 1

Related Questions