Treeview项目背景覆盖高亮画笔

时间:2013-01-10 16:18:32

标签: c# wpf xaml

我正在尝试使用圆角边框和每个树视图项目的背景设置树视图控件。然而,虽然我还用线性渐变覆盖了x:Static SystemColors.HighlightBrushKey。

然而,在执行此操作时,我注意到如果我为treeview项设置背景,我的highlightbrushkey将不再应用。你能告诉我如何实现这个目标吗?

以下是我的代码:

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      

    <Page.Resources>  

        <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFEF" Offset="0"/>
                <GradientStop Color="#FFF7D3" Offset="0.2580"/>
                <GradientStop Color="#FFEFB2" Offset="0.3870"/>
                <GradientStop Color="#FFEFB2" Offset="1"/>
            </LinearGradientBrush>

 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="TreeViewItemBackground">
            <GradientStop Color="#FFFAFFFF" Offset="0"/>
            <GradientStop Color="#FFFAFAFA" Offset="0.2580"/>
            <GradientStop Color="#FFF7F7F7" Offset="0.3870"/>
            <GradientStop Color="#FFF4F4F4" Offset="1"/>
        </LinearGradientBrush>

            <LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFF8F8F8" Offset="0"/>
                <GradientStop Color="#FFE5E5E5" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />        
            <TreeView x:Name="GroupView" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" MinWidth="150"  Margin="3">
                        <TreeView.Resources>
                            <HierarchicalDataTemplate DataType="{x:Type GridSplitterTextTrim:Group}" ItemsSource="{Binding Items}">                                       
                                        <Border BorderBrush="#FFEAEEE8"   BorderThickness="1" CornerRadius="3" Margin="-1" Background="{StaticResource TreeViewItemBackground}" >
                                            <StackPanel Orientation="Horizontal"  Background="Transparent" Margin="1">
                                                <TextBlock Text="{Binding Path=Name}" TextTrimming="WordEllipsis" Margin="3" MaxWidth="150"  Width="{Binding ActualWidth, ElementName=GroupView, Converter={StaticResource TreeViewWidthConverter}}" ToolTip="{Binding Name}" />
                                            </StackPanel>
                                        </Border>                                           
                                </HierarchicalDataTemplate>
                            <DataTemplate DataType="{x:Type GridSplitterTextTrim:Entry}" >
                                <Border BorderBrush="#C0C0C0" BorderThickness="1" CornerRadius="3" Margin="-1">
                                    <StackPanel Orientation="Horizontal" Background="Transparent" Margin="1">
                                        <TextBlock Text="{Binding Path=Name}" TextTrimming="WordEllipsis" Margin="3" MaxWidth="132"  Width="{Binding ActualWidth, ElementName=GroupView, Converter={StaticResource TreeViewWidthConverter}}" ToolTip="{Binding Name}" />
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </TreeView.Resources>
                        <TreeView.ItemContainerStyle>
                            <Style TargetType="{x:Type TreeViewItem}">
                                <Setter Property="BorderThickness" Value="1"/>
                                <Setter Property="Margin" Value="2"/>
                                <Style.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                       <!-- <Setter Property="BorderBrush" Value="#adc6e5"/>-->                                       
                                        </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected" Value="True"/>
                                            <Condition Property="IsSelectionActive" Value="False"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="BorderBrush" Value="LightGray"/>
                                    </MultiTrigger>
                                </Style.Triggers>
                                <Style.Resources>
                                    <Style TargetType="Border">
                                        <Setter Property="CornerRadius" Value="3"/>                                      
                                    </Style>
                                </Style.Resources>
                            </Style>
                        </TreeView.ItemContainerStyle>
                    </TreeView>
     </Page.Resources>  
    </Page>  

需要注意的事项:

  • 我使用转换器来设置文本块的宽度。这是为了实现文本修剪。

  • 为了这篇文章的目的,我设置了一个没有背景颜色的数据模板,只是在突出显示时效果很好,当我在第一个模板中设置背景时它没有突出显示用高光笔刷。<​​/ p>

提前致谢, -Mike

1 个答案:

答案 0 :(得分:1)

DataTemplate's背景正在容器的选择之上。这就是隐藏选择颜色的原因。您可以在DataTrigger添加DataTemplate,以便在选中项目时清除背景信息:

<DataTemplate>
    <Border x:Name="bg" Background="Red">
     ...
    </Border>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}}}" 
                     Value="True">
            <Setter TargetName="bg" Property="Background" Value="{x:Null}" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>