WinUI 3：如何优化Grid边框上的命名文本显示效果？

当前用TextBlock和Grid叠放的方式虽然能实现基础效果，但存在标题位置需要手动调整、样式复用性差的问题，推荐以下几种更优方案：

1. 直接用GroupBox控件（最省心） #

WPF自带的GroupBox控件天生适配这种场景——自带标题和边框，直接把你的Grid嵌套进去就行，标题会自动嵌入边框左上角，不用手动调整位置：

<GroupBox Header="Test" Grid.Row="1" Grid.Column="0" Padding="5" Margin="0,10,0,0" BorderBrush="Gray" BorderThickness="2">
    <Grid Name="eingabeAndTabs">
        <!-- 这里放Grid内部的内容 -->
    </Grid>
</GroupBox>

自带的样式就符合常见的标题边框效果，还能通过修改GroupBox的样式快速统一整个程序的风格。

2. 自定义模板实现个性化样式 #

如果需要更个性化的效果（比如标题加背景色、改字体样式），可以自定义一个带标题的边框模板，基于ContentControl来做：

<Style x:Key="CustomTitleBorder" TargetType="ContentControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
                <Grid>
                    <!-- 底层边框 -->
                    <Border BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            Padding="{TemplateBinding Padding}" 
                            Margin="{TemplateBinding Margin}">
                        <ContentPresenter/>
                    </Border>
                    <!-- 上层标题 -->
                    <TextBlock Text="{TemplateBinding Tag}" 
                               Margin="10,0,0,0" 
                               Background="White" 
                               Padding="0,0,5,0"
                               FontWeight="Bold"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用时直接套在Grid外面：

<ContentControl Style="{StaticResource CustomTitleBorder}" 
                Tag="Test" 
                Grid.Row="1" Grid.Column="0" 
                Padding="5" Margin="0,10,0,0" 
                BorderBrush="Gray" BorderThickness="2">
    <Grid Name="eingabeAndTabs">
        <!-- Grid内部内容 -->
    </Grid>
</ContentControl>

这种方式可以完全自定义标题的样式，要是需要更规范的话，还可以把Tag换成自定义的依赖属性。

3. 优化当前的叠放方案 #

如果不想用新控件，也可以优化你现在的做法，让标题看起来更自然——给TextBlock加个背景，遮挡住下方边框的一部分：

<Grid Grid.Row="1" Grid.Column="0" Margin="0,10,0,0">
    <Grid Name="eingabeAndTabs" Padding="5" BorderBrush="Gray" BorderThickness="2"/>
    <TextBlock Text="Test" Margin="10,-10,0,0" Background="White" Padding="0,0,5,0"/>
</Grid>

把TextBlock放在Grid上层，背景设为窗口的底色，这样标题就像是嵌在边框里，比原来的纯重叠效果好看很多。

内容的提问来源于stack exchange，提问作者Rev1k