Discussion :

[Erakis]

Bonjour à tous,

J'ai débuter le WPF il y a 2-3 semaines. J'ai commencer par terminer de lire mon APress et depuis j'ai quelques petites interrogations sur la ou les bonnes façon de faire.

Prenons par exemple un Treeview qui doit afficher cette structure :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
- Organisation
     - Personne
           - Voiture
           - Voiture
   - Personne
- Organisation
     - Personne
- Organisation
     - Personne
            - Voiture

La bonne façon de faire selon moi et ce que j'ai lu, serait donc de créer, dans un resource, les HierarchicalDataTemplate nécessaires à mes différents éléments.

Code xaml :

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
 
<Window.Resources>
 
        <HierarchicalDataTemplate DataType="{x:Type local:Organisation}" ItemsSource="{Binding Path=Personnes}">
            <TextBlock Text="{Binding Path=Nom}"></TextBlock>
        </HierarchicalDataTemplate>
 
        <HierarchicalDataTemplate DataType="{x:Type local:Personne}" ItemsSource="{Binding Path=Voitures}">
            <TextBlock Text="{Binding Path=NomComplet}"></TextBlock>
        </HierarchicalDataTemplate>
 
        <HierarchicalDataTemplate DataType="{x:Type local:Voiture}">
            <Grid HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
 
                <TextBlock Grid.Row="0" Grid.Column="0" Text="Constructeur"></TextBlock>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Constructeur}"></TextBlock>
 
                <TextBlock Grid.Row="1" Grid.Column="0" Text="Modèle"></TextBlock>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Model}"></TextBlock>
 
                <TextBlock Grid.Row="2" Grid.Column="0" Text="Année"></TextBlock>
                <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Annee}"></TextBlock>
 
                <TextBlock Grid.Row="3" Grid.Column="0" Text="Prix"></TextBlock>
                <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Converter={StaticResource VoiturePrixConvertisseur}}"></TextBlock>
            </Grid>
        </HierarchicalDataTemplate>
</Window.Resources>

Comme vous avez pu le remarqué, je n'applique aucun style visuel à mes éléments. Et la raison est justement pourquoi je post un message ici.

Si je veux attribuer des changements visuels (style) à aux éléments à l'intérieur de mon HierarchicalDataTemplate, dois-je m'y prendre comme ceci ?

Code xaml :

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
 
        <Style x:Key="hierarchicalDataTemplatePersonnesStyle">
            <Setter Property="Border.Background" Value="Blue"></Setter>
            <Setter Property="Border.BorderThickness" Value="1"></Setter>
            <Setter Property="Border.CornerRadius" Value="4"></Setter>
            <Setter Property="Border.Padding" Value="2"></Setter>
            <Setter Property="StackPanel.Margin" Value="2"></Setter>
            <Setter Property="StackPanel.VerticalAlignment" Value="Center"></Setter>
            <Setter Property="TextBlock.HorizontalAlignment" Value="Left"></Setter>
            <Setter Property="TextBlock.Foreground" Value="White"></Setter>
        </Style>
 
        <HierarchicalDataTemplate DataType="{x:Type local:Organisation}" ItemsSource="{Binding Path=Personnes}">
            <Border Style="{StaticResource hierarchicalDataTemplatePersonnesStyle}">
                <StackPanel>
                    <TextBlock Text="{Binding Path=Nom}"></TextBlock>
                </StackPanel>
            </Border>
        </HierarchicalDataTemplate>

Toutefois, de cette façon, j'ai remarqué qu'autant un Border, qu'un StackPanel et un TexBlock on la propriété Background, donc selon moi, seulement la dernière ligne déclarative sera prise en compte, ais-je bien compris ? Si oui, alors c'est pas l'idéal ?

Ou, dois-je créer un style indépendant, avec des x:key différents, pour le border, un autre pour stack panel, un autre pour le TextBlock et leur attribuer leur style ? Ex :

Code xaml :

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

1
2
3
4
5
6
7
8
 
        <HierarchicalDataTemplate DataType="{x:Type local:Organisation}" ItemsSource="{Binding Path=Personnes}">
            <Border Style="{StaticResource StyleBorder}">
                <StackPanel Style="{StaticResource StylePannel}">
                    <TextBlock Style="{StaticResource StyleTextBlock}" Text="{Binding Path=Nom}"></TextBlock>
                </StackPanel>
            </Border>
        </HierarchicalDataTemplate>

Merci beaucoup pour votre aide.
J'aime beaucoup cette technologie jusqu'ici, mais j'ai hâte de la matrîser d'avantage

[yonpo]

Salut,

Si je peux me permettre, ta question est plutôt liée à l'application d'un style que liée au TreeView

Toutefois, de cette façon, j'ai remarqué qu'autant un Border, qu'un StackPanel et un TexBlock on la propriété Background, donc selon moi, seulement la dernière ligne déclarative sera prise en compte, ais-je bien compris ? Si oui, alors c'est pas l'idéal ?

Tout dépend comment sont disposés les différents éléments. Ont-ils des marges, des background (transparent ou non), des alignements différents ? En fonction de ces paramètres ces éléments seront visibles ou non.

Ou, dois-je créer un style indépendant, avec des x:key différents, pour le border, un autre pour stack panel, un autre pour le TextBlock et leur attribuer leur style ?

Personnellement, j'aurais fais comme ça pour une question de lisibilité.

EDIT:
Voici des exemples pour compléter ma réponse :

Exemple 1 : le border est inutile (au niveau visuel bien entendu)

Code xaml :

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
<Style x:Key="StyleBorder" TargetType="Border">
            <Setter Property="Background" Value="LightGreen" />
        </Style>
 
        <Style x:Key="StylePannel" TargetType="StackPanel">
            <Setter Property="Background" Value="LightCoral"/>
        </Style>
 
        <Style x:Key="StyleTextBlock" TargetType="TextBlock">
            <Setter Property="Background" Value="OrangeRed" />
        </Style>
 
 
<Border Style="{StaticResource StyleBorder}">
                    <StackPanel Style="{StaticResource StylePannel}">
                        <TextBlock Style="{StaticResource StyleTextBlock}" Text="Du texte"/>
                        <TextBlock Style="{StaticResource StyleTextBlock}" Text="Du texte"/>
                    </StackPanel>
                </Border>

Exemple 2 : chaque conteneur à son utilité

Code xaml :

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
 
<Style x:Key="StyleBorder" TargetType="Border">
            <Setter Property="Background" Value="LightGreen" />
            <Setter Property="Margin" Value="5"/>
        </Style>
 
        <Style x:Key="StylePannel" TargetType="StackPanel">
            <Setter Property="Background" Value="LightCoral"/>
            <Setter Property="Margin" Value="8"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
 
        <Style x:Key="StyleTextBlock" TargetType="TextBlock">
            <Setter Property="Background" Value="OrangeRed" />
            <Setter Property="Margin" Value="6,3,6,3"/>
        </Style>
 
<Border Style="{StaticResource StyleBorder}">
                    <StackPanel Style="{StaticResource StylePannel}">
                        <TextBlock Style="{StaticResource StyleTextBlock}" Text="Du texte"/>
                        <TextBlock Style="{StaticResource StyleTextBlock}" Text="Du texte"/>
                    </StackPanel>
                </Border>

[Erakis]

Bonjour Yonpo,

Merci beaucoup pour votre réponse. J'ai modifié un peu mon exemple....

Code xaml :

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
 
        <Style x:Key="hierarchicalDataTemplatePersonnesBorderStyle">
            <Setter Property="Border.Background" Value="Blue"></Setter>
            <Setter Property="Border.BorderThickness" Value="1"></Setter>
            <Setter Property="Border.CornerRadius" Value="4"></Setter>
            <Setter Property="Border.Padding" Value="2"></Setter>
        </Style>
 
        <Style x:Key="hierarchicalDataTemplatePersonnesStackPanelStyle">
            <Setter Property="StackPanel.Margin" Value="2"></Setter>
            <Setter Property="StackPanel.VerticalAlignment" Value="Center"></Setter>
        </Style>
 
        <Style x:Key="hierarchicalDataTemplatePersonnesTextBlockStyle">
            <Setter Property="TextBlock.HorizontalAlignment" Value="Left"></Setter>
            <Setter Property="TextBlock.Foreground" Value="White"></Setter>
        </Style>
 
        <Style x:Key="treeViewOrganisationItemContainerStyle" TargetType="{x:Type TreeViewItem}">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Border.Background" Value="Yellow"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

Dans ma fenêtre

Code xaml :

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

1
2
3
4
5
6
7
8
9
10
11
 
    </Window.Resources>
    <Grid>
 
        <TreeView x:Name="treeViewOrganisation" ItemContainerStyle="{StaticResource treeViewOrganisationItemContainerStyle}">
            <TreeView.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">Red</SolidColorBrush>
            </TreeView.Resources>
        </TreeView>
 
    </Grid>

Pardonnez mes couleurs un peu psychadélique , c'est que ça va mieux pour comprendre.

Voici mes questions :

1. Est-ce que je devrais déclarer mes HierarchicalDataTemplate dans un Treeview Resource avec un x:key ? Où, je les laisse au niveau de ma fenêtre ou application ? Avec fichiers xaml séparé biensûr
   
2. L'exemple actuel n'est peut-être pas super cohérante, mais ce sont que des test pour bien comprendre le fonctionnement des styles et du TreeView. Ceci dit, est-ce que mon code tiens la route ? Est-ce la bonne façon de faire ?
   
3. Il y a qu'une chose ici que je ne comprend pas, lorsque je sélectionne un noeud, la couleur ne vient pas Jaune pour les premier élément (Organisation). On dirait que la couleur du Border (BLEU) à priorité. Qu'est-ce que je ne comprend pas ?
   
   Merci beaucoup.

[tomlev]

Si tu as besoin d'un style différent pour chaque niveau, tu peux utiliser la propriété ItemContainerStyle du HierarchicalDataTemplate. Comme ça, les enfants de chaque niveau utiliseront le style indiqué par le template de ce niveau.

[Erakis]

Merci tomlev,

Pour mieux comprendre, oui ça m'intéresse d'attribuer un style pour chaque élément différent. Donc, est-ce j'ai bien saisie ce que vous me proposé ?

Code xaml :

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
 
        <HierarchicalDataTemplate DataType="{x:Type local:Organisation}" ItemsSource="{Binding Path=Personnes}">
            <Border Style="{StaticResource hierarchicalDataTemplatePersonnesBorderStyle}">
                <StackPanel Style="{StaticResource hierarchicalDataTemplatePersonnesStackPanelStyle}">
                    <TextBlock Style="{StaticResource hierarchicalDataTemplatePersonnesTextBlockStyle}" Text="{Binding Path=Nom}"></TextBlock>
                </StackPanel>
            </Border>
            <HierarchicalDataTemplate.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}">
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="Yellow"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </HierarchicalDataTemplate.ItemContainerStyle>
        </HierarchicalDataTemplate>

Le seule problème, c'est que lorsque je clique sur un élément, il reste encore bleu et non jaune. Est-ce normal ?

Si j'avais voulu avoir un style unique pour TOUS les éléments sélectionné de mon TreeView, j'aurais plutôt fait ?

Code xaml :

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

1
2
3
 
 <TreeView x:Name="treeViewOrganisation" ItemContainerStyle="{StaticResource treeViewOrganisationItemContainerStyle}">
        </TreeView>

[tomlev]

Pour mieux comprendre, oui ça m'intéresse d'attribuer un style pour chaque élément différent. Donc, est-ce j'ai bien saisie ce que vous me proposé ?

Oui c'est ça, sauf qu'il n'y a pas besoin de faire un DataTemplate si compliqué... la Border et le StackPanel ne servent pas à grand chose ici, on peut faire la même chose dans le style.

Le seule problème, c'est que lorsque je clique sur un élément, il reste encore bleu et non jaune. Est-ce normal ?

C'est à cause du style de la Border. Le fond du TreeViewItem passe bien en jaune, mais comme la Border occupe toute la place et a un fond bleu, on ne voit que le bleu

Si j'avais voulu avoir un style unique pour TOUS les éléments sélectionné de mon TreeView, j'aurais plutôt fait ?

Code xaml :

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

1
2
3
 
 <TreeView x:Name="treeViewOrganisation" ItemContainerStyle="{StaticResource treeViewOrganisationItemContainerStyle}">
        </TreeView>

Oui c'est ça