Build WPF TreeView Control with Data Binding

Today, I would like to show how to build TreeView in WPF with Data Binding, something like this:


Each level of TreeView can be TextBox, TextBlock and even Grid, it's not really matter.
Data Source its data structure (class), that has Generics Lists for all levels of TreeView, of course we fill it before:
public class WorkCatalog
    {
        VehicleModelList _Models = new VehicleModelList();
        WorkClassificationList _Classifications = new WorkClassificationList();
        WorkChapterList _Chapters = new WorkChapterList();
        WorkElementList _Elements = new WorkElementList();    
 
        public VehicleModelList Models
        {
            get { return _Models; }
            set { _Models = value; }
        }
        public WorkClassificationList Classifications
        {
            get { return _Classifications; }
            set { _Classifications = value; }
        }
        public WorkChapterList Chapters
        {
            get { return _Chapters; }
            set { _Chapters = value; }
        }
        public WorkElementList Elements
        {
            get { return _Elements; }
            set { _Elements = value; }
        }
Usual start of WPF partial file: I only added Toolkit of Microsoft in order to use DataGrid:
<UserControl x:Class="GarageManager.Time_Catalog.TimeCatalogUI"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:ToolKit="http://schemas.microsoft.com/wpf/2008/toolkit"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    //Resources for Styles
    <UserControl.Resources>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="Foreground" Value="Blue"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
   //Resources for Data Template, level that don't have hierarchical levels
        <DataTemplate x:Key="elementTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding ld_name}" Grid.Column="0" Grid.Row="0" />
 
            </Grid>
        </DataTemplate>
 //Resources for Data Template, level that have hierarchical levels
//If you need more levels - just add one more HierarchicalDataTemplate
        <HierarchicalDataTemplate x:Key="chapterTemplate"
            ItemsSource="{Binding Path=Elements.List}" //Data Binding to Source                  
                ItemTemplate="{StaticResource elementTemplate}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding ld_name}" Grid.Column="0" Grid.Row="0" />
 
            </Grid>
        </HierarchicalDataTemplate>
        
        <HierarchicalDataTemplate x:Key="ClassificationTemplate"
                ItemsSource="{Binding Path=Chapters.List}" //Data Binding to Source          
                ItemTemplate="{StaticResource chapterTemplate}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
//Here you can put all data you can see on this level of TreeView: Text, Grid anything else:
                <TextBlock Text="{Binding ld_name}" Grid.Column="0" Grid.Row="0" />
                <TextBlock Text="{Binding ld_code}" Grid.Column="1" Grid.Row="0"/>             
            </Grid>
        </HierarchicalDataTemplate>
    </UserControl.Resources>
    
    <StackPanel Name="Global" FlowDirection="RightToLeft">
        <TreeView Margin="10,10,0,13" Name="TreeView1"
                  HorizontalAlignment="Left"
            ItemsSource="{Binding List}"
            VerticalAlignment="Top" Height="400"          
            ItemTemplate="{StaticResource ClassificationTemplate}">            
        </TreeView>                
    </StackPanel>    
</UserControl>

ListBox Control - Create Custom Layouts (Vertical and Horizontal)

There are no anymore multicolumn property in WPF ListBox, like in WinForm.

There are couple of more flexible options. Following please find how to add custom layouts to ListBox:

You have couple of options:

1.       DockPanel

2.       StackPanle

3.       WrapPanel

And supposed you have:

ListBox myListBox = new ListBox();

FrameworkElementFactory factory = new FrameworkElementFactory(typeof(WrapPanel));

factory.SetValue(WrapPanel.HorizontalAlignmentProperty, HorizontalAlignment.Left); //not necessary
myListBox.ItemsPanel = new ItemsPanelTemplate(factory);

and change it back to default ListBox layout that you see regulary:

FrameworkElementFactory factory = new FrameworkElementFactory(typeof(StackPanel));

factory.SetValue(StackPanel.OrientationProperty, Orientation.Vertical);

myListBox.ItemsPanel = new ItemsPanelTemplate(factory);

May be more difficult, but more flexible, isn't it? J

WPF - DRAG&DROP objects in ListBox

I would like to show example of how to drug and drop objects between different ListBox.

All starting with Mouse PreviewMouseLeftButtonDown Event and finished (more important) with GarageEntryListBox_Drop (see below).

private void GarageEntryListBox_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {           
            ListBox parent = (ListBox)sender;
            Point point  = e.GetPosition(parent) ;
            UIElement element = parent.InputHitTest(point) as UIElement;            
            UIElement panel = GetParent<GarageEntryPanel>(element, parent);
            object data = GetDataFromListBox(parent, panel);           
            if (data != null)
            {
                DragDrop.DoDragDrop(parent, data, DragDropEffects.Move);
            }
        }
 
        private object GetDataFromListBox(ListBox source, UIElement element)
        {
            UIElement result = GetParent<GarageEntryPanel>(element, source);
            return result;
        }
 
        public UIElement GetParent<TSource>(UIElement element, UIElement stopOn)
        {
 
            while (element != null && !(element is TSource) && (element != stopOn))
            {
                element = VisualTreeHelper.GetParent(element) as UIElement;               
            }
            if (element == stopOn)
                return null;
            else
                return element;
            
        }
 
        private void GarageEntryListBox_Drop(object sender, DragEventArgs e)
        {
            ListBox currentListBox = (ListBox)sender;
            GarageEntryPanel data = e.Data.GetData(typeof(GarageEntryPanel)) 

                                                           as GarageEntryPanel;
            if(data == null) 
                return;
            ListBox sourceList = GetParent<ListBox>(data, null) as ListBox;
            if (sourceList == currentListBox)
                return;
            ld_garageentry entry = data.DataContext as ld_garageentry;           
            ((IList)sourceList.ItemsSource).Remove(entry);
            ((IList)currentListBox.ItemsSource).Add(entry);                            
        }

WPF Binding - Find binding dependency property for all child elements

Following you can find example how we can find binding depandancy propertyfor all child elements. I usually use it when I use explicit binding mode and when I need to commit elements data changies, I go elements one by oneand perform UpdateSource(). Here is the code taht can perform UpdateSource for all child elements of parent element (for example: DataGrid ):

 public static void UpdateItemSource(FrameworkElement item)
 {
     FieldInfo[] infos = item.GetType().GetFields(BindingFlags.Public | 

                                        BindingFlags.FlattenHieratchy |

                                        BindingFlags.InstacFlags.Static);
     foreach (FieldInfo field in infos)
     {
         if (field.FieldType == typeof(DependencyProperty))
         {
           DependencyProperty dp = (DependencyProperty)field.GetValue(null);

           BindingExpression ex = item.GetBindingExpression(dp);
           if (ex != null)
           {                        
              if(ex.ParentBinding.UpdateSourceTrigger ==  Update SourceTrigg                                                              er.Explicit)

                        ex.UpdateSource();
                    }
                }
            }
          
            int count = VisualTreeHelper.GetChildrenCount( item);
            for (int i = 0; i < count; i++)
            {
                FrameworkElement child = VisualTreeHelper.GetChild(item, i)                                                 as FrameworkElement;

                if(child != null)
                    UpdateItemSource(child);
            }
        }