Expander et style du Header

Salut,

J'essaie, sans succès, d'appliquer un background au header d'un Expander.
- Si je mets le background directement sur l'expander, ça l'applique à l'expander entier
- Si je mets comme Header un TextBox avec le background voulu, il n'occupe pas tout l'espace du Header

Voilà le code et le screenshot qui illustrent les 2 cas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<Window x:Class="WpfCS.TestExpander2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TestExpander2" Height="300" Width="300">
    <Window.Resources>
        <LinearGradientBrush x:Key="brushExpander" StartPoint="0,0" EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="#FFF3F3F3"/>
                <GradientStop Offset="0.5" Color="#FFEBEBEB"/>
                <GradientStop Offset="0.5" Color="#FFDDDDDD"/>
                <GradientStop Offset="1" Color="#FFCDCDCD"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Expander Grid.Row="0"
                  IsExpanded="True"
                  Header="Hello world"
                  Background="{StaticResource brushExpander}">
            <Rectangle Height="100"/>
        </Expander>
 
        <Expander Grid.Row="1"
                  IsExpanded="True">
            <Expander.Header>
                <TextBlock Text="Hello world"
                           Background="{StaticResource brushExpander}"/>
            </Expander.Header>
            <Rectangle Height="100"/>
        </Expander>
    </Grid>
</Window>

http://img407.imageshack.us/img407/6120/expandertt4.png

En observant le visual tree avec Mole, j'ai vu que la structure était la suivante :

http://img171.imageshack.us/img171/9...ualtreesd0.png

Donc en gros, c'est sur le ToggleButton que je voudrais appliquer le background. Et je ne vois pas trop comment faire ça sans redéfinir entièrement le template de l'Expander :?

Une idée ?

Citation:

Envoyé par tomlev

Salut,

J'essaie, sans succès, d'appliquer un background au header d'un Expander.
- Si je mets le background directement sur l'expander, ça l'applique à l'expander entier
- Si je mets comme Header un TextBox avec le background voulu, il n'occupe pas tout l'espace du Header

Voilà le code et le screenshot qui illustrent les 2 cas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<Window x:Class="WpfCS.TestExpander2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TestExpander2" Height="300" Width="300">
    <Window.Resources>
        <LinearGradientBrush x:Key="brushExpander" StartPoint="0,0" EndPoint="0,1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0" Color="#FFF3F3F3"/>
                <GradientStop Offset="0.5" Color="#FFEBEBEB"/>
                <GradientStop Offset="0.5" Color="#FFDDDDDD"/>
                <GradientStop Offset="1" Color="#FFCDCDCD"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Expander Grid.Row="0"
                  IsExpanded="True"
                  Header="Hello world"
                  Background="{StaticResource brushExpander}">
            <Rectangle Height="100"/>
        </Expander>
 
        <Expander Grid.Row="1"
                  IsExpanded="True">
            <Expander.Header>
                <TextBlock Text="Hello world"
                           Background="{StaticResource brushExpander}"/>
            </Expander.Header>
            <Rectangle Height="100"/>
        </Expander>
    </Grid>
</Window>

http://img407.imageshack.us/img407/6120/expandertt4.png

En observant le visual tree avec Mole, j'ai vu que la structure était la suivante :

http://img171.imageshack.us/img171/9...ualtreesd0.png

Donc en gros, c'est sur le ToggleButton que je voudrais appliquer le background. Et je ne vois pas trop comment faire ça sans redéfinir entièrement le template de l'Expander :?

Une idée ?

Ben, avec VisualTreeHelper.GetChild, tu devrais pouvoir accéder à ton ToggleButton et ainsi modifier sa propriété Background: pas le mieux mais cela t'éviterais de modifier le template.

Citation:

Envoyé par Thomas Lebrun

Ben, avec VisualTreeHelper.GetChild, tu devrais pouvoir accéder à ton ToggleButton et ainsi modifier sa propriété Background: pas le mieux mais cela t'éviterais de modifier le template.

Oui, j'ai bien pensé à un truc comme ça, mais ça n'a pas l'air de marcher...
J'ai fait ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    public class MyExpander : Expander
    {
        public Brush HeaderBackground
        {
            get { return (Brush)GetValue(HeaderBackgroundProperty); }
            set { SetValue(HeaderBackgroundProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for HeaderStyle.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty HeaderBackgroundProperty =
            DependencyProperty.Register("HeaderBackground", typeof(Brush), typeof(MyExpander), new UIPropertyMetadata(null));
 
 
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            ToggleButton header = this.Template.FindName("HeaderSite", this) as ToggleButton;
            if (header != null)
            {
                Binding b = new Binding("HeaderBackground");
                b.RelativeSource = RelativeSource.TemplatedParent;
                header.SetBinding(Control.BackgroundProperty, b);
            }
        }
    }

Mais le background ne s'affiche pas... Pourtant, en vérifiant avec Mole, je vois que mon Background est bien affecté au ToggleButton, et tous les contrôles enfants ont un Background null ou transparent. Je comprends pô :koi:

Et si tu essayes de changer directement le Background, sans passer par un Binding ?

Citation:

Envoyé par Thomas Lebrun

Et si tu essayes de changer directement le Background, sans passer par un Binding ?

J'avais testé aussi, même résultat. Mais le problème n'est pas là, vu que le ma Brush est bien affectée au Background du ToggleButton... sauf qu'on ne le voit pas, et je sais pas pourquoi :?

tomlev,

J'ai fait également des tests hier soir en essayant de récupérer le ToogleButton pour changer son arrière plan mais ça n'a rien donné... :(

Je pense que le plus simple est de revoir le template pour obtenir l'effet que tu veux.

Citation:

Envoyé par Jérem22

Je pense que le plus simple est de revoir le template pour obtenir l'effet que tu veux.

Ben ouais, je crois que je vais devoir m'y résigner... mais le template existant me convient très bien, ça me gonfle de devoir le refaire juste pour cette histoire de background :?

Et avec cet exemple: http://joshsmithonwpf.wordpress.com/...pander-header/

Est-ce que ça suffirait ?

Citation:

Envoyé par Jérem22

Et avec cet exemple: http://joshsmithonwpf.wordpress.com/...pander-header/

Est-ce que ça suffirait ?

Pas mal, j'avais pas pensé... merci pour le tuyau :)

Par contre, c'est mieux mais c'est pas encore tout à fait ce que je veux... le background n'est appliqué qu'au contenu du Header, pas à tout le Header (par exemple le background derrière la "flèche" n'a pas changé...)

Je crois que je couperai pas à la redéfinition du template... :(