想要在TreeView控件的ItemContainerStyle中设置边框控件的BorderBrush
本文关键字:控件 设置 边框 BorderBrush ItemContainerStyle TreeView | 更新日期: 2023-09-27 18:19:03
我在一个对话框中有一个TreeView
控件,我正在尝试样式。以下是我的app.xaml中用于TreeViewItem
的模板:
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="{DynamicResource TVITextBackground}" />
<Setter Property="Foreground" Value="{DynamicResource TVITextForeground}" />
<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="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"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="1"
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.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource TVIBackgroundSelected}" />
<Setter TargetName="Bd" Property="BorderBrush" Value="{DynamicResource TVIBorderSelected}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource TVITextForegroundDisabled}" />
</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>
下面是定义控件的XAML:
<TreeView BorderThickness="2"
FontSize="20"
FontWeight="Normal"
Grid.Column="1"
Grid.Row="2"
Height="208"
ItemsSource="{Binding Path=Children}"
Margin="5"
Name="FolderTree"
SelectedItemChanged="FolderTree_SelectedItemChanged">
<TreeView.ItemContainerStyle>
<Style BasedOn="{StaticResource {x:Type TreeViewItem}}" TargetType="{x:Type TreeViewItem}">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="cs:TreeViewItemBehavior.IsBroughtIntoViewWhenSelected" Value="True" />
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource TVIBorderSelected}" />
<Setter Property="BorderThickness" Value="1" />
<Setter TargetName="SpacerBorder" Property="BorderBrush" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type vm:FileSystemNode}"
ItemsSource="{Binding Children}">
<Border Name="SpacerBorder"
BorderThickness="2">
<StackPanel Orientation="Horizontal">
<Image Name="PART_Image"
Height="15"
Source="{Binding Path=Icon}"
Width="15" />
<TextBlock Margin="5,0"
Name="PART_Content"
Text="{Binding Path=Name}" />
</StackPanel>
</Border>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>
问题是<TreeView.ItemContainerStyle>
标签中的<Setter>
。编译器不喜欢TaragetName
属性。我需要BorderBrush
为Border
控件是Transparent
为一个未选中的项目,但White
为一个选定的。该应用程序用于警车,有两种不同的配色方案,一种用于白天& &;一个晚上用。夜间方案使用深色,以尽量减少对夜视的影响。在白天模式下,这无关紧要,但在夜间模式下,树中单个选定项目周围的细白线是可以的,但每个项目周围的细白线就不行了。
我如何使我的样式工作?
TargetName
只能在模板的某些作用域中使用。在这种情况下,您必须为Border
定义Triggers
,类似于:
<TreeView.ItemContainerStyle>
<Style BasedOn="{StaticResource {x:Type TreeViewItem}}" TargetType="{x:Type TreeViewItem}">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="cs:TreeViewItemBehavior.IsBroughtIntoViewWhenSelected" Value="True" />
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource TVIBorderSelected}" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type vm:FileSystemNode}"
ItemsSource="{Binding Children}">
<Border Name="SpacerBorder"
BorderThickness="2">
<!-- Add this -->
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="BorderBrush" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<StackPanel Orientation="Horizontal">
<Image Name="PART_Image"
Height="15"
Source="{Binding Path=Icon}"
Width="15" />
<TextBlock Margin="5,0"
Name="PART_Content"
Text="{Binding Path=Name}" />
</StackPanel>
</Border>
</HierarchicalDataTemplate>
</TreeView.Resources>
还要注意,我们必须使用DataTrigger
,以便我们可以绑定DataContext的IsSelected
属性。