更改TreeView控件上的扩展正号/负号的外观 [英] change appearance of expansion plus/minus signs on TreeView Control

问题描述

推荐答案

您可以在treeviewitem的控件模板中对其进行更改.
此示例使用三角形作为展开/折叠符号.它以ToggleButton样式定义.

Hi,

You can change it in the control template of the treeviewitem.
This example uses a triangle as expand/collapse sign. Its defined in the ToggleButton style.

<身体>

< 样式x: 键 = " ExpandCollapseToggleStyle" TargetType = &; ToggleButton"" < Setter 属性 = &"Focusable" 值 = " False" />

< Setter 属性 = "模板" < Setter.Value >

< ControlTemplate TargetType = " ToggleButton" < 网格 宽度 = "自动" 高度 = "自动" 背景 = "透明" < 路径x: = = VerticalAlignment = "居中" 保证金 = " 1,1,1,1" 填充 =

数据 = <字体样式="color:blue">"M 4 0 L 8 8 L 4 8 Z" = = "0.5" SnapsToDevicePixels " True" </ 网格 >

< ControlTemplate.Triggers >

< Trigger 属性 = " IsChecked" 值 " True"" >

< Setter 属性 = "数据" TargetName = " ExpandPath" Value = " M2,8L8,8 8,2z" />

< Setter 属性 = &; Fill"; TargetName " ExpandPath"" Value "#444444" />

< Setter 属性 = " StrokeThickness" TargetName = " ExpandPath" Value = " 0" />

</ Trigger >

</ ControlTemplate.Triggers >

</ ControlTemplate >

</ Setter.Value >

</ Setter >

</ 样式 >

< 样式x: = TargetType = " {x:TypeTreeViewItem}" < Setter 属性 = "背景" 值 = 透明" />

< Setter 属性 = " Padding; 值 " 1,1,1,0" />

< Setter 属性 = &;前景" 值 = "黑色" < Setter 属性 = "模板" < Setter.Value >

< ControlTemplate TargetType = " {x:Type TreeViewItem}" >

< 网格 背景 = " {x:Null}" ; >

< Grid.ColumnDefinitions

< ColumnDefinition 最小宽度 = " 15" 宽度 = "自动" < ColumnDefinition 宽度 = " Auto" < ColumnDefinition 宽度 = " *" />

</ Grid.ColumnDefinitions

< Grid.RowDefinitions >

< RowDefinition 高度 = "自动" < RowDefinition />

</ Grid.RowDefinitions

< ToggleButton x: 名称 = &"Expander" 样式 = " {StaticResourceExpandCollapseToggleStyle}" IsChecked =" {Binding 路径 = 已展开 ，

RelativeSource = {RelativeSourceTemplatedParent}}； ClickMode = "按" />

< 边框 名称 = " Bd" Grid.Column = "1" 背景 = " {TemplateBinding \ Background}" BorderBrush = " {TemplateBinding BorderBrush}" BorderThickness = " {TemplateBinding BorderThickness}" 填充 = " {TemplateBinding \ Padding}" >

< ContentPresenter x: = = /> </ 边框 >

< ItemsPresenter x: = = Grid.Column " 1"; = />

</ 网格 >

< ControlTemplate.Triggers

< Trigger 属性 = &"IsExpanded" 值 = " false" >

< Setter TargetName = " ItemsHost" 属性 "可见性" Value = &"Collapsed" />

</ 触发 > >

< Trigger 属性 = " HasItems" 值 " false" >

< Setter TargetName = " Expander" 属性 = " Visibility" Value = &"Hidden"" </ Trigger >

< MultiTrigger >

< MultiTrigger.Conditions

< 条件 属性 = " HasHeader" 值 = " false" />

< 条件 属性 = " Width" 值 "自动" />

</ MultiTrigger.Conditions >

< Setter TargetName = " PART_Header" 属性 " MinWidth"> Value = " 75" />

</ MultiTrigger > >

< MultiTrigger >

< MultiTrigger.Conditions >

< 条件 属性 = " HasHeader" 值 " false" />

< 条件 属性 = "高度" 值 = "自动" </ MultiTrigger.Conditions

< Setter TargetName = " PART_Header" 属性 = " MinHeight" Value = " 19; </ MultiTrigger >

< Trigger 属性 = &"IsSelected" 值 = " true" >

< Setter TargetName = " Bd" 属性 "背景" Value = "#CCCCCC" />

< Setter 属性 = &;前景" 值 = "#FF514DC9" />

</ Trigger >

< MultiTrigger >

< MultiTrigger.Conditions

< 条件 属性 = &"IsSelected" 值 = "true" />

< 条件 属性 = " IsSelectionActive" 值 " false" />

</ MultiTrigger.Conditions >

<Setter TargetName="Bd" Property="Background" Value="#EEEEEE"/>

<Setter Property="Foreground" Value="#FF514DC9"/>

</MultiTrigger>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Foreground" Value="LightGray"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">

<Setter Property="Focusable" Value="False"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ToggleButton">

<Grid Width="Auto" Height="Auto" Background="Transparent">

<Path x:Name="ExpandPath" HorizontalAlignment="Left"  VerticalAlignment="Center"  Margin="1,1,1,1" Fill="{x:Null}"

Data="M 4 0 L 8 4 L 4 8 Z" Stroke="#444444" StrokeThickness="0.5" SnapsToDevicePixels="True"/>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="IsChecked" Value="True">

<Setter Property="Data" TargetName="ExpandPath" Value="M2,8L8,8 8,2z"/>

<Setter Property="Fill" TargetName="ExpandPath" Value="#444444"/>

<Setter Property="StrokeThickness" TargetName="ExpandPath" Value="0"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">

<Setter Property="Background" Value="Transparent"/>

<Setter Property="Padding" Value="1,1,1,0"/>

<Setter Property="Foreground" Value="Black"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type TreeViewItem}">

<Grid Background="{x:Null}">

<Grid.ColumnDefinitions>

<ColumnDefinition MinWidth="15"  Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition/>

</Grid.RowDefinitions>

<ToggleButton 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}">

<ContentPresenter x:Name="PART_Header" ContentSource="Header" />

</Border>

<ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1"  Grid.ColumnSpan="2"/>

</Grid>

<ControlTemplate.Triggers>

<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="#CCCCCC"/>

<Setter Property="Foreground" Value="#FF514DC9"/>

</Trigger>

<MultiTrigger>

<MultiTrigger.Conditions>

<Condition Property="IsSelected" Value="true"/>

<Condition Property="IsSelectionActive" Value="false"/>

</MultiTrigger.Conditions>

<Setter TargetName="Bd" Property="Background" Value="#EEEEEE"/>

<Setter Property="Foreground" Value="#FF514DC9"/>

</MultiTrigger>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Foreground" Value="LightGray"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

这篇关于更改TreeView控件上的扩展正号/负号的外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！