TreeView样式自定义

---恢复内容开始---

wpf自带的TreeView样式相对比较简单，为了设计符合自己设想中的样式，从头理了一下xmal的样式定义流程。

1、新建ResourceDictionary，便于对自定义样式资源分类、管理

2、编写样式TreeView.xmal

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:i="clr-namespace:WpfTreeView">
    <i:TreeViewLineConverter x:Key="LineConverter"/>

    <!-- Toggle Button -->
    <Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Width="15" Height="13" SnapsToDevicePixels="True">
                        <Rectangle Width="9" Height="9" Stroke="#919191" SnapsToDevicePixels="true">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,2" StartPoint="0.5,0">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="Silver" Offset="0.5"/>
                                    <GradientStop Color="LightGray" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle x:Name="ExpandPath" Width="1" Height="5" Stroke="Black" SnapsToDevicePixels="true"/>
                        <Rectangle Width="5" Height="1" Stroke="Black" SnapsToDevicePixels="true"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Visibility"  TargetName="ExpandPath" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- TreeViewItem -->
    <Style x:Key="DefaultTreeViewItem" TargetType="{x:Type TreeViewItem}">
        <Setter Property="IsExpanded" Value="{Binding IsExpanded}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="1,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="19" Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <!-- Connecting Lines -->
                        <Rectangle x:Name="HorLn" Margin="9,1,0,0" Height="1" Stroke="#DCDCDC" SnapsToDevicePixels="True"/>
                        <Rectangle x:Name="VerLn" Width="1" Stroke="#DCDCDC" Margin="0,0,1,0" Grid.RowSpan="2" SnapsToDevicePixels="true" Fill="White"/>
                        <ToggleButton Margin="-1,0,0,0" x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
                        <Border Name="Bd" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                            <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" MinWidth="20"/>
                        </Border>
                        <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
                    </Grid>
                    <ControlTemplate.Triggers>

                        <!-- This trigger changes the connecting lines if the item is the last in the list -->
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource LineConverter}}" Value="true">
                            <Setter TargetName="VerLn" Property="Height" Value="9"/>
                            <Setter TargetName="VerLn" Property="VerticalAlignment" Value="Top"/>
                        </DataTrigger>
                        <Trigger Property="IsExpanded" Value="false">
                            <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasHeader" Value="false"/>
                                <Condition Property="Width" Value="Auto"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasHeader" Value="false"/>
                                <Condition Property="Height" Value="Auto"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>
                        </MultiTrigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Bd" Property="Background" 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 TargetName="Bd" Property="Background" Value="Green"/>
                            <Setter Property="Foreground" Value="White"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--TreeView-->
    <Style x:Key="DefaultTreeView" TargetType="{x:Type TreeView}">
        <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
        <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"></Setter>
        <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
        <Setter Property="ItemContainerStyle" Value="{StaticResource DefaultTreeViewItem}"></Setter>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel IsItemsHost="True" Margin="0"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <HierarchicalDataTemplate  ItemsSource="{Binding Path=Children}">
                    <StackPanel Orientation="Horizontal">
                        <Image VerticalAlignment="Center" Source="{Binding Icon}" Width="16" Height="16" Margin="0,0,2,2"></Image>
                        <TextBlock VerticalAlignment="Center" Name="nodeName" Text="{Binding DisplayName}"></TextBlock>
                        <Image VerticalAlignment="Center" Source="{Binding EditIcon}" Margin="2,0,0,0"></Image>
                        <StackPanel.ToolTip>
                            <TextBlock VerticalAlignment="Center" Text="{Binding TipContents}" TextWrapping="Wrap" MaxWidth="200" ></TextBlock>
                        </StackPanel.ToolTip>
                    </StackPanel>
                </HierarchicalDataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

3、编写转换器，其中PropertyNodeItem为节点类，TreeViewLineConverter为折叠线条转换器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Controls;
using System.Windows.Data;

namespace WpfTreeView
{
    /// <summary>
    /// 节点类
    /// </summary>
    internal class PropertyNodeItem
    {
        /// <summary>
        /// 图标
        /// </summary>
        public string Icon { get; set; }
        /// <summary>
        /// 编辑图标
        /// </summary>
        public string EditIcon { get; set; }
        /// <summary>
        /// 名称
        /// </summary>
        public string DisplayName { get; set; }
        /// <summary>
        /// 展示内容
        /// </summary>
        public string TipContents { get; set; }
        /// <summary>
        /// id
        /// </summary>
        public int id { get; set; }
        /// <summary>
        /// 父id
        /// </summary>
        public int parentId { get; set; }
        /// <summary>
        /// 是否展开
        /// </summary>
        public bool IsExpanded { get; set; }
        /// <summary>
        /// 子节点
        /// </summary>
        public List<PropertyNodeItem> Children { get; set; }
        /// <summary>
        /// 构造函数
        /// </summary>
        public PropertyNodeItem()
        {
            Children = new List<PropertyNodeItem>();
        }
    }
    class TreeViewLineConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            TreeViewItem item = (TreeViewItem)value;
            ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(item);
            return ic.ItemContainerGenerator.IndexFromContainer(item) == ic.Items.Count - 1;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return false;
        }
    }
}

4、在app.xmal中添加对TreeView.xmal的引用

<Application x:Class="WpfTreeView.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="TreeView.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

5、在MainWindow.xmal中添加TreeView

<Window x:Class="WpfTreeView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="clr-namespace:WpfTreeView"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
    </Window.Resources>
    <Grid>
        <TreeView x:Name="tvProperties" SelectedItemChanged="tvProperties_SelectedItemChanged" Style="{StaticResource DefaultTreeView}">           
        </TreeView>
    </Grid>
</Window>

6、在MainWindow.xmal.cs中添加节点

扫描二维码关注公众号，回复： 5608256 查看本文章

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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;

namespace WpfTreeView
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            ShowTreeView();
        }
        private void ShowTreeView()
        {
            List<PropertyNodeItem> list = new List<PropertyNodeItem>();
            PropertyNodeItem node1 = new PropertyNodeItem()
            {
                DisplayName = "测试1",
                Icon = @"\Images\do.png",
                id = 1,
                parentId = 0,
                TipContents = "测试内容，节点1 ",
            };
            PropertyNodeItem node11 = new PropertyNodeItem()
            {
                DisplayName = "测试1子节点1",
                Icon = @"\Images\do.png",
                id = 11,
                parentId = 1,
                TipContents = "测试内容，子节点1 ",
            };
            node1.Children.Add(node11);
            PropertyNodeItem node12 = new PropertyNodeItem()
            {
                DisplayName = "测试1子节点2",
                Icon = @"\Images\do.png",
                id = 12,
                parentId = 1,
                TipContents = "测试内容，子节点2 ",
            };
            node1.Children.Add(node12);
            list.Add(node1);
            PropertyNodeItem node2 = new PropertyNodeItem()
            {
                DisplayName = "测试2",
                Icon = @"\Images\do.png",
                id = 2,
                parentId = 0,
                TipContents = "测试内容，节点2 ",
            };
            list.Add(node2);
            tvProperties.ItemsSource = list;
        }
        //选中节点事件
        private void tvProperties_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            PropertyNodeItem item = this.tvProperties.SelectedItem as PropertyNodeItem;
            string nodeText = item.DisplayName;

            //  MessageBox.Show(nodeText);

        }
    }
}

7、效果

8、总结

　　在此样例中，做了简单的效果，对于事件的处理及其它效果需要理解后，根据自己需求添加。