CODEWITHSUNDEEP
c#.netxamlwinui-3winui
Rena821
Rena821

Reputation: 351

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?

Upvotes: 0

Views: 517

Answers (2)

Junjie Zhu - MSFT
Junjie Zhu - MSFT

Reputation: 3024

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

Upvotes: 1

Katana
Katana

Reputation: 1

Thanks to winui 3 source codes, you can see how expander created and is working... Here you can find all resources used for background so you can copy and paste and overwrite it. Or you can copy-paste styles and modify it.

https://github.com/microsoft/microsoft-ui-xaml/blob/winui3/release/1.5-stable/controls/dev/Expander/Expander_themeresources.xaml

Upvotes: 1

Related Questions