五、WPF TreeView树样式改动

效果图,改了图标

样式树

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:svgc="http://sharpvectors.codeplex.com/svgc/"
                    xmlns:local="clr-namespace:TLSC.Win.Zhifa.Style"
                 
                    >
    
    <HierarchicalDataTemplate x:Key="treeTemplate" 
                                  ItemsSource="{Binding ProjectList}">

        <DockPanel x:Name="treeItemDP">
            <Image x:Name="tiIcon" Source="{Binding Img}" DockPanel.Dock="Left" Width="0" Height="0" Visibility="Hidden"></Image>
            <TextBlock x:Name="tiTBName" DockPanel.Dock="Right" Text="{Binding Name}" Margin="2 0 0 0" Foreground="White" Background="Transparent"/>
        </DockPanel>
        
        <HierarchicalDataTemplate.Triggers>
            <DataTrigger Binding="{Binding TType}" Value="3">
                <Setter TargetName="tiIcon" Property="Visibility" Value="Visible"></Setter>
                <Setter TargetName="tiIcon" Property="Width" Value="12"></Setter>
                <Setter TargetName="tiIcon" Property="Height" Value="12"></Setter>
            </DataTrigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="Focusable" Value="True"/>
                </MultiTrigger.Conditions>
                <Setter TargetName="tiTBName" Property="Background" Value="Transparent"/>
                <Setter TargetName="treeItemDP" Property="Background" Value="Transparent"/>
            </MultiTrigger>

        </HierarchicalDataTemplate.Triggers>
    </HierarchicalDataTemplate>

    <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Width" Value="16"/>
        <Setter Property="Height" Value="16"/>
        
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Background="Transparent" Height="14" Width="14">
                        <Image x:Name="PART_Image" Source="{Binding TGImageSource}"/>
                    </Border>
                    
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="TreeViewItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="customTreeItemStyle" TargetType="{x:Type TreeViewItem}">
        <Setter Property="IsExpanded" Value="True"/> 
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Margin" Value="8"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontFamily" Value="Microsoft YaHei"/>
        <Setter Property="BorderBrush" Value="AliceBlue"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
      
        <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>
                        <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="#259FFF"/>
                            <Setter Property="Foreground" Value="White"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" TargetName="Bd" Value="Transparent"/>
                            <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.Triggers>
            <Trigger Property="VirtualizingStackPanel.IsVirtualizing" Value="true">
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style TargetType="TreeView" x:Key="UTreeStyle">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="FontFamily" Value="Microsoft YaHei"/>
        <Setter Property="BorderBrush" Value="AliceBlue"/>
        <Setter Property="ItemContainerStyle" Value="{DynamicResource UTreeViewItemStyle}"></Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel IsItemsHost="True" IsVirtualizing="True" VirtualizationMode="Recycling" Margin="0"/>

                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#259FFF"/>
            <!--<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White"/>-->
            <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent"/>
            <!--<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="White"/>-->
        </Style.Resources>
        <!--<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeView}">
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True"  >
                            <Setter Property="Background" Value="Transparent"></Setter>
                        </Trigger>
                      
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>-->
    </Style>
    <Style TargetType="TreeViewItem" x:Key="UTreeViewItemStyle">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Margin" Value="8"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontFamily" Value="Microsoft YaHei"/>
        <Setter Property="BorderBrush" Value="AliceBlue"/>

        <!--<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
         
                    <DockPanel x:Name="treeItemDP">
                        -->
        <!--展开收缩按钮-->
        <!-- 
                        <ToggleButton DockPanel.Dock="Left" x:Name="ExpanderBtn" 
                                              IsChecked="{Binding Path=IsExpanded, RelativeSource={x:Static RelativeSource.TemplatedParent}, Mode=TwoWay}"
                                              ClickMode="Press" >
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <Border>
                                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                    </Border>
                                </ControlTemplate>
                            </ToggleButton.Template>
                            <ToggleButton.Content>
                                <TextBlock x:Name="ExpanderIcon"  Foreground="{TemplateBinding Foreground}" Text="&#xe62c;" />
                            </ToggleButton.Content>
                        </ToggleButton>
                        <Image x:Name="tiIcon" Source="{Binding Img}" DockPanel.Dock="Left" Width="12" Height="12"></Image>
                        <TextBlock x:Name="tiTBName" DockPanel.Dock="Right" Text="{Binding Name}" Margin="2 0 0 0" Foreground="White" Background="Transparent"/>
                    </DockPanel>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="FontWeight" Value="Bold" />
                        </Trigger>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter Property="BorderBrush" Value="AliceBlue" />
                            
                        </Trigger>
                        <Trigger Property="Focusable" Value="True">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="FontWeight" Value="Bold" />
                        </Trigger>
                         
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>-->
    </Style>

</ResourceDictionary>

在窗口引用

                    <TreeView Name="trRegion" Margin="0 20 18 0"  ItemTemplate="{StaticResource treeTemplate}" Style="{DynamicResource UTreeStyle}"  ItemsSource="{Binding RegionList}"  
                           ItemContainerStyle="{StaticResource customTreeItemStyle}"  AllowDrop="True">
                    </TreeView>

TreeModel

   public class TreeModel : INotifyPropertyChanged
    {

        public string Name { get; set; }

        public string ID { get; set; }

        public string Img { get; set; }
        /// <summary>
        /// 类型 1区域 2项目 3摄像头
        /// </summary>
        public int TType { get; set; }


        public List<TreeModel> ProjectList { get; set; }
        private bool isExpanded;
        public bool IsExpanded
        {
            get { return this.isExpanded; }
            set
            {
                this.isExpanded = value;
                this.OnPropertyChanged("IsExpanded");

                UpdateImageSource();
            }
        }

        private string tgImageSource;
        public string TGImageSource
        {
            get
            {
                if (this.tgImageSource == null)
                    UpdateImageSource();

                return this.tgImageSource;
            }
            protected set
            {
                this.tgImageSource = value;
                this.OnPropertyChanged("TGImageSource");
            }
        }

        protected void UpdateImageSource()
        {
            if (this.IsExpanded)
                this.TGImageSource = "pack://application:,,,/images/dtriangle.png";//朝下的图标
            else
                this.TGImageSource = "pack://application:,,,/images/rtriangle.png";//朝右的图标
        }

        #region INotifyPropertyChanged Members

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }

        #endregion 
    }