hechas - ¿Cómo diseñar un encabezado de expansión de WPF?

wpf c#

Question

Me gustaría aplicar un estilo en un encabezado de expansión de WPF. En el siguiente XAML tengo un expansor pero el estilo es para todo, no solo para el encabezado.

Gracias.

<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

Creo que la respuesta de Vasile está en el camino correcto, pero parece que hace mucho más de lo que el cartel original necesitaba. Toda la pregunta original que pedía era cambiar el fondo del encabezado. Si bien el cambio presentado sí lo hace, también hace otras cosas.

Una de estas cosas es reemplazar la implementación predeterminada, creo que es un ContentPresenter, con un TextBlock. Entonces, ¿qué sucede cuando más tarde agregamos un segundo expansor a este stackpanel? Tal vez algo así como:

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

No lo sé, pero no es bueno. En cambio, creo que queremos mantener esto simple.

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

De esa manera, cuando alguien pone algo que no es solo texto en nuestro expansor diseñado, no nos rompemos. Si quieres asegurarte de envolver la totalidad de lo que hacen con este fondo, que probablemente sea el deseado, se vería así:

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

Answer 2

Depende de lo que quieras diseñar: puedes darle estilo a cualquier parte de él. Si desea cambiar el contenido en el encabezado, simplemente coloque toda su UI en la propiedad Expander.Header, y se mostrará en el área del encabezado.

si eso no satisface tus necesidades, probablemente necesites volver a crear la plantilla del control. Eche un vistazo a las plantillas de control enviadas en WPF here

Answer 3

He combinado algunos XAML de Josh Smith y MSDN y se me ocurrió una solución. De hecho, el control (al menos el encabezado) debe ser re-reflejado.

<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>