Customize expander - UWP App

Question

I have an UWP app (published in Windows/Microsoft Store), and I want add an Expander, based on the UWP Community Toolkit Sample App, but wanted to customize it. I have this code:

<controlsToolkit:Expander x:Name="Expander1"
                          Margin="0,0,0,10" 
                          Header="Details"
                          IsExpanded="False"
                          ExpandDirection="Down"
                          RelativePanel.AlignHorizontalCenterWithPanel="True"
                          RelativePanel.AlignVerticalCenterWithPanel="True"
                          Foreground="Gray"
                          BorderThickness="2">
    <controlsToolkit:Expander.BorderBrush>
        <SolidColorBrush Color="Gray" Opacity="0.4"/>
    </controlsToolkit:Expander.BorderBrush>
        <TextBlock HorizontalAlignment="Center"
                   TextWrapping="Wrap"
                   Text="Details Example"
                   VerticalAlignment="Center"/>
</controlsToolkit:Expander>

I want the expander button to have a gray border, but I do not know why that border does not appear:

And when I click on my expander, I want the background to be grayed out instead of this blue, but I do not know how I do it:

Shawn Kendrot · Answer 1 · 2017-10-31T21:54:31.097

2

Doesn't look like the Expander honors BorderBrush or BorderThicknes styles. I filed an issue and a PR to fix this.

The control will respect the Background property and will apply it to the Header and the Content. However, the ToggleButton used for the Header does have a style that applies a system color (the accent color) for when it is Checked (aka expanded).

You can modify the header color by adding a resource to the expander

<controls:Expander.Resources>
    <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="Red"/>
</controls:Expander.Resources>

Or you can restyle the control to change the ToggleButton style to not change the background color when it is checked

edited Oct 31 '17 at 21:54

answered Oct 31 '17 at 21:33

Shawn Kendrot

12,425
1
25
41

I can not put a border on my expander button like I have in my code? – Fernando Sousa Nov 01 '17 at 19:32
The latest dev build of the toolkit does allow for this now. You can either pull in the dev build (risky) or just wrap the Expander with a Border directly. – Shawn Kendrot Nov 01 '17 at 23:15
But border dont appear in my app, and I am using this code: ... `BorderThickness="2"> ` – Fernando Sousa Nov 02 '17 at 19:38
Wrap the Expander with a Border means to wrap the Expander with a Border control. `````` – Shawn Kendrot Nov 02 '17 at 20:29
But I want the border with `Opacity="0.4"` – Fernando Sousa Nov 06 '17 at 17:39
So make it with opacity 0.4 – Shawn Kendrot Nov 07 '17 at 15:24
You can accomplish that the same as you did when trying to set the brush for the expander – Shawn Kendrot Nov 08 '17 at 15:50
I do like this approach very much since it doesn't require overriding complete styles. However, in my version of the Expander the resource being used is now called "SystemControlHighlightListAccentLowBrush". So my code looks like this: ` ` I also used a ThemeResource to make sure it's still okay when the user switches themes from Light to Dark. – riesm Jan 12 '20 at 13:27

score 0 · Answer 2 · answered Oct 31 '17 at 18:39

0

Have a look at the expander control template, add it to your page / app resources and tweak it. https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Controls/Expander/Expander.xaml

I'll take a look at the issue you are facing soon.

answered Oct 31 '17 at 18:39

Hermit Dave

3,036
1
13
13

I've been copying the code to the UWP Community Toolkit Sample App and based on that! And I just edited the code and customized it my way, which is what I want! I want to put a gray border around it and I can not! – Fernando Sousa Oct 31 '17 at 21:24
@shawn has filed an issue for this - https://github.com/Microsoft/UWPCommunityToolkit/issues/1583. could you by any chance create a repro ? – Hermit Dave Oct 31 '17 at 21:40

Customize expander - UWP App

2 Answers2