Comment styliser un en-tête D'extension WPF?

je voudrais appliquer un style sur un en-tête D'extension WPF. Dans le XAML suivant j'ai un expandeur mais le style est pour tout cela pas seulement pour 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>
47
demandé sur Dave Clemmer 2009-03-19 12:09:54

3 réponses

j'ai combiné quelques XAML de Josh Smith et MSDN et trouvé une solution. En effet, le contrôle (au moins l'en-tête) doit être repensé.

<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>
52
répondu Vasile Tomoiaga 2009-03-19 12:56:10

je pense que la réponse de Vasile est sur la bonne voie, mais il semble qu'il fait beaucoup plus que l'affiche originale nécessaire. Toute la question initiale a été demandé à faire était de changer l'arrière-plan de l'en-tête. Bien que le changement présenté fasse cela, il fait aussi d'autres choses.

une de ces autres choses est de remplacer l'implémentation par défaut, je crois Qu'un ContentPresenter, par un Textlock. Que se passe-t-il lorsque plus tard nous ajoutons un second expandeur à 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 cela 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 seulement un texte dans notre expandeur stylé, nous ne cassons pas. Si vous voulez vous assurer que vous enveloppez la totalité de ce qu'ils font avec ce fond, ce qui est probablement souhaité, cela ressemblerait à:

<DataTemplate x:Key="expanderHeader">
    <Border Background={StaticResource myBrush}>
        <ContentPresenter Content={Binding}/>
    </Border>
</DataTemplate>
15
répondu PatrickV 2014-05-16 14:09:51

Cela dépend de ce que vous voulez styliser -- vous pouvez styliser n'importe quelle partie de celui-ci. Si vous voulez changer le contenu dans l'en-tête, placez juste toutes vos UI dans L'Expander.La propriété Header, et elle apparaîtra dans la zone header.

si cela ne répond pas à vos besoins, vous avez probablement besoin de re-template le contrôle. Jetez un oeil aux modèles de contrôle livrés dans WPF ici

6
répondu Dominic Hopton 2009-03-19 09:58:05