Question

我有以下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"/>

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

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

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

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

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

你会有这样的结果

Answer 2

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

这是您想要的吗？

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

2 个答案: