Discussion :

[mso54]

Bonjour tout le monde,

Je me permets de venir vous déranger car j'ai un problème dont je n'arrive pas à trouver la solution.
J'ai récupéré un sample me permettant de faire un treeview multicolonne.
Le problème est que j'aimerais binder une ObservableCollection mais que je n'y arrive pas :/
Je suis un débutant et je galère vraiment....

Donc en gros j'ai un fichier de ressources Generic.xaml avec :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1">
 
    <!--Converter for Indentation of items-->
    <local:TreeListViewConverter x:Key="TreeListViewConverter"/>
 
    <!--Control Template for TreeViewItem's.-->
    <ControlTemplate TargetType="TreeViewItem" x:Key="TreeListViewItem">
        <!--Grid containing the current information and the subnodes.-->
        <StackPanel>
            <!--Border wrapping the content presenter.-->
            <Border x:Name="Border">
                <!--GridViewRowPrsenter containing the current information.-->
                <GridViewRowPresenter Content="{TemplateBinding Header}"
                    Columns="{Binding Columns, 
                    RelativeSource={RelativeSource Mode=FindAncestor, 
                    AncestorType=local:TreeListView}}"/>
            </Border>
            <!--ItemsPresenter containing the subnodes-->
            <ItemsPresenter x:Name="ItemsPresenter" Visibility="Collapsed"/>
        </StackPanel>
        <ControlTemplate.Triggers>
            <!--Trigger used to show the sub items-->
            <Trigger Property="IsExpanded" Value="True">
                <Setter TargetName="ItemsPresenter" Property="Visibility" Value="Visible"/>
            </Trigger>
            <!--Trigger used to change the color based on selection-->
            <Trigger Property="IsSelected" Value="true">
                <!--Change the background color-->
                <Setter TargetName="Border" Property="Background"
                    Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                <!--Change the foreground color-->
                <Setter Property="Foreground" 
                    Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
            </Trigger>
            <!--Trigger used to change the color based on selection-->
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsSelected" Value="true"/>
                    <Condition Property="IsSelectionActive" Value="false"/>
                </MultiTrigger.Conditions>
                <!--Change the background color-->
                <Setter TargetName="Border" Property="Background"
                    Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                <!--Change the foreground color-->
                <Setter Property="Foreground" 
                    Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            </MultiTrigger>
            <!--Trigger used to change the color based on the status of the item-->
            <Trigger Property="IsEnabled" Value="false">
                <!--Change the foreground color-->
                <Setter Property="Foreground" 
                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
 
    <!--Control Template for TreeListViewExpander's.-->
    <ControlTemplate TargetType="{x:Type local:TreeListViewExpander}" x:Key="TreeListViewExpander">
        <StackPanel Orientation="Horizontal" x:Name="ContainerElement">
            <!--Use a FrameworkElement to indent the button-->
            <FrameworkElement Width="{Binding RelativeSource={x:Static RelativeSource.Self}, 
                Converter={StaticResource TreeListViewConverter}}"/>
            <!--Use a standard toggle button-->
            <ToggleButton IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=TreeViewItem}}" Width="9" Height="9" VerticalAlignment="Center" Margin="1"/>
        </StackPanel>
        <ControlTemplate.Triggers>
            <!--Trigger used to show/hide the expand button-->
            <DataTrigger Binding="{Binding HasItems, RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=TreeViewItem}}" Value="False">
                <Setter TargetName="ContainerElement" Property="Visibility" Value="Hidden"/>
            </DataTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
 
    <!--Apply this style to all controls of type 'TreeListView'.-->
    <Style TargetType="{x:Type local:TreeListView}">
        <!--Set the control template.-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:TreeListView}">
                    <ControlTemplate.Resources>
                        <!--Apply this style to all 'TreeViewItem's.-->
                        <Style TargetType="TreeViewItem">
                            <Setter Property="Template" Value="{StaticResource TreeListViewItem}"/>
                        </Style>
                        <!--Apply this style to all 'TreeListViewExpander's.-->
                        <Style TargetType="local:TreeListViewExpander">
                            <Setter Property="Template" Value="{StaticResource TreeListViewExpander}"/>
                        </Style>
                    </ControlTemplate.Resources>
                    <!--Create a standard border around the 'TreeListView'.-->
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <!--ScrollViewer providing horizontal scrolling functionality 
                        for both, content and headers.-->
                        <ScrollViewer HorizontalScrollBarVisibility="Auto"
                                      VerticalScrollBarVisibility="Disabled">
                            <!--Grid containing the header row and all the content rows.-->
                            <Grid>
                                <Grid.RowDefinitions>
                                    <!--The header row.-->
                                    <RowDefinition Height="Auto"/>
                                    <!--The content row.-->
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <!--The header row.-->
                                <GridViewHeaderRowPresenter Columns="{TemplateBinding Columns}"
                                    AllowsColumnReorder="{TemplateBinding AllowsColumnReorder}"/>
                                <!--ScrollViewer providing vertical scrolling
                                functionality for the content.-->
                                <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                                              VerticalScrollBarVisibility="Auto"
                                              Grid.Row="1">
                                    <!--ItemsPresenter containg the content.-->
                                    <ItemsPresenter/>
                                </ScrollViewer>
                            </Grid>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Une Classe TreeListView.cs avec :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;
 
namespace WpfApplication1
{
    /// <summary>
    /// Represents a control that displays hierarchical data in a tree structure
    /// that has items that can expand and collapse.
    /// </summary>
    public class TreeListView : TreeView
    {
        static TreeListView()
        {
            //Override the default style and the default control template
            DefaultStyleKeyProperty.OverrideMetadata(typeof(TreeListView), new FrameworkPropertyMetadata(typeof(TreeListView)));
        }
 
        /// <summary>
        /// Initialize a new instance of TreeListView.
        /// </summary>
        public TreeListView()
        {
            Columns = new GridViewColumnCollection();
        }
 
        #region Properties
        /// <summary>
        /// Gets or sets the collection of System.Windows.Controls.GridViewColumn 
        /// objects that is defined for this TreeListView.
        /// </summary>
        public GridViewColumnCollection Columns
        {
            get { return (GridViewColumnCollection)GetValue(ColumnsProperty); }
            set { SetValue(ColumnsProperty, value); }
        }
 
        /// <summary>
        /// Gets or sets whether columns in a TreeListView can be
        /// reordered by a drag-and-drop operation. This is a dependency property.
        /// </summary>
        public bool AllowsColumnReorder
        {
            get { return (bool)GetValue(AllowsColumnReorderProperty); }
            set { SetValue(AllowsColumnReorderProperty, value); }
        }
        #endregion
 
        #region Static Dependency Properties
        // Using a DependencyProperty as the backing store for AllowsColumnReorder.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty AllowsColumnReorderProperty =
            DependencyProperty.Register("AllowsColumnReorder", typeof(bool), typeof(TreeListView), new UIPropertyMetadata(null));
 
        // Using a DependencyProperty as the backing store for Columns.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ColumnsProperty =
            DependencyProperty.Register("Columns", typeof(GridViewColumnCollection),
            typeof(TreeListView),
            new UIPropertyMetadata(null));
        #endregion
    }
 
    /// <summary>
    /// Represents a control that can switch states in order to expand a node of a TreeListView.
    /// </summary>
    public class TreeListViewExpander : ToggleButton { }
 
    /// <summary>
    /// Represents a convert that can calculate the indentation of any element in a class derived from TreeView.
    /// </summary>
    public class TreeListViewConverter : IValueConverter
    {
        public const double Indentation = 10;
 
        #region IValueConverter Members
 
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            //If the value is null, don't return anything
            if (value == null) return null;
            //Convert the item to a double
            if (targetType == typeof(double) && typeof(DependencyObject).IsAssignableFrom(value.GetType()))
            {
                //Cast the item as a DependencyObject
                DependencyObject Element = value as DependencyObject;
                //Create a level counter with value set to -1
                int Level = -1;
                //Move up the visual tree and count the number of TreeViewItem's.
                for (; Element != null; Element = VisualTreeHelper.GetParent(Element))
                    //Check whether the current elemeent is a TreeViewItem
                    if (typeof(TreeViewItem).IsAssignableFrom(Element.GetType()))
                        //Increase the level counter
                        Level++;
                //Return the indentation as a double
                return Indentation * Level;
            }
            //Type conversion is not supported
            throw new NotSupportedException(
                string.Format("Cannot convert from <{0}> to <{1}> using <TreeListViewConverter>.",
                value.GetType(), targetType));
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotSupportedException("This method is not supported.");
        }
 
        #endregion
    }
 
}

et enfin ma fenêtre TestTree.xaml ou je n'arrive pas à binder ma collection.... :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<Window x:Class="WpfApplication1.TestTree"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="TestTree" Height="402" Width="878">
    <local:TreeListView AllowsColumnReorder="True">
        <!--Create an item template to specify the ItemsSource-->
        <local:TreeListView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Children}" />
        </local:TreeListView.ItemTemplate>
        <local:TreeListView.Columns>
            <!--Create the first column containing the expand button and the type name.-->
            <GridViewColumn Header="Name" Width="400">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <!--The Expander Button (can be used in any column (typically the first one))-->
                            <local:TreeListViewExpander/>
                            <!--Display the name of the DataElement-->
                            <TextBlock Text="{Binding}"/>
                        </StackPanel>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <!--Create a second column containing the number of children.-->
            <GridViewColumn Header="Children" Width="100">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <!--Display the size of the DataElement-->
                        <TextBlock Text="{Binding Children.Count}" HorizontalAlignment="Right"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <!--Create a third column containing the brush of the material.-->
            <GridViewColumn Header="Brush" Width="100">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <!--Border showing the actual color-->
                            <Border Background="{Binding Brush}" CornerRadius="2"
                                    Width="16" Height="16"
                                    BorderThickness="1" BorderBrush="DarkGray"/>
                            <!--Display the brush-->
                            <TextBlock Text="{Binding Brush}"/>
                        </StackPanel>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </local:TreeListView.Columns>
        <!--Create some sample data-->
        <MaterialGroup>
            <MaterialGroup>
                <DiffuseMaterial Brush="Blue"/>
                <DiffuseMaterial Brush="Red"/>
                <SpecularMaterial Brush="Orange"/>
            </MaterialGroup>
            <EmissiveMaterial Brush="AliceBlue"/>
        </MaterialGroup>
    </local:TreeListView>
</Window>

Je suis vraiment désolé pour le gros "paté" mais je craque la