WinUI3中如何正确设置Expander控件整体或头部的背景色？

在WinUI3中，Expander的Background属性默认仅作用于展开后的内容面板，头部区域的背景由控件模板独立控制，这就是你之前尝试的方法无效的原因。以下是两种可行的解决方式：

方法一：自定义Header并拉伸背景（快速修改头部） #

你之前自定义Header的方法问题在于没有让背景元素填满整个头部宽度，只需给Header内的Border添加HorizontalAlignment="Stretch"即可：

<Expander>
    <Expander.Header>
        <!-- 增加HorizontalAlignment="Stretch"让背景填满头部宽度 -->
        <Border Background="SkyBlue" HorizontalAlignment="Stretch" Padding="12,8">
            <TextBlock Text="HEADER" />
        </Border>
    </Expander.Header>
    <TextBlock Text="CONTENT" Padding="12,8" />
</Expander>

该方法仅修改头部背景，适合快速实现简单需求。

方法二：修改控件模板（统一设置整个控件背景） #

如果需要让头部和内容面板使用统一的背景色，或者进行更复杂的样式定制，需要修改Expander的控件模板，将头部区域的背景绑定到Expander的Background属性：

<Page.Resources>
    <Style TargetType="Expander">
        <Setter Property="Background" Value="Black"/>
        <Setter Property="BorderBrush" Value="Gray"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="CornerRadius" Value="4"/>
        <Setter Property="Padding" Value="12,8"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Expander">
                    <StackPanel>
                        <!-- 头部容器：将Background绑定到Expander的Background属性 -->
                        <Border 
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}">
                            <Grid Margin="{TemplateBinding Padding}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <!-- 展开/折叠按钮 -->
                                <ToggleButton 
                                    x:Name="ExpandCollapseChevron"
                                    IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                    Style="{StaticResource ExpanderToggleButtonStyle}"/>
                                <!-- 头部内容 -->
                                <ContentPresenter 
                                    x:Name="HeaderContentPresenter"
                                    Grid.Column="1"
                                    Content="{TemplateBinding Header}"
                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                    HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}"/>
                            </Grid>
                        </Border>
                        <!-- 内容面板：可根据需求绑定Background -->
                        <Border
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="0,0,1,1"
                            CornerRadius="0,0,4,4"
                            Margin="0,-1,0,0">
                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Margin="{TemplateBinding Padding}"
                                Visibility="Collapsed"/>
                        </Border>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<!-- 使用示例 -->
<Grid Background="CadetBlue">
    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top" Spacing="10">
        <Expander Header="header" Content="content"/>
        <Expander Header="header" Content="content" Background="DarkCyan"/>
    </StackPanel>
</Grid>

这个模板将头部和内容面板的背景都绑定到Expander的Background属性，设置Expander的Background时，整个控件的背景会统一变化，同时保留了圆角、边框等样式的一致性。

补充说明 #

你之前尝试的将Expander放入Border的方法无效，是因为Expander默认模板内部有间距，导致Border的背景被Expander的透明区域覆盖，若要使用这种方式，需要同时设置Expander的Padding="0"并移除模板内的多余间距，不如直接修改模板高效。

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