Discussion :

[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 XML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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



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 ?

[Thomas Lebrun]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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



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.

[tomlev]

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 C# :

Sélectionner tout - Visualiser dans une fenêtre à part

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ô

[Thomas Lebrun]

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

[tomlev]

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

[Jérem22]

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.