Background du template TreeViewItem depuis HierarchicalDataTemplate

Version imprimable

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:

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:

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

Salut,

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

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

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.

10/06/2010, 09h43
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