Base Expander Style, override header color

Question

Is it possible to create some sort of base expander style and override the background color of the header in a derived style? In my application I'm using expanders a lot and I would like to change the background color of the header. I know I could just copy&paste my style and edit the color, but it would be nicer to just create a new style based on the "base style" and setting the header's background color. But I do not know how to access this color. It's the color of this line: below I'd like to change (the border in the header): Border Name="border"... I cannot access "border" in the setter of the derived style...

This is my (base) style:

<Style TargetType="Expander" x:Key="ExpanderStyle">
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextColor}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <!-- Control template for expander -->
            <ControlTemplate TargetType="Expander" x:Name="exp">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Name="ContentRow" Height="0"/>
                    </Grid.RowDefinitions>
                    <Border Name="border" Grid.Row="0" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" BorderThickness="1" CornerRadius="4,4,0,0" >
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="20" />
                            </Grid.ColumnDefinitions>
                            <ToggleButton x:Name="tb" FontFamily="Marlett" FontSize="9.75" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" Foreground="Black" Grid.Column="1" Content="u" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" />
                            <ContentPresenter x:Name="HeaderContent" Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True" />
                        </Grid>
                    </Border>
                    <Border x:Name="Content" Grid.Row="1" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" >
                        <ContentPresenter Margin="4" />
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="True">
                        <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=Height}" />
                        <Setter Property="Content" TargetName="tb" Value="t"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I would like to do something like this:

<Style x:Key="ExpanderStyleRed" BasedOn="{StaticResource ExpanderStyle}" TargetType="Expander">
            <Setter Property="???" Value="Red"/>
<Style>

jsanalytics jsanalytics · Accepted Answer · 2016-07-06T12:04:16

Use TemplateBinding:

        <Style TargetType="Expander" x:Key="ExpanderStyle">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextColor}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <!-- Control template for expander -->
                <ControlTemplate TargetType="Expander" x:Name="exp">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Name="ContentRow" Height="0"/>
                        </Grid.RowDefinitions>
                        <Border Name="border" Grid.Row="0" Background="{TemplateBinding Background}" BorderThickness="1" CornerRadius="4,4,0,0" >
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="20" />
                                </Grid.ColumnDefinitions>
                                <ToggleButton x:Name="tb" FontFamily="Marlett" FontSize="9.75" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" Foreground="Black" Grid.Column="1" Content="u" IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" />
                                <ContentPresenter x:Name="HeaderContent" Grid.Column="0" Margin="4" ContentSource="Header" RecognizesAccessKey="True" />
                            </Grid>
                        </Border>
                        <Border x:Name="Content" Grid.Row="1" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" >
                            <ContentPresenter Margin="4" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=Height}" />
                            <Setter Property="Content" TargetName="tb" Value="t"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ExpanderStyleRed" BasedOn="{StaticResource ExpanderStyle}" TargetType="Expander">
        <Setter Property="Background" Value="#2fff0000"/>
    </Style>

And then:

    <Grid>

    <Expander x:Name="expander1" Style="{DynamicResource ExpanderStyle}" Header="Expander" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="7,10,0,0" Height="108">
        <TextBlock Width="250" Height="150" TextWrapping="Wrap">
            asklsaklsa saaskklsaklas alsaklalkjd
            asklsaklsaklsa saklsaklsakl jsajkjska
            saklsaklsakl sasa
        </TextBlock>
    </Expander>

    <Expander x:Name="expander2" Style="{DynamicResource ExpanderStyleRed}" Header="Expander" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12,126,0,0" Height="133">
        <TextBlock Width="250" Height="150" TextWrapping="Wrap">
            asklsaklsa saaskklsaklas alsaklalkjd
            asklsaklsaklsa saklsaklsakl jsajkjska
            saklsaklsakl sasa
        </TextBlock>
    </Expander>

</Grid>

Base Expander Style, override header color

1 Answers