Como estilo de um Expander Header WPF?
Pergunta
Eu gostaria de aplicar um estilo em um Expander Header WPF. No seguinte XAML Eu tenho um Expander mas o estilo é para todos, não apenas para o cabeçalho.
Graças.
<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>
Solução
Eu combinei alguns XAML de Josh Smith e MSDN e veio com uma solução. Na verdade, o controlo (ai menos do cabeçalho) deve ser retemplated.
<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>
Outras dicas
Eu acho que a resposta de Vasile está no caminho certo, mas parece que ele faz muito mais do que o poster original necessário. Toda a pergunta original estava pedindo a fazer era mudar o fundo do cabeçalho. Enquanto a mudança apresentada faz isso, ele também faz outras coisas.
Uma dessas outras coisas é para substituir a implementação padrão, acredito que um ContentPresenter, com um TextBlock. Então, o que acontece quando mais tarde, adicionar um segundo expansor para este StackPanel? Talvez algo como:
<Expander>
<Expander.Header>
<StackPanel>
<Border height="5" width="5" Foreground="Blue"/>
<TextBlock>Ha!</TextBlock>
</StackPanel>
</Expander.Header>
</Expander>
Eu não sei, mas não é bom. Em vez disso, eu acho que nós queremos manter este simples.
<DataTemplate x:Key="expanderHeader">
<ContentPresenter
Content={Binding}
TextBlock.Background={StaticResource myBrush}/>
</DataTemplate>
<Style TargetType="Expander">
<Setter Property="HeaderTemplate" Value="{StaticResource expanderHeader}"/>
</Style>
Dessa forma, quando alguém coloca algo que não é apenas texto em nosso expansor com estilo, nós não quebrar. Se você quer ter a certeza que envolva a totalidade do que eles fazem com este pano de fundo, o que provavelmente é desejado, que seria parecido com:
<DataTemplate x:Key="expanderHeader">
<Border Background={StaticResource myBrush}>
<ContentPresenter Content={Binding}/>
</Border>
</DataTemplate>
Depende do que você quer estilo - você pode estilo qualquer parte dela. Se você quiser alterar o conteúdo no cabeçalho, basta colocar toda a sua UI na propriedade Expander.Header, e ele vai mostrar na área do cabeçalho.
se que does't atender às suas necessidades, você provavelmente precisará re-modelo de controle. Dê uma olhada nos modelos de controle embarcadas em WPF aqui