如何在WinUI3页面中创建Sections/Panels（区块/面板）

针对你想在WinUI3页面中创建类似官方示例里的带标题、圆角框的区块需求，结合你有WinForms使用经验的背景，整理以下核心控件和实现思路：

核心可用控件 #

• Expander：自带标题栏+可折叠内容区，默认样式就带圆角和阴影，完美匹配官方示例的区块风格，是最省心的选择。
• GroupBox：传统分组控件，自带标题，但默认没有圆角，需要自定义模板实现，适合不需要折叠功能的静态区块。
• Border：基础布局控件，可自由搭配TextBlock做标题，通过CornerRadius属性直接设置圆角，自由度最高，适合高度定制的场景。

具体实现方式 #

1. 用Expander快速实现（推荐） #

直接使用Expander控件，设置Header为区块标题，内容区放入你需要的布局控件（如StackPanel、Grid）即可，默认样式就符合要求：

<Expander Header="示例区块标题" Margin="10" CornerRadius="8">
    <StackPanel Padding="10">
        <!-- 这里放置区块内的内容控件 -->
        <TextBlock Text="区块内的演示内容"/>
    </StackPanel>
</Expander>

2. 用GroupBox做静态分组区块 #

GroupBox默认标题在边框上方，要添加圆角需要修改其控件模板，示例代码如下：

<GroupBox Header="静态区块标题" Margin="10">
    <GroupBox.Template>
        <ControlTemplate TargetType="GroupBox">
            <Border CornerRadius="8" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <ContentPresenter Content="{TemplateBinding Header}" 
                                      Margin="10,0,0,0" 
                                      VerticalAlignment="Top"/>
                    <ContentPresenter Grid.Row="1" 
                                      Margin="10" 
                                      Content="{TemplateBinding Content}"/>
                </Grid>
            </Border>
        </ControlTemplate>
    </GroupBox.Template>
    <StackPanel Padding="5">
        <TextBlock Text="静态区块的内容"/>
    </StackPanel>
</GroupBox>

3. 用Border完全自定义区块 #

如果需要特殊的标题布局、颜色或样式，用Border组合TextBlock实现完全自定义：

<Border Margin="10" 
        CornerRadius="8" 
        BorderBrush="Gray" 
        BorderThickness="1" 
        Background="#F5F5F5">
    <StackPanel>
        <TextBlock Text="自定义区块标题" 
                   Padding="10,10,10,0" 
                   FontWeight="Bold"/>
        <Border BorderBrush="LightGray" 
                BorderThickness="0,1,0,0" 
                Margin="10,0"/>
        <StackPanel Padding="10,8">
            <TextBlock Text="自定义的区块内容"/>
        </StackPanel>
    </StackPanel>
</Border>

方向建议 #

• 优先选Expander：如果需要折叠/展开功能，或者想快速匹配官方示例风格，Expander自带的设计样式无需额外调整，直接用就能出效果。
• 静态区块选GroupBox：如果不需要折叠功能，GroupBox的语义更清晰，修改模板添加圆角即可。
• 高度定制用Border：如果要做特殊的标题位置、阴影效果或配色，Border能完全满足你的定制需求。
• 参考官方模板：可以在Visual Studio的控件模板编辑器中查看Expander、GroupBox的默认模板，学习微软的设计规范，方便后续自定义样式。

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