TemplatedControl Expander header not showing

Question

I have created a TemplatedControl as follows,

namespace Presentation.Common.Controls
{
public sealed class ExpanderEx : Expander
{
 public ExpanderEx()
        {
            this.DefaultStyleKey = typeof(ExpanderEx);
        }
}
}

In the ResourceDictionary inside xaml, I have a style as follows, (this same style when applied on a normal Microsoft.Toolkit.Uwp.UI.Controls.Expander works just fine. I can see the header)

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Presentation.Common.Controls">
  <Style TargetType="local:ExpanderEx">
        <Setter Property="HeaderStyle" Value="{StaticResource LightExpanderHeaderToggleButtonStyle}"/>
        <Setter Property="Margin" Value="4"/>
        <Setter Property="Background" Value="Green"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="IsExpanded" Value="True"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
    </Style>

<Style x:Key="LightExpanderHeaderToggleButtonStyle" TargetType="ToggleButton">
        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Padding" Value="0,0,0,0" />
        <Setter Property="Height" Value="40" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontSize" Value="{StaticResource FontSizeMedium}" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid x:Name="RootGrid" 
                                  Background="{StaticResource BrushBeckmanAquaA1}">
                        <Grid.Resources>
                            <SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="Transparent"></SolidColorBrush>
                            <SolidColorBrush x:Key="SystemControlHighlightListAccentMediumBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.2"></SolidColorBrush>
                            <SolidColorBrush x:Key="SystemControlHighlightListAccentHighBrush" Color="{ThemeResource SystemAccentColor}" Opacity="0.3"></SolidColorBrush>
                        </Grid.Resources>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Rectangle x:Name="HoverPanel" Grid.ColumnSpan="2" Fill="Transparent" />

                        <Slider x:Name="ArrowRotation" Maximum="180" Minimum="-180" Visibility="Collapsed" Value="90" />

                        <FontIcon x:Name="Arrow" Margin="12" FontFamily="Segoe MDL2 Assets" FontSize="12" Glyph="&#xE76C;" RenderTransformOrigin="0.5,0.5" 
                                          Foreground="White">
                            <FontIcon.RenderTransform>
                                <RotateTransform />
                            </FontIcon.RenderTransform>
                        </FontIcon>

                        <ContentPresenter x:Name="ContentPresenter"
                                                  Grid.Column="1"
                                                  Padding="{TemplateBinding Padding}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                                  HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
                                                  VerticalContentAlignment="Stretch"
                                                  AutomationProperties.AccessibilityView="Raw"
                                                  BorderBrush="{TemplateBinding BorderBrush}"
                                                  BorderThickness="{TemplateBinding BorderThickness}"
                                                  Content="{TemplateBinding Content}"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                                  Foreground="{TemplateBinding Foreground}"
                                                  RenderTransformOrigin="0.5,0.5" />

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        <DoubleAnimation BeginTime="0:0:0"
                                                         Storyboard.TargetName="Arrow"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                         To="0.0"
                                                         Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlBackgroundListLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        <DoubleAnimation BeginTime="0:0:0"
                                                         Storyboard.TargetName="Arrow"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                         To="0.0"
                                                         Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{ThemeResource SystemControlBackgroundListMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <DoubleAnimation BeginTime="0:0:0"
                                                         Storyboard.TargetName="Arrow"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                         To="0.0"
                                                         Duration="0:0:0.1" />
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <DoubleAnimation BeginTime="0:0:0"
                                                         Storyboard.TargetName="Arrow"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                         To="0.0"
                                                         Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        <DoubleAnimation BeginTime="0:0:0"
                                                         Storyboard.TargetName="Arrow"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
                                                         Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="CheckedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                        <DoubleAnimation BeginTime="0:0:0"
                                                         Storyboard.TargetName="Arrow"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
                                                         Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="CheckedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <DoubleAnimation BeginTime="0:0:0"
                                                         Storyboard.TargetName="Arrow"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
                                                         Duration="0:0:0.1" />
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="CheckedDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <DoubleAnimation BeginTime="0:0:0"
                                                         Storyboard.TargetName="Arrow"
                                                         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                         To="{Binding ElementName=ArrowRotation, Path=Value}"
                                                         Duration="0:0:0.1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IndeterminatePointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IndeterminatePressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IndeterminateDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HoverPanel"
                                                                       Storyboard.TargetProperty="Fill">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="ExpandDirectionStates">
                                <VisualState x:Name="RightDirection" />

                                <VisualState x:Name="DownDirection" />

                                <VisualState x:Name="LeftDirection">
                                    <VisualState.Setters>
                                        <Setter Target="ArrowRotation.Value" Value="-90" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="UpDirection">
                                    <VisualState.Setters>
                                        <Setter Target="ArrowRotation.Value" Value="-90" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Now I am using this Templated control inside a new user control as follows,

<controls:ExpanderEx x:Name="ExpanderLisSharedSettings" Grid.Row="0" Header="Hello">

</control:ExpanderEx>

Problem is it never shows the Expander header. So I tried changing the background property to green where it says and it never seems to change the background color. Please help. I am using the Microsoft Controls Toolkit Expander Control.

Answer 1

The reason the control doesn't show is that you haven't defined an ExpanderEx template.

Generally TemplateControl has Template structure, such as this:

<!-- other style code -->
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ExpanderEx">
            <!-- template code -->
        </ControlTemplate>
    </Setter.Value>
</Setter>

Although your ExpanderEx inherits Expander, it does not inherit its template style, and you also set this.DefaultStyleKey = typeof(ExpanderEx);, UWP finds the style of ExpanderEx, but it cannot be displayed because you have not defined.

So if you want to display, you may copy Expander's default template style to the new ExpanderEx and modify it.