How to create a WPF Expander Header?

Question

I would like to apply the style in the WPF Expander Header. In the next XAML, I have an Expander, but the style for it is not just for the title.

Thank.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" > <StackPanel> <StackPanel.Resources> <Style TargetType="Expander"> <Style.Resources> <LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#EF3132" Offset="0.1" /> <GradientStop Color="#D62B2B" Offset="0.9" /> </LinearGradientBrush> </Style.Resources> <Setter Property="Background" Value="{StaticResource BackBrush}"/> </Style> </StackPanel.Resources> <Expander> <StackPanel> <TextBlock>Bike</TextBlock> <TextBlock>Car</TextBlock> <TextBlock>Truck</TextBlock> </StackPanel> </Expander> </StackPanel> </Page> 

Answer 1

I combined some XAML from Josh Smith and MSDN and came up with a solution. In fact, the control (at least the title) should be repeated.

 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400"> <StackPanel> <StackPanel.Resources> <Style TargetType="Border" x:Key="RacePitBorderStyle" > <Style.Resources> <LinearGradientBrush x:Key="BackBrush" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#EF3132" Offset="0.1" /> <GradientStop Color="#D62B2B" Offset="0.9" /> </LinearGradientBrush> </Style.Resources> <Setter Property="Background" Value="{StaticResource BackBrush}"/> </Style> <DataTemplate x:Key="titleText"> <Border Style="{StaticResource RacePitBorderStyle}" Height="24"> <TextBlock Text="{Binding}" Margin="4 0" VerticalAlignment="Center" Foreground="White" FontSize="11" FontWeight="Normal" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Expander}}, Path=ActualWidth}" TextWrapping="Wrap"/> </Border> </DataTemplate> <Style TargetType="{x:Type Expander}"> <Setter Property="HeaderTemplate" Value="{StaticResource titleText}"/> </Style> </StackPanel.Resources> <Expander Name="hcontCtrl" Header="This is the header."> <StackPanel> <TextBox>This is a textbox</TextBox> <Button>A button</Button> </StackPanel> </Expander> </StackPanel> </Page> 

Answer 2

I think Vasile’s answer is on the right track, but it looks like it is much bigger than the original poster. The entire original question asked was to change the background of the title. Although the presented change does this, it also does other things.

One of these things is to replace the default implementation, I believe that ContentPresenter with TextBlock. So what happens when we add a second expander to this stack pane? Maybe something like:

 <Expander> <Expander.Header> <StackPanel> <Border height="5" width="5" Foreground="Blue"/> <TextBlock>Ha!</TextBlock> </StackPanel> </Expander.Header> </Expander> 

I don’t know, but it’s not good. Instead, I think we want to keep it simple.

 <DataTemplate x:Key="expanderHeader"> <ContentPresenter Content={Binding} TextBlock.Background={StaticResource myBrush}/> </DataTemplate> <Style TargetType="Expander"> <Setter Property="HeaderTemplate" Value="{StaticResource expanderHeader}"/> </Style> 

Thus, when someone puts something that is not just text in our stylized expander, we will not break. If you want to make sure that you have completely linked everything that they do with this background, that would probably be desirable:

 <DataTemplate x:Key="expanderHeader"> <Border Background={StaticResource myBrush}> <ContentPresenter Content={Binding}/> </Border> </DataTemplate> 

Answer 3

Depends on what you want in style - you can style any part of it. If you want to change the contents in the header, just put your entire user interface in the Expander.Header property and it will appear in the header area.

if this does not suit your needs, you will probably need to reinstall the control. Take a look at the management templates posted in WPF here