Voir la source de ItemsControl, ListBox, ComboBox, TreeView

= ItemsControl =
Composant qui représente une collection d'éléments. Ces éléments peuvent être hétérogène.<br/>
ListBox, ComboBox et TreeView héritent d'ItemsControl.
<kode lang="xaml">
<ItemsControl Margin="10" ItemsSource="{Binding Path=MyTodoList}">
    <!-- définit un DataTemplate pour le rendu visuel des éléments de la collection -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Ellipse Fill="Silver"/>
                <TextBlock Text="{Binding Path=Priority}"
                           HorizontalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

    <!-- L'ItemsControl n'a pas de visuel par défaut. La propriété Template peut
    être utilisée pour spécifier un ControlTemplate qui définira l'apparence de
    l'ItemsControl. -->
    <ItemsControl.Template>
        <ControlTemplate TargetType="{x:Type ItemsControl}">
            <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">
                <ScrollViewer>
                    <ItemsPresenter />
                </ScrollViewer>
            </Border>
        </ControlTemplate>
    </ItemsControl.Template>

    <!-- Par défaut, le conteneur des éléments de la collection est un
    StackPanel. Il est possible de spécifier son propre contenant via la
    propriété ItemsPanel. -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- La propriété ItemContainerStyle permet de définir un style pour les
    éléments qui contiennent les données. -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Control.Width" Value="100"/>
            <Setter Property="Control.Margin" Value="5"/>
            <!-- Par défaut à Left -->
            <Setter Property="Control.HorizontalContentAlignment"
                    Value="Stretch"/>
            <!-- Redefine the Item Control with bindings on Item -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <ToggleButton IsChecked="{TemplateBinding IsSelected}"
                                          Content="{TemplateBinding Content}"
                                          Focusable="False"
                                          IsHitTestVisible="False" />
                         </Grid>
                     </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>
</kode>

== Accès au DataContext de l'ItemsControl depuis un DataTemplate ==
<kode lang=xaml>
<ItemsControl ItemsSource="{Binding Path=Property00}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock>
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}{0} - {1}">
                        <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}"
                                 Path="DataContext.Property01" />
                        <Binding Path="Property1" />
                    </MultiBinding>
                </TextBlock.Text>
</kode>

== Grid et ItemsControl ==
<kode lang=xaml>
<!-- Permet aux grilles de partager leurs propriétés de taille -->
<ItemsControl ItemsSource="{Binding Path=MyTodoList}" Grid.IsSharedSizeScope="True">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <!-- Définit le groupe au sein duquel les propriétés de taille sont partagés -->
                    <ColumnDefinition SharedSizeGroup="GridGroup1" />
                    <ColumnDefinition SharedSizeGroup="GridGroup2"/>
                </Grid.ColumnDefinitions>
                            
                <Label Grid.Column="0">A</Label>
                <Label Grid.Column="1">B</Label>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

    <!-- header columns -->
    <ItemsControl.Template>
        <ControlTemplate TargetType="{x:Type ItemsControl}">
            <ScrollViewer>
                <StackPanel>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="GridGroup1" />
                            <ColumnDefinition SharedSizeGroup="GridGroup2" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="0"
                                   Text="Column1"
                                   Style="{StaticResource ColumnHeaderStyle}" />
                        <TextBlock Grid.Column="1"
                                   Text="Column1"
                                   Style="{StaticResource ColumnHeaderStyle}" />
                    </Grid>

                    <ItemsPresenter />
                </StackPanel>
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>

<Style TargetType="TextBlock"
       x:Key="ColumnHeaderStyle"
       BasedOn="{StaticResource TextBlock}">
    <Setter Property="Padding" Value="4,1,4,1" />
    <Setter Property="FontWeight" Value="Bold" />
</Style>
</kode>

== Template de visualisation et d'édition ==
<kode lang="xaml">
<ListBox ItemsSource="...">
    <ListBox.Resources>
        <views:ControlFactoryConverter x:Key="ControlFactoryConverter"/>
    </ListBox.Resources>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <!-- Template de visualisation -->
            <ContentControl x:Name="Valeur" Content="{Binding}">
                <ContentControl.ContentTemplate>
                    <DataTemplate>
                        <Label Content="{Binding Path=Value}" />
                    </DataTemplate>
                </ContentControl.ContentTemplate>
            </ContentControl>
                        
            <DataTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Valeur" Property="ContentTemplate"
                            Value="{Binding Path=., Converter={StaticResource ResourceKey=ControlFactoryConverter}}">
                    </Setter>
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
</kode>

==List et Binding==
Lorsque l'on bind un ItemControl sur une propriété de type List, l'affichage n'est pas à jour avec l'élément bindé malgré l'appel de la méthode OnPropertyChanged.<br/>
<u>Solutions :</u>
*Forcer le rafraichissement des éléments visuel : itemsControl.Items.Refresh()
*Recréer une nouvelle List à chaque get sur la propriété bindée (new List ou yield return)
*Utiliser une ObservableCollection

==Filtre==
=== Dans le code-behind ===
<kode lang="xaml">
<!-- TextBox qui va permettre de choisir le filtre a appliquer -->
<TextBox TextChanged="TextBox_TextChanged"/>

<!-- Liste contenant des éléments à filtrer -->
<ItemsControl Name="list" ItemsSource="{Binding Path=Items}"/>
</kode>

<kode lang="csharp">
// dès que la valeur du filtre change il faut mettre à jour le visuel de la liste.
private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    // on récupère donc la CollectionView de l'ItemControl
    var collectionView = CollectionViewSource.GetDefaultView(list.ItemsSource);
    // et on lui applique le filtre
    collectionView.Filter = item => 
    {
        var contact = item as Contact;
        var tb = sender as TextBox;
        return contact.Lastname.ToLower().StartsWith(tb.Text.ToLower());
    }
}
</kode>

=== Dans le XAML ===
<kode lang="xaml">
<MainControl xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase">

<ComboBox>
    <!-- La CollectionViewSource doit être définie dans une ressource pour avoir accès au DataContext -->
    <ComboBox.Resources>
        <CollectionViewSource x:Key="viewSource"
                              Source="{Binding Path=Items}">
            <CollectionViewSource.SortDescriptions>
                <scm:SortDescription PropertyName="Nom" /> <!-- tri sur la propriété Nom -->
            </CollectionViewSource.SortDescriptions>
        </CollectionViewSource>
    </ComboBox.Resources>

    <ComboBox.ItemsSource>
        <Binding Source="{StaticResource ResourceKey=viewSource}"/>
    </ComboBox.ItemsSource>
</ComboBox>
</kode>

== ScrollBar ==
<kode lang="xaml">
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto">
    <ItemsControl ItemsSource="..." />
</ScrollViewer>
</kode>

== [http://stackoverflow.com/questions/1151471/wpf-listbox-item-not-wordwrapping Empêcher les Items de déborder sur la droite] ==
<kode lang='xaml'>
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</kode>

== RenderTransform et ZIndex ==
Pour éviter le chevauchement avec les autres éléments, il faut définir le ZIndex de l'élément zoomé.<br/>
Le changement de ZIndex ne peut se faire que dans un fils direct de Panel.<br/>
Les éléments de l'ItemsControl sont encapsulés dans des ContentPresenter, il faut donc modifier le ZIndex du ContentPresenter et non celui de l'élément (ici la TextBox).
<kode lang="xaml">
<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock RenderTransformOrigin="0.5 0.5"
                       Text="{Binding}">
                <TextBlock.Style>
                    <Style TargetType="{x:Type TextBlock}">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="AliceBlue" />
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="2"
                                                        ScaleY="2" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

    <ItemsControl.ItemContainerStyle>
        <Style TargetType="{x:Type ContentPresenter}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Panel.ZIndex" Value="99" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>
</kode>

== ItemTemplateSelector ==
Permet de choisir des templates différent pour chaque item.

<kode lang="xaml">
<UserControl.Resources>
    <namespace:MyTemplateSelector x:Key="myTemplateSelector "/>
<UserControl.Resources>

<ItemsControl ItemTemplateSelector="{StaticResource ResourceKey=myTemplateSelector}">
    <ItemsControl.Resources>
        <DataTemplate x:Key="Item1DataTemplate">
            
        </DataTemplate>
        <DataTemplate x:Key="Item2DataTemplate">
            
        </DataTemplate>
    </ItemsControl.Resources>
</ItemsControl>
</kode>

<kode lang="csharp">
public class MyTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        FrameworkElement element = container as FrameworkElement;

        if (element != null && item != null)
        {
            // si l'item est du type Item1 on lui applique le DataTemplate Item1DataTemplate
            if (item is Item1)
            {
                return element.FindResource("Item1DataTemplate") as DataTemplate;
            }
            else if (item is Item2)
            {
                return element.FindResource("Item2DataTemplate") as DataTemplate;
            }
        }

        return null;
    }
}
</kode>

== [http://stackoverflow.com/questions/838828/how-to-get-a-listbox-itemtemplate-to-stretch-horizontally-the-full-width-of-the Items qui prennent toute la largeur] ==
<kode lang='xaml'>
<ListBox HorizontalContentAlignment="Stretch" />

<!-- autre solution -->
<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
    </Style> 
</ListBox.ItemContainerStyle> 
</kode>

= ListBox =
Possède la propriété {{boxx|SelectedItem}} par rapport à {{boxx|ItemsControl}}.

== Redéfinir les couleurs de séléction ==
<kode lang=xaml>
<ListBox ItemsSource="...">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True" >
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Foreground" Value="White" />
                </Trigger>
            </Style.Triggers>
            <Style.Resources>
                <!-- Background of selected item when focussed -->
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Black" />
                <!-- Background of selected item when not focussed -->
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="LightGreen" />

                <!-- Arrondis la sélection -->
                <Style TargetType="Border">
                    <Setter Property="CornerRadius" Value="10"/>
                </Style>
            </Style.Resources>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>
</kode>

== Redéfinir le visuel de sélection ==
Dans cet exemple, la sélection est représenté par une bordure noire de taille 3.
<kode lang=xaml>
<ListBox>
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type Type=ListBoxItem}">
            <Setter Property="ListBoxItem.FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="ListBoxItem.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border Name="Border" BorderBrush="Black"
                                SnapsToDevicePixels="true">
                            <ContentPresenter />
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter TargetName="Border"
                                        Property="BorderThickness" Value="3"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>
</kode>
* [http://stackoverflow.com/questions/38152912/change-listviewitem-background-colour-on-mouse-over Redéfinir le visuel lors de MouseOver]

== ListView vs ListBox ==
{{boxx|ListView}} est une spécialisation de {{boxx|ListBox}}
* avec une propriété {{boxx|View}}
** {{boxx|GridView}} permet un affichage en plusieurs colonnes
* default selection mode is {{boxx|Extended}} instead of {{boxx|Single}} for a {{boxx|ListBox}}
* Elle permet 4 vues differentes: {{boxx|iconview}}, {{boxx|small icon-view}}, {{boxx|list-view}}, {{boxx|details-view}}.

<kode lang='xaml'>
<UserControl.Resources>
    <Style x:Key="GroupStyle"
           TargetType="TextBlock">
        <d:Style.DataContext>
            <x:Type Type="local:ItemViewModel" />
        </d:Style.DataContext>
        <!-- ... -->
    </Style>

    <DataTemplate x:Key="ItemCellTemplate"
                  DataType="local:ItemViewModel">
        <TextBlock Text="{Binding GroupName}"
                   Style="{StaticResource GroupStyle}"
                   HorizontalAlignment="Right" />
    </DataTemplate>

    <!-- to change the Horizontal Alignment of a Column in a ListView -->
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</UserControl.Resources>

<ListView ItemsSource="{Binding Data}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name"
                            Width="150"
                            DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Group"
                            Width="150"
                            CellTemplate="{StaticResource ItemCellTemplate}"> <!-- to apply a style on the cell, redefine the CellTemplate-->
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>
</kode>

* [https://docs.microsoft.com/fr-fr/dotnet/framework/wpf/controls/how-to-change-the-horizontal-alignment-of-a-column-in-a-listview Change the Horizontal Alignment of a Column in a ListView]

== ScrollIntoView ==
Permet de forcer le défilement jusqu'à un élément de la liste. Utile quand on modifie par le code l'élément sélectionné.
<kode lang="csharp">
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listBox = (ListBox)sender;
    listBox.ScrollIntoView(listBox.SelectedItem);
}
</kode>

=== ScrollToSelectedItemBehavior ===
<filebox fn='ScrollToSelectedItemBehavior.cs'>
public sealed class ScrollToSelectedItemBehavior : Behavior<ListBox>
{
    protected override void OnAttached()
    {
        this.AssociatedObject.SelectionChanged += OnSelectionChanged;
    }

    protected override void OnDetaching()
    {
        this.AssociatedObject.SelectionChanged -= OnSelectionChanged;
    }

    private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count == 1)
        {
            if (e.AddedItems[0] is Item addedItem && sender is ListBox listBox)
            {
                listBox.ScrollIntoView(addedItem);
            }
        }
    }
}
</filebox>

<kode lang='xaml'>
<ListBox ItemsSource="{Binding Items}"
         SelectedItem="{Binding SelectedItem}">

    <b:Interaction.Behaviors>
        <behaviors:ScrollToSelectedItemBehavior />
    </b:Interaction.Behaviors>

</ListBox>
</kode>

== Auto scroll vers la fin lors de l’ajout d'un élément ==
=== CollectionChanged ===
<kode lang='csharp'>
// l'ItemsSource de myListBox doit être bindé à une ObservableCollection
var collection = myListBox.Items.SourceCollection as INotifyCollectionChanged;
collection.CollectionChanged += ListBox_CollectionChanged;

private void ListBox_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
    if (e.Action == NotifyCollectionChangedAction.Add)
    {
        var border = VisualTreeHelper.GetChild(lb, 0) as Decorator;
        var scrollViewer = border.Child as ScrollViewer;
        scrollViewer.ScrollToEnd();
</kode>

=== ScrollChanged ===
<kode lang='xaml'>
<ListBox ScrollViewer.ScrollChanged="ListBox_ScrollChanged"/>
</kode>
<kode lang='csharp'>
private void ListBox_ScrollChanged(object sender, RoutedEventArgs e)
{
    if (((ScrollChangedEventArgs)e).ExtentHeightChange > 0.0)
        ((ScrollViewer)e.OriginalSource).ScrollToEnd();
</kode>

== ItemTemplate et ListBoxItem ==
<kode lang=xaml>
<ListBox xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
        </DataTemplate>
    </ListBox.ItemTemplate>

    <!-- ItemTemplate ne s'applique pas aux ListBoxItem -->
    <ListBoxItem>Menu #1</ListBoxItem>
    <ListBoxItem>Menu #2</ListBoxItem>

    <!-- La solution: utiliser la propriété Items -->
    <ListBox.Items>
        <sys:String>Menu #1</sys:String>
        <sys:String>Menu #2</sys:String>
    </ListBox.Items>
</ListBox>
</kode>

= ComboBox et Binding =
Liaison des valeurs d'un dictionnaire, accessible par la propriété Dictionary, avec la liste des éléments de la ComboBox.<br/>
Liaison de l'item sélectionné avec la propriété Valeur du DataContext courant.
<kode lang=xaml>
<ComboBox ItemsSource="{Binding Path=Dictionary.Values}" SelectedItem="{Binding Path=Valeur}" />
</kode>

Liaison d'une liste, accessible par la propriété List, avec la liste des éléments de la ComboBox.<br/>
La propriété DisplayMemberPath permet de spécifier quelle propriété sera utilisée pour afficher les item.<br/>
La propriété SelectedValuePath permet de spécifier quelle propriété sera utilisée pour comparer la l'item sélectionné avec la liste des items de la ComboBox.
<kode lang=xaml>
<ComboBox ItemsSource="{Binding Path=List}"
          DisplayMemberPath="Nom"
          SelectedValuePath="Nom"
          SelectedValue="{Binding Path=Valeur}" />
</kode>

ComboBox avec une liste d'éléments codée en dur:
<kode lang=xaml>
<ComboBox SelectedIndex="0">
    <ComboBox.Items>
        <ComboBoxItem Content="string"/>
        <ComboBoxItem Content="double"/>
    </ComboBox.Items>
</ComboBox>

<ComboBox SelectedIndex="0" ItemsSource="12345"/>
</kode>

== [https://stackoverflow.com/questions/6145888/how-to-bind-an-enum-to-a-combobox-control-in-wpf ComboBox et Enum] ==
<kode lang='xaml'>
<Window xmlns:System="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:MyNamespace">
    <Window.Resources>
        <ObjectDataProvider x:Key="MyEnumODP" MethodName="GetValues"
                            ObjectType="{x:Type System:Enum}">
            <ObjectDataProvider.MethodParameters>
                <x:Type TypeName="local:MyEnum"/>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
    </Window.Resources>

    <ComboBox ItemsSource="{Binding Source={StaticResource MyEnumODP}}"
              SelectedItem="{Binding Path=MySelectedItem, Mode=OneWayToSource}"
              SelectedIndex="1" />
    <!-- SelectedIndex: pour la sélection du 2ème élément.
         Si SelectedItem est présent il faut le passer en Mode=OneWayToSource -->
</kode>

=TreeView=
Permet un affichage hiérarchique des données.

== TreeView statique ==
<kode lang="xaml">
<TreeView>
    <TreeViewItem Header="Groupe 1">
        <TreeViewItem Header="Element 11"/>
        <TreeViewItem Header="Element 12"/>
    </TreeViewItem>
    <TreeViewItem Header="Groupe 2">
        <TreeViewItem Header="Element 21"/>
        <TreeViewItem Header="Element 22"/>
    </TreeViewItem>
</TreeView>
</kode>

== Groupement depuis une List ==
Même exemple que précédemment, mais cette fois le TreeView est binder sur une List.
<kode lang="csharp">
public enum Groupe { Groupe1, Groupe2 }
public class Element
{
    public string Description { get; set; }
    public Groupe Groupe { get; set; }
}

// dans le DataContext
public ObservableCollection<Element> Elements { get; set; }

Elements = new ObservableCollection<Element>();
Elements.Add(new Element() { Description = "Element 11", Groupe = Groupe.Groupe1 });
Elements.Add(new Element() { Description = "Element 12", Groupe = Groupe.Groupe1 });
Elements.Add(new Element() { Description = "Element 21", Groupe = Groupe.Groupe2 });
Elements.Add(new Element() { Description = "Element 22", Groupe = Groupe.Groupe2 });
</kode>

<kode lang="xaml">
<...Resources>
    <!-- Définition d'une CollectionViewSource qui va permettre de faire des groupes à partir de la propriété Elements du DataContext -->
    <CollectionViewSource x:Key="cvs" Source="{Binding Path=Elements}">
        <CollectionViewSource.GroupDescriptions>
            <!-- Les groupes se font suivant la propriété Groupe de l'objet Element -->
            <PropertyGroupDescription PropertyName="Groupe"/>
        </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>
</...Resources>

<!-- On remplace la CollectionViewSource par défaut du TreeView par notre CVS
     qui est déjà bindée à la propriété Elements du DataContext -->
<!-- Groups est une propriété de ICollectionView et contient une liste de CollectionViewGroupInternal -->
<TreeView ItemsSource="{Binding Source={StaticResource ResourceKey=cvs}, Path=Groups}">
    <TreeView.ItemTemplate>
        <!-- Binding sur la propriété Items de CollectionViewGroupInternal elle contient la liste des éléments du groupe -->
        <HierarchicalDataTemplate ItemsSource="{Binding Path=Items}">
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <!-- Binding sur la propriété Description de Element -->
                    <TextBlock Text="{Binding Path=Description}"/>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>

            <!-- Binding sur la propriété Name de CollectionViewGroupInternal elle contient le nom du groupe -->
            <TextBlock Text="{Binding Path=Name}"/>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>
</kode>

=Performance=
[http://msdn.microsoft.com/en-us/library/aa970683.aspx Optimizing WPF Application Performance]

== Virtualisation ==
Seul les éléments à afficher sont créés.
<kode lang=xaml>
<!-- ItemsControl : utilisation d'un VirtualizingStackPanel -->
<ItemsControl ItemsSource="{Binding Path=Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

<!-- ListBox : virtualisé par défaut, on modifie son mode -->
<ListBox ItemsSource="{Binding Path=Items}" VirtualizingStackPanel.VirtualizationMode="Recycling" />
</kode>

=== Modes ===
* Standard : mode par défaut, les conteneurs des éléments sont libérés dès qu'ils ne sont plus affichés.
* Recycling : les conteneurs des éléments qui ne sont plus affichés sont réutilisés par les éléments à afficher.

==A eviter==
*les StackPanel horizontaux

==Affichage==
[http://msdn.microsoft.com/en-us/magazine/dd483292.aspx Writing More Efficient ItemsControls]<br/>
L'ItemsControl va appliquer l'ItemTemplate à chacun de ses éléments. Simplifier l'ItemTemplate permet donc d'améliorer les performances :
*Réduire le nombre de Control : utiliser un Control avec MultiBinding et StringFormat plutôt que plusieurs Control
*Freeze les freezable objects, ils seront considérés comme constants (appel de la méthode Freeze ou utilisation de l'option the PresentationOptions:Freeze)
*Réduire le nombre de Bindings : utiliser un Presenter (Vue-Modèle?), sur-couche de la classe métier mise en forme pour faciliter les Bindings. 
*Créer son propre composant du type FrameworkElement pour l'ItemTemplate.
*Créer son propre composant du type FrameworkElement pour l'ItemsControl afin que lors de la modification d'un Item on ne redessine pas tous les Items mais seulement celui qui a changé.

== Scrolling ==
<kode lang=xaml>
<!-- Ne rafraichit pas la ListBox pendant le déplacement de la ScrollBar -->
<ListBox ScrollViewer.IsDeferredScrollingEnabled="True" />
</kode>

[[Category:WPF]]