WPF备忘---TreeView使用

TreeView的前后端编码体验

一、甩锅给后端

        1. XAML      

<TreeView x:Name="treeView1" SelectedItemChanged="treeView1_SelectedItemChanged">
    <!--定义每个TreeViewItem的样式-->
    <TreeView.ItemContainerStyle>
        <Style TargetType="TreeViewItem">
            <Setter Property="Margin" Value="5" />
            <!-- ... -->
        </Style>
    </TreeView.ItemContainerStyle>
    <!--定义TreeViewItem的数据模板-->        
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate 
            DataType="{x:Type local:Nodes}"
            ItemsSource="{Binding Children}">
            <StackPanel Orientation="Horizontal" >
                <Image Source="{Binding Icon}" />
                <TextBlock
                    Text="{Binding Name}"
                    FontSize="{Binding FontSize}"
                    Foreground="{Binding Foreground}" />
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

        2. CS

// 1. 定义树形节点数据集  
public class Nodes
    {
        public Nodes()
        {
            this.Children = new ObservableCollection<Node>();
        }

        public string Name { get; set; }
        public double FontSize { get; set; }
        public ImageSource Icon { get; set; }
        public SolidColorBrush Foreground { get; set; }
        public ObservableCollection<Node> Children { get; set; }
    }
    
public class Node
    {
        public SolidColorBrush Foreground { get; set; }
        public ImageSource Icon { get; set; }
        public double FontSize { get; set; }
        public string Name { get; set; }
    } 

// 2. 从数据库取数据，初始化树
private List<Nodes> iniTree()
        {
            List<Nodes> lstNodes = new List<Nodes>();
            // 下面是仿真数据
            Nodes items1 = new Nodes()
            {
                FontSize=14,
                Name = "Node1",
                Foreground= new SolidColorBrush(Color.FromRgb(255,0,0)),
                Icon = new BitmapImage(new Uri("pack://application:,,/images/icon1.png"))
            };
            items1.Children.Add(new Node()
            {
                FontSize = 12,
                Name = "children1",
                Foreground = new SolidColorBrush(Color.FromRgb(0, 0, 255)),
                Icon = new BitmapImage(new Uri("pack://application:,,/images/icon11.png"))
            });
            lstNodes.Add(items1);

            
            Nodes items2 = new Nodes()
            {
                FontSize=14,
                Name = "Node2",
                Foreground= new SolidColorBrush(Color.FromRgb(255,0,0)),
                Icon = new BitmapImage(new Uri("pack://application:,,/images/icon2.png"))
            };
            items2.Children.Add(new Node()
            {
                FontSize = 12,
                Name = "children2",
                Foreground = new SolidColorBrush(Color.FromRgb(0, 0, 255)),
                Icon = new BitmapImage(new Uri("pack://application:,,/images/icon21.png"))
            });
            items2.Children.Add(new Node()
            {
                FontSize = 12,
                Name = "children3",
                Foreground = new SolidColorBrush(Color.FromRgb(0, 0, 255)),
                Icon = new BitmapImage(new Uri("pack://application:,,/images/icon22.png"))
            });
            lstNodes.Add(items2);

            
            Nodes items3 = new Nodes()
            {
                FontSize=14,
                Name = "Node3",
                Foreground= new SolidColorBrush(Color.FromRgb(255,0,0)),
                Icon = new BitmapImage(new Uri("pack://application:,,/images/icon3.png"))
            };

            lstNodes.Add(items3);

            return lstNodes;
        }

        3. 调用
                

//在合适的位置绑定数据源
treeView1.ItemsSource = this.iniTree();

//处理交互
private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
    var treeView = sender as TreeView;
    var selectedItem = treeView.SelectedItem as Node;
    if (selectedItem != null)
    {
        var sname = selectedItem.Name;
        //......
    }
}

二、甩锅给前端

        1. XAML

    <!-- 1. 先定义Style -->
    <Window.Resources>
        <Style x:Key="TreeViewItemLevel1" TargetType="{x:Type TreeViewItem}">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/Test;component/Resources/icon1.png" />
                            <TextBlock Text="{Binding}" FontSize="14"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>            
        </Style>

        <Style x:Key="TreeViewItemLevel2" TargetType="{x:Type TreeViewItem}">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/Test;component/Resources/icon2.png" />
                            <TextBlock Text="{Binding}" Foreground="DarkBlue"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <!-- 2. TreeView  -->
    <TreeView x:Name="treeView1" SelectedItemChanged="treeView1_SelectedItemChanged">
        <TreeViewItem Header="Node1" Style="{StaticResource TreeViewItemLevel1}" >
            <TreeViewItem Header="children1" Style="{StaticResource TreeViewItemLevel2}" />
            <TreeViewItem Header="children2" Style="{StaticResource TreeViewItemLevel2}" />
        </TreeViewItem>
        <TreeViewItem Header="Node2" Style="{StaticResource TreeViewItemLevel1}" >
            <TreeViewItem Header="children3" Style="{StaticResource TreeViewItemLevel2}" />
        </TreeViewItem>
    </TreeView>

        2. CS

   //别烦我，我手头还有很多工作...