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

时间:2014-08-21 15:57:09

标签: c# wpf xaml treeview

我在对话框中有一个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>

问题是<Setter>标记中的<TreeView.ItemContainerStyle>。编译器不喜欢TaragetName属性。对于未选中的项,我需要BorderBrush控件的BorderTransparent,而对于选定的项,我需要White。该应用程序用于警车,有两种不同的配色方案,一种用于白天和时间。一个晚上的时间。夜间计划使用深色,以便对夜视产生最小的影响。在白天模式下,它并不重要,但在夜间模式下,树中单个选定项目周围的细白线是可以的,但每个项目周围都没有。

如何使我的风格有效?

1 个答案:

答案 0 :(得分:1)

TargetName只能在模板的某个范围内使用。在这种情况下,您必须为Triggers定义Border,如下所示:

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