Comment coiffer un en-tête WPF Expander?

Question

Je voudrais appliquer un style sur un en-tête WPF Expander. Dans le XAML suivant, j'ai un Expander, mais le style ne s'applique pas uniquement à l'en-tête.

Merci.

 <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

J'ai combiné du XAML de Josh Smith et de MSDN pour proposer une solution. En effet, le contrôle (au moins l'en-tête) doit être repris.

 <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

Je pense que Vasile réponse est sur la bonne voie, mais il semble que c'est beaucoup plus que l'original de l'affiche de besoin. Toute la question initiale a été demandé à faire était de changer l'arrière-plan de l'en-tête. Alors que le changement présenté ne le faire, il le fait aussi d'autres choses.

L'un de ces autres choses, c'est de remplacer la valeur par défaut de mise en œuvre, je crois qu'un ContentPresenter, avec un TextBlock. Donc ce qui arrive quand plus tard, nous avons ajouter un deuxième expander pour ce stackpanel? Peut-être quelque chose comme:

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

Je ne sais pas, mais il n'est pas bon. Au lieu de cela, je pense que nous voulons garder cette simple.

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

<Style TargetType="Expander">
    <Setter Property="HeaderTemplate" Value="{StaticResource expanderHeader}"/>
</Style>

De cette façon, quand quelqu'un met quelque chose qui n'est pas juste le texte dans notre style expander, nous n'avons pas de le casser. Si vous voulez vous assurer que vous envelopper la totalité de ce qu'ils font avec cette toile de fond, ce qui est probablement désiré, qui pourrait ressembler à:

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

Answer 3

Dépend de ce que vous voulez styler - vous pouvez styler n'importe quelle partie de celle-ci. Si vous souhaitez modifier le contenu de l'en-tête, placez simplement votre interface utilisateur dans la propriété Expander.Header, qui s'affichera dans la zone d'en-tête.

si cela ne répond pas à vos besoins, vous devrez probablement remodeler le contrôle. Jetez un coup d'œil aux modèles de contrôle livrés dans WPF ici