Search code examples
c#.netxamlwinui-3winui

How can I set the background color of the whole Expander WinUI3 control?

I want to set the background color of the control Expander in my WinUI3 app. By setting the background property to a certain color only the color of expanded panel will be set.

<Grid Background="CadetBlue">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
    <Expander Header="header" Content="content" Background="Black"/>
    <Expander Header="header" Content="content"/>
</StackPanel>
</Grid>

enter image description here

I also tried to set the the Header property like this but that was not successful either.

<Expander>
    <Expander.Header>
        <Border Background="SkyBlue">
            <TextBlock Text="HEADER" />
        </Border>
    </Expander.Header>
    <TextBlock Text="CONTENT" />
</Expander>

enter image description here

I also tried to place it in a border but then the colored ares was bigger than the control:

<Border HorizontalAlignment="Left" VerticalAlignment="Center" Background="SkyBlue" BorderBrush="HotPink" BorderThickness="1" CornerRadius="{StaticResource ControlCornerRadius}">
<Expander Content="CONTENT" Header="HEADER" />

enter image description here

How could I set the background color of the header or the whole control properly?

Solution

  • @Katana has provided you with the resource code of Expander. Find ExpanderHeaderBackground in the resource code, and then rewrite its brush color in Expander.Resource. If you don't know how to use it, you can refer to the following code.

       <Grid Background="CadetBlue">
       <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
           <Expander Header="header" Content="content" Background="Black">
               <Expander.Resources>
                   <SolidColorBrush x:Key="customExpanderHeaderBackgroundColor" Color="green"/>
                   <StaticResource x:Key="ExpanderHeaderBackground" ResourceKey="customExpanderHeaderBackgroundColor" />
               </Expander.Resources>
           </Expander>
           <Expander Header="header" Content="content"/>
       </StackPanel>
   </Grid>