יום שני, 21 במרץ 2011

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>

אין תגובות:

הוסף רשומת תגובה