想要在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属性。我需要BorderBrushBorder控件是Transparent为一个未选中的项目,但White为一个选定的。该应用程序用于警车,有两种不同的配色方案,一种用于白天& &;一个晚上用。夜间方案使用深色,以尽量减少对夜视的影响。在白天模式下,这无关紧要,但在夜间模式下,树中单个选定项目周围的细白线是可以的,但每个项目周围的细白线就不行了。

我如何使我的样式工作?

想要在TreeView控件的ItemContainerStyle中设置边框控件的BorderBrush

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属性。