如何在带有圆角的WPF表单中创建一个圆角矩形？

Question

我正在使用WPF创建一个应用程序，并且希望它具有圆角。现在，由于窗体是无边框的，我尝试创建一个圆角矩形并将其放置在顶部，使其看起来像Windows应用程序的顶部栏。

但是我无法做到。

这是我的代码：

<Border CornerRadius="50, 0, 50, 0" BorderBrush="Black" BorderThickness="2" Background="GhostWhite">
        <Grid Margin="0,0,0,402">
            <Rectangle HorizontalAlignment="Left" Height="44" VerticalAlignment="Top" Width="796">
                <Rectangle.Fill>
                    <VisualBrush Stretch="None">
                        <VisualBrush.Visual>
                            <Border Width="800" Height="200" CornerRadius="50,0,0,0" Background="DarkOliveGreen"/>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Grid HorizontalAlignment="Left" Height="403" Margin="0,44,0,-403" VerticalAlignment="Top" Width="796"/>
        </Grid>
    </Border>

我的主表单：

我想要的：

我得到的：

- Omanshu Chaurasia

---

边框作为控件并不限制其内容并强制将其放在边框内，您可以使用不透明度蒙版来解决这个问题。 - Denis Schaf

我甚至尝试分别为矩形添加另一个<Border>。它显示“属性“Content”被设置了多次”。 - Omanshu Chaurasia

窗口大小会是固定的吗？我建议在窗口上裁剪。你需要一个geometry来定义它。 WindowChrome可能是一个选择，但该选项的cornerradius似乎存在错误，无法与内部边框匹配。 - Andy

Answer 1

测试并且运行成功。

<Window
    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:Controls="clr-namespace:WpfTester.Controls" x:Class="WpfTester.MainWindow"
    mc:Ignorable="d"
    WindowStyle="None"
    AllowsTransparency="True"
    Title="MainWindow" Height="1000" Width="1000" Loaded="Window_Loaded" MouseDown="Window_MouseDown">
<Window.Background>
    <SolidColorBrush Opacity="0.0" Color="White"/>
</Window.Background>
<Grid Name="MainGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition />
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Border CornerRadius="50, 0, 0, 0" BorderBrush="Black" BorderThickness="2,2,2,0" Background="DarkOliveGreen">
        </Border>
    </Grid>
    <Border Grid.Row="1" BorderBrush="Black" BorderThickness="2,0,2,0" Background="White">
        <Grid Name="Body">

        </Grid>
    </Border>
    <Border Grid.Row="2" CornerRadius="0, 0, 50, 0" BorderBrush="Black" BorderThickness="2,0,2,2" Background="White">
    </Border>
</Grid>

你可以在名为“Body”的区域中添加内容。 已添加：由于圆角处的白色背景，我改变了我的解决方案。

- Arphile

---

@Andy 已修改。 - Arphile

如果你不想要它，x:null会更合适吧？ - Andy

Answer 2

您需要对控制结构进行一些小的更改，才能实现它。以下代码已经经过测试并可以使用。

<Grid>
    <Grid.OpacityMask>
        <VisualBrush Visual="{Binding ElementName=myBorder}" />
    </Grid.OpacityMask>
    <Border x:Name="myBorder" CornerRadius="50,0,50,0" Background="GhostWhite" BorderBrush="Black" BorderThickness="2"/>
    <Rectangle HorizontalAlignment="Left" Height="44" VerticalAlignment="Top" Width="796">
        <Rectangle.Fill>
            <VisualBrush Stretch="None">
                <VisualBrush.Visual>
                    <Border Width="800" Height="200" CornerRadius="50,0,0,0" Background="DarkOliveGreen"/>
                </VisualBrush.Visual>
            </VisualBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

- Gaurang Dave