Discussion :

[shenron666]

Bonjour,

Je cherche comment pouvoir modifier le Background de mon TreeViewItem depuis le HierarchicalDataTemplate

Voici un extrait du template pour le TreeViewItem avec en gras le Border qui référence le Background

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
37
38
39
40
41
42
43
<ControlTemplate TargetType="TreeViewItem">
    <Grid>
        <!--The leftmost column contains the item's content.-->
        <!--The rightmost column contains the item's children.-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- This Border and ContentPresenter displays the content of the TreeViewItem. -->
        <Border Name="Bd" BorderThickness="0.6" Padding="2" CornerRadius="4"
                                Background="{TemplateBinding Background}" BorderBrush="{StaticResource ItemBorderBrush}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="19"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ToggleButton Grid.Column="0" x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}"
                                              Background="{x:Null}" BorderBrush="Transparent" ClickMode="Press"
                                              IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
                <ContentPresenter Grid.Column="1" Name="PART_Header" ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Grid>
        </Border>

        <!-- The ItemsPresenter displays the item's children. -->
        <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" />
    </Grid>

    <ControlTemplate.Triggers>
        <!--When the item is selected in the TreeView, use the "selected" colors and give it a drop shadow. -->
        <Trigger Property="IsSelected" Value="True">
            <Setter TargetName="Bd" Property="Background" Value="{StaticResource SelectedItemAreaBrush}"/>
            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource SelectedItemBorderBrush}"/>
            <Setter TargetName="Bd" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
        </Trigger>
        <Trigger Property="IsExpanded" Value="false">
            <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="HasItems" Value="False">
            <Setter TargetName="Expander" Property="Visibility" Value="Collapsed"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Pour le datatemplate je fait comme suit :

Code xml :

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

1
2
3
<HierarchicalDataTemplate DataType="{x:Type data:Customer}" ItemsSource="{Binding Children}" >
    <TextBlock Text="{Binding Name}" Background="Gray" />
</HierarchicalDataTemplate>

Si quelqu'un a une idée pour me débloquer

[binoo]

Salut,

Je ferais ça du coté du style du TreeViewItem avec un DataTrigger.

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
37
38
39
40
41
42
43
44
45
46
47
48
<ControlTemplate TargetType="TreeViewItem">
    <Grid>
        <!--The leftmost column contains the item's content.-->
        <!--The rightmost column contains the item's children.-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
 
        <!-- This Border and ContentPresenter displays the content of the TreeViewItem. -->
        <Border Name="Bd" BorderThickness="0.6" Padding="2" CornerRadius="4"
                                Background="{TemplateBinding Background}" BorderBrush="{StaticResource ItemBorderBrush}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="19"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ToggleButton Grid.Column="0" x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}"
                                              Background="{x:Null}" BorderBrush="Transparent" ClickMode="Press"
                                              IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
                <ContentPresenter Grid.Column="1" Name="PART_Header" ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Grid>
        </Border>
 
        <!-- The ItemsPresenter displays the item's children. -->
        <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" />
    </Grid>
 
    <ControlTemplate.Triggers>
        <!--When the item is selected in the TreeView, use the "selected" colors and give it a drop shadow. -->
        <Trigger Property="IsSelected" Value="True">
            <Setter TargetName="Bd" Property="Background" Value="{StaticResource SelectedItemAreaBrush}"/>
            <Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource SelectedItemBorderBrush}"/>
            <Setter TargetName="Bd" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
        </Trigger>
        <Trigger Property="IsExpanded" Value="false">
            <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="HasItems" Value="False">
            <Setter TargetName="Expander" Property="Visibility" Value="Collapsed"/>
 
  <DataTrigger Binding="{Binding Path=ObjType}" Value="Customer">
   <Setter Property="Background" TargetName="Bd" Value="Gray" />
  </DataTrigger>
 
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Le code à retenir est donc :

Code xml :

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

1
2
3
  <DataTrigger Binding="{Binding Path=ObjType}" Value="Customer">
   <Setter Property="Background" TargetName="Bd" Value="Gray" />
  </DataTrigger>

Il implique que du coté de ton objet Customer, tu ais ajouté une propriété "ObjType" de type string correspondant au type de l'objet (getType().toString()).

nb: Si tu connais le pattern MVVM, cette propriété serait dans ton objet ViewModel.

[shenron666]

Salut binoo,

merci pour ta réponse, malheureusement elle casse la généricité du treeviewitem template
le soucis supplémentaire c'est que j'ai 2 hiérarchies d'objets à binder à cet arbre dans 2 vues (oui je suis en mvvm)
en gros, ces 2 hiérarchies ont une classe de base, et j'ai 7 classes qui en dérivent
je trouve pas ça propre d'avoir à faire des datatrigger directement dans le template

je vais tester ta proposition et voir si ça fonctionne, auquel cas ça me donnera une piste pour une solution qui me plaira plus
mais tu as une autre idée qui te viens, penses à moi

edit : ta méthode fonctionne, encore merci de m'avoir débloqué
si je trouve une solution pour le faire dans la déclaration du treeview plutot que dans le template je le mettrait ici