是否可以为 wpf 边框圆角的“外部”区域着色答案

【问题标题】：Is it possible to color the area "outside" of a wpf border rounded corner是否可以为 wpf 边框圆角的“外部”区域着色
【发布时间】：2018-11-07 08:09:08
【问题描述】：

我有以下 xaml 代码：

<UserControl.Resources>
    <Style TargetType="GroupBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GroupBox">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Border Grid.Row="0" BorderThickness="1 1 0 0" BorderBrush="#25A0DA" CornerRadius="2 0 0 0" Background="Gray">
                            <Label Foreground="White">
                                <ContentPresenter Margin="0" ContentSource="Header" RecognizesAccessKey="True" />
                            </Label>
                        </Border>
                        <Rectangle Grid.Row="0" Grid.Column="1" Fill="Gray" IsHitTestVisible="False"/>

                        <Border Grid.Row="0" Grid.Column="1" BorderThickness="1 0 0 1" BorderBrush="#25A0DA" CornerRadius="0 0 0 70" Background="Green"/>

                        <Border Grid.Row="1" Grid.ColumnSpan="2" BorderThickness="1 0 0 0" BorderBrush="#25A0DA">
                            <ContentPresenter Margin="4" />
                        </Border>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<GroupBox Grid.Row="0" Foreground="White" Header="This is some header" Content="This is some content"/>

如您所见，我的标题由两个边框和一个矩形组成。

我目前使用矩形来为第二个边框的圆角留空的空间着色。

当前为绿色的空间实际上应该是完全透明的，但是，如果我将第二个边框的背景颜色设置为透明，我用来填充其他空间的矩形的其余部分当然会变得可见。

如何使绿色部分完全透明（例如内容区域）

【问题讨论】：

标签： c# wpf border

【解决方案1】：

有一个有趣的东西叫做Path geometry。因此，无需使用带有圆角的Retangles 和Borders 组合来制作自定义标题，您可以通过一些几何学基础知识轻松绘制更复杂的形状。

所以用下面的代码替换它们

编辑：对代码的一些解释，图中由四段组成，其中三段是线段，你只是定义了线的终点。而有趣且更复杂的是ArcSegment，除了圆弧段的终点，还需要定义圆弧的大小和方向。使用 ArcSegment 的 Size 值，看看它如何改变你的形状。

<Path Stroke="Black" StrokeThickness="1" Fill="Gray">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigure StartPoint="0, 0">
                    <PathFigure.Segments>
                        <LineSegment Point="100, 0" />
                        <ArcSegment
                            Size="50,50"                                                                  
                            SweepDirection="Counterclockwise"
                            Point="150,50" />   
                        <LineSegment Point="0, 50" />
                        <LineSegment Point="0, 0" />
                    </PathFigure.Segments>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

你有这样的结果

【讨论】：

【解决方案2】：

<Path Fill="Red" Data="M10 10 C15 20 30 20 30 20 H10"/>

这是你想要的吗？

【讨论】：