WPF树型视图背景 [英] WPF TreeViewItem Background
本文介绍了WPF树型视图背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何更改的背景选定树型视图在 TreeView控件（或应用程序）失去焦点。默认情况下，所选项目在这种情况下，一个浅灰色的背景。
编辑：第一个回答后尝试：但是元素和的TargetName =BD将不会被发现。
＆LT;＆树视图GT;
＆LT; TreeView.Resources＆GT;
＆LT;风格X：键={X：类型的TreeViewItem}的TargetType ={X：类型的TreeViewItem}＆GT;
＆LT; setter属性=模板＆GT;
＆LT; Setter.Value＆GT;
＆LT;的ControlTemplate的TargetType ={X：类型的TreeViewItem}＆GT;
＆LT; ControlTemplate.Triggers＆GT;
＆LT; MultiTrigger＆GT;
＆LT; MultiTrigger.Conditions＆GT;
＆lt;条件属性=IsSelectedVALUE =真/＆GT;
＆lt;条件属性=IsSelectionActiveVALUE =FALSE/＆GT;
＆LT; /MultiTrigger.Conditions>
＆LT;二传手的TargetName =BD属性=背景VALUE ={DynamicResource {X：静态SystemColors.ControlBrushKey}}/＆GT;
＆LT; setter属性=前景VALUE ={DynamicResource {X：静态SystemColors.ControlTextBrushKey}}/＆GT;
＆LT; / MultiTrigger＆GT;
＆LT; /ControlTemplate.Triggers>
＆LT; /控件模板＆GT;
＆LT; /Setter.Value>
＆LT; /二传手＆GT;
＆LT; /样式和GT;
＆LT; /TreeView.Resources> ＆LT;树型视图标题=Test1的IsExpanded =真＆GT;
＆LT;树型视图标题=Test2的/＆GT;
＆LT;树型视图标题=Test3的/＆GT;
＆LT;树型视图标题=TEST4/＆GT;
＆LT;树型视图标题=TEST5/＆GT;
＆LT; /树型视图＆GT;
＆LT; / TreeView的＆GT;
解决方案
您需要修改树型视图的默认样式。特别是，您需要修改下面的触发器：
＆LT;风格X：键={X：类型树型视图}
的TargetType ={X：类型的TreeViewItem}＆GT;
...
＆LT; setter属性=模板＆GT;
＆LT; Setter.Value＆GT;
＆LT;的ControlTemplate的TargetType ={X：类型的TreeViewItem}＆GT;
...
＆LT; ControlTemplate.Triggers＆GT;
...
＆LT; MultiTrigger＆GT;
＆LT; MultiTrigger.Conditions＆GT;
＆lt;条件属性=IsSelected
值=真/＆GT;
＆lt;条件属性=IsSelectionActive
VALUE =FALSE/＆GT;
＆LT; /MultiTrigger.Conditions>
＆LT;二传手的TargetName =BD
属性=背景
VALUE ={DynamicResource {X：静态SystemColors.ControlBrushKey}}/＆GT;
＆LT; setter属性=前景
VALUE ={DynamicResource {X：静态SystemColors.ControlTextBrushKey}}/＆GT;
＆LT; / MultiTrigger＆GT;
...
＆LT; /ControlTemplate.Triggers>
＆LT; /控件模板＆GT;
＆LT; /Setter.Value>
＆LT; /二传手＆GT;
...
＆LT; /样式和GT;
正如你可以看到触发背景设置为 {DynamicResource {X：静态SystemColors.ControlBrushKey}} ，如果该项目的重点和选择处于非活动状态（焦点是别的地方）。
更新：
树型视图对Aero主题完整的风格看起来是这样的：
＆LT;风格X：键={X：类型树型视图}
的TargetType ={X：类型的TreeViewItem}＆GT;
＆LT; setter属性=背景
值=透明/＆GT;
＆LT; setter属性=HorizontalContentAlignment
VALUE ={绑定路径= HorizontalContentAlignment，的RelativeSource = {的RelativeSource AncestorType = {X：类型的ItemsControl}}}/＆GT;
＆LT; setter属性=VerticalContentAlignment
VALUE ={绑定路径= VerticalContentAlignment，的RelativeSource = {的RelativeSource AncestorType = {X：类型的ItemsControl}}}/＆GT;
＆LT; setter属性=填充
VALUE =1,0,0,0/＆GT;
＆LT; setter属性=前景
VALUE ={DynamicResource {X：静态SystemColors.ControlTextBrushKey}}/＆GT;
＆LT; setter属性=FocusVisualStyle
VALUE ={StaticResource的TreeViewItemFocusVisual}/＆GT;
＆LT; setter属性=模板＆GT;
＆LT; Setter.Value＆GT;
＆LT;的ControlTemplate的TargetType ={X：类型的TreeViewItem}＆GT;
＆LT;网格和GT;
＆LT; Grid.ColumnDefinitions＆GT;
＆LT; ColumnDefinition了minWidth =19
WIDTH =自动/＆GT;
＆LT; ColumnDefinition WIDTH =自动/＆GT;
＆所述; ColumnDefinition宽度=*/＆GT;
＆LT; /Grid.ColumnDefinitions>
＆LT; Grid.RowDefinitions＆GT;
＆LT; RowDefinition高度=自动/＆GT;
＆LT; RowDefinition /＆GT;
＆LT; /Grid.RowDefinitions>
＆LT;切换按钮X：NAME =扩展
风格={StaticResource的ExpandCollapseToggleStyle}
器isChecked ={绑定路径= IsExpanded，的RelativeSource = {的RelativeSource TemplatedParent}}
ClickMode =preSS/＆GT;
＆LT; BORDER NAME =BD
Grid.Column =1
背景={TemplateBinding背景}
BorderBrush ={TemplateBinding BorderBrush}
了borderThickness ={TemplateBinding了borderThickness}
填充={TemplateBinding填充}
SnapsToDevicePixels =真正的＆GT;
＆lt;内容presenter X：NAME =PART_Header
ContentSource =头
的HorizontalAlignment ={TemplateBinding HorizontalContentAlignment}
SnapsToDevicePixels ={TemplateBinding SnapsToDevicePixels}/＆GT;
＆LT; /边框＆GT;
＆LT;项目presenter X：NAME =ItemsHost
Grid.Row =1
Grid.Column =1
Grid.ColumnSpan =2/＆GT;
＆LT; /网格和GT;
＆LT; ControlTemplate.Triggers＆GT;
＆LT;触发属性=IsExpanded
值=false的＆GT;
＆LT;二传手的TargetName =ItemsHost
属性=能见度
VALUE =坍塌/＆GT;
＆LT; /触发＆GT;
＆LT;触发属性=HasItems
值=false的＆GT;
＆LT;二传手的TargetName =扩展
属性=能见度
值=隐藏/＆GT;
＆LT; /触发＆GT;
＆LT;触发属性=IsSelected
VALUE =真正的＆GT;
＆LT;二传手的TargetName =BD
属性=背景
VALUE ={DynamicResource {X：静态SystemColors.HighlightBrushKey}}/＆GT;
＆LT; setter属性=前景
VALUE ={DynamicResource {X：静态SystemColors.HighlightTextBrushKey}}/＆GT;
＆LT; /触发＆GT;
＆LT; MultiTrigger＆GT;
＆LT; MultiTrigger.Conditions＆GT;
＆lt;条件属性=IsSelected
值=真/＆GT;
＆lt;条件属性=IsSelectionActive
VALUE =FALSE/＆GT;
＆LT; /MultiTrigger.Conditions>
＆LT;二传手的TargetName =BD
属性=背景
VALUE ={DynamicResource {X：静态SystemColors.ControlBrushKey}}/＆GT;
＆LT; setter属性=前景
VALUE ={DynamicResource {X：静态SystemColors.ControlTextBrushKey}}/＆GT;
＆LT; / MultiTrigger＆GT;
＆LT;触发属性=IsEnabled
值=false的＆GT;
＆LT; setter属性=前景
VALUE ={DynamicResource {X：静态SystemColors.GrayTextBrushKey}}/＆GT;
＆LT; /触发＆GT;
＆LT; /ControlTemplate.Triggers>
＆LT; /控件模板＆GT;
＆LT; /Setter.Value>
＆LT; /二传手＆GT;
＆LT; Style.Triggers＆GT;
＆LT;触发属性=VirtualizingStackPanel.IsVirtualizing
VALUE =真正的＆GT;
＆LT; setter属性=ItemsPanel＆GT;
＆LT; Setter.Value＆GT;
＆LT; ItemsPanelTemplate＆GT;
＆LT; VirtualizingStackPanel /＆GT;
＆LT; / ItemsPanelTemplate＆GT;
＆LT; /Setter.Value>
＆LT; /二传手＆GT;
＆LT; /触发＆GT;
＆LT; /Style.Triggers>
＆LT; /样式和GT;
有关，你也需要这样的：
＆LT;的PathGeometry X：键=TreeArrow＆GT;
＆LT; PathGeometry.Figures＆GT;
＆LT; PathFigureCollection＆GT;
＆LT;的PathFigure IsFilled =真
StartPoint可以=0 0
在isClosed =真＆GT;
＆LT; PathFigure.Segments＆GT;
＆LT; PathSegmentCollection＆GT;
＆LT;线段点=0 6/＆GT;
＆LT;线段点=6 0/＆GT;
＆LT; / PathSegmentCollection＆GT;
＆LT; /PathFigure.Segments>
＆LT; /＆的PathFigure GT;
＆LT; / PathFigureCollection＆GT;
＆LT; /PathGeometry.Figures>
＆LT; /＆的PathGeometry GT;＆LT;风格X：键=ExpandCollapseToggleStyle
的TargetType ={X：输入切换按钮}＆GT;
＆LT; setter属性=调焦
值=FALSE/＆GT;
＆LT; setter属性=宽度
值=16/＆GT;
＆LT; setter属性=高度
值=16/＆GT;
＆LT; setter属性=模板＆GT;
＆LT; Setter.Value＆GT;
＆LT;的ControlTemplate的TargetType ={X：输入切换按钮}＆GT;
＆LT;边框宽度=16
身高=16
背景=透明
填充=5,5,5,5＆GT;
＆LT;路径X：NAME =ExpandPath
填写=透明
行程=＃FF989898
数据={StaticResource的TreeArrow}＆GT;
＆LT; Path.RenderTransform＆GT;
＆LT; RotateTransform角=135
的centerX =3
CenterY =3/＆GT;
＆LT; /Path.RenderTransform>
＆LT; /路径和GT;
＆LT; /边框＆GT;
＆LT; ControlTemplate.Triggers＆GT;
＆LT;触发属性=IsMouseOver
值=真＆GT;
＆LT;二传手的TargetName =ExpandPath
属性=中风
VALUE =＃FF1BBBFA/＆GT;
＆LT;二传手的TargetName =ExpandPath
属性=填充
值=透明/＆GT;
＆LT; /触发＆GT; ＆LT;触发属性=器isChecked
值=真＆GT;
＆LT;二传手的TargetName =ExpandPath
属性=的RenderTransform＆GT;
＆LT; Setter.Value＆GT;
＆LT; RotateTransform角=180
的centerX =3
CenterY =3/＆GT;
＆LT; /Setter.Value>
＆LT; /二传手＆GT;
＆LT;二传手的TargetName =ExpandPath
属性=填充
VALUE =＃FF595959/＆GT;
＆LT;二传手的TargetName =ExpandPath
属性=中风
VALUE =＃FF262626/＆GT;
＆LT; /触发＆GT;
＆LT; /ControlTemplate.Triggers>
＆LT; /控件模板＆GT;
＆LT; /Setter.Value>
＆LT; /二传手＆GT;
＆LT; /样式和GT;
在所有这一切，你只需要修改你有兴趣（背景颜色选择，如果处于非活动状态）的一部分，并放置在App.xaml中的资源部分的款式在你的主窗口。
How can I change the Background of a selected TreeViewItem when the TreeView (or the Application) looses Focus. A selected item by default has in this situation a light grey background.
EDIT: A try after first answer: But element with TargetName="Bd" will not be found.
<TreeView>
<TreeView.Resources>
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
<TreeViewItem Header="Test1" IsExpanded="True">
<TreeViewItem Header="Test2" />
<TreeViewItem Header="Test3" />
<TreeViewItem Header="Test4" />
<TreeViewItem Header="Test5" />
</TreeViewItem>
</TreeView>
解决方案
You need to modify the default style for TreeViewItem. Particularly, you need to modify the following trigger:
<Style x:Key="{x:Type TreeViewItem}"
TargetType="{x:Type TreeViewItem}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
...
<ControlTemplate.Triggers>
...
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected"
Value="true"/>
<Condition Property="IsSelectionActive"
Value="false"/>
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
...
</Style>
As you can see the trigger sets the background to {DynamicResource {x:Static SystemColors.ControlBrushKey}} if the item is focused and the selection is not active (focus is somewhere else).
Update:
The full style of TreeViewItem for Aero theme looks like this:
<Style x:Key="{x:Type TreeViewItem}"
TargetType="{x:Type TreeViewItem}">
<Setter Property="Background"
Value="Transparent"/>
<Setter Property="HorizontalContentAlignment"
Value="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment"
Value="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding"
Value="1,0,0,0"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<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"
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}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</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>
<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="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</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>
For that you'll also need this:
<PathGeometry x:Key="TreeArrow">
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure IsFilled="True"
StartPoint="0 0"
IsClosed="True">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment Point="0 6"/>
<LineSegment Point="6 0"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
<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 Width="16"
Height="16"
Background="Transparent"
Padding="5,5,5,5">
<Path x:Name="ExpandPath"
Fill="Transparent"
Stroke="#FF989898"
Data="{StaticResource TreeArrow}">
<Path.RenderTransform>
<RotateTransform Angle="135"
CenterX="3"
CenterY="3"/>
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="ExpandPath"
Property="Stroke"
Value="#FF1BBBFA"/>
<Setter TargetName="ExpandPath"
Property="Fill"
Value="Transparent"/>
</Trigger>
<Trigger Property="IsChecked"
Value="True">
<Setter TargetName="ExpandPath"
Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180"
CenterX="3"
CenterY="3"/>
</Setter.Value>
</Setter>
<Setter TargetName="ExpandPath"
Property="Fill"
Value="#FF595959"/>
<Setter TargetName="ExpandPath"
Property="Stroke"
Value="#FF262626"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In all of this you need to modify only the part you are interested in (the background color if selection is inactive) and place those styles in the resources section in App.xaml in your main window.
这篇关于WPF树型视图背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
