效果图,改了图标
样式树
<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="" /> </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 }