WPF TreeView 简单实用

本章讲述：TreeView使用，动态添加节点，数据绑定；本示例是改写了模板的；

1、首先，改写ToggleButton样式

<Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Width" Value="14"/>
    <Setter Property="Height" Value="14"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Background="Transparent">
                    <Image  x:Name="ExpandPath" Width="14" Height="14"   Source="Pack://application:,,,/ExPasswordBox;component/Images/u3976.png">
                        <Image.RenderTransform>
                            <RotateTransform Angle="0" CenterY="7" CenterX="7"/>
                        </Image.RenderTransform>
                    </Image>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="RenderTransform" TargetName="ExpandPath">
                            <Setter.Value>
                                <RotateTransform Angle="90" CenterY="7" CenterX="7"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 2、TreeViewItem样式

<Style x:Key="TreeViewItemStyle" TargetType="{x:Type TreeViewItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Padding" Value="1,0,0,0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MinWidth="20" Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/>
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="false">
                        <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="HasItems" Value="false">
                        <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="IsSelectionActive" Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

3、后台绑定数据定义

注意：树形节点Children要有添加路由事件，否则后台数据修改了，但是界面未及时显示更新。

private ObservableCollection<TemplateNode> m_DisTempNodeList = new ObservableCollection<TemplateNode>();
public ObservableCollection<TemplateNode> DisTempNodeList
{
    get { return m_DisTempNodeList; }
    set { m_DisTempNodeList = value; OnPropertyChanged("DisTempNodeList"); }
}

for(int i = 0;i < 5; i++)
{
    TemplateNode node = new TemplateNode();
    node.ID = i;
    node.NodeID = i.ToString();
    node.NodeText = "测试 " + i.ToString() + i.ToString();
    node.CategoryID = i.ToString() ;
    node.Children = new List<TemplateNode>();
    for (int j = 0; j < 3; j++)
    {
        TemplateNode node1 = new TemplateNode();
        node1.ID = j;
        node1.NodeID = j.ToString();
        node1.NodeText = "测试 " + j.ToString() + j.ToString();
        node1.CategoryID = j.ToString() ;
        node.Children.Add(node1);
    }
    DisTempNodeList.Add(node);
}
    
public class TemplateNode : INotifyPropertyChanged
{
    public int ID { get; set; }
    /// <summary>
    /// 树形节点
    /// </summary>
    public string NodeID { get; set; }
    public string CategoryID { get; set; }
    private string m_NodeText;
    public string NodeText
    {
        get { return m_NodeText; }
        set
        {
            m_NodeText = value;
            OnPropertyChanged("NodeText");
        }
    }
   // public List<TemplateNode> Children { get; set; }     //注意要使用“ObservableCollection”类型的，不然添加节点，界面不通知，显示不出来
    private ObservableCollection<TemplateNode> m_Children = new ObservableCollection<TemplateNode>();
    public ObservableCollection<TemplateNode> Children
    {
        get { return m_Children; }
        set { m_Children = value; OnPropertyChanged("Children"); }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName = "")
    {
        if (PropertyChanged != null)
            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

4、引用代码

<TreeView x:Name="categoryTreeView" Height="240" Width="200" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch"
          Background="Black" Margin="1" BorderThickness="0" ItemsSource="{Binding DisTempNodeList}" ItemContainerStyle="{DynamicResource TreeViewItemStyle}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <Grid Height="30">
                <TextBlock Text="{Binding NodeText}" Foreground="#ffe4e4e4" FontSize="16" VerticalAlignment="Center"/>
            </Grid>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

5、效果图