在所有级别设置WPF树的样式

时间:2011-11-02 20:05:39

标签: wpf wpf-controls

我在WPF中有一个没有根节点的树,但是为不同的类别定义了TreeViewItems。这些TreeViewItem中的每一个都将其ItemsSource绑定到显示对象。数据显示正常。现在我试图使树看起来像Windows7资源管理器树。

我使用了这篇文章中的一些样式:WPF TreeView: How to style selected items with rounded corners like in Explorer

无论如何这里是TreeViewItem:

<TreeViewItem ItemsSource="{Binding Path=Configuration.CognosServers}" 
                      IsExpanded="True" 
                      Visibility="{Binding ItemsSource.Count, Converter={StaticResource ResourceKey=TreeViewItemVisibility1}, RelativeSource={RelativeSource Self}}">
            <TreeViewItem.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}">
                    <Setter Property="IsExpanded" Value="True"/>
                </Style>
            </TreeViewItem.ItemContainerStyle>

            <TreeViewItem.HeaderTemplate>
                <DataTemplate>
                    <Border Margin="0,5,0,0">
                        <Border.ContextMenu>
                            <ContextMenu>
                                <MenuItem Header="Remove" Click="TreeItemMenu_RemoveClick" />
                                <MenuItem Header="Add Client..." Click="TreeItemMenu_AddNewClient" />
                            </ContextMenu>
                        </Border.ContextMenu>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/WPF;component/Images/server_chart.png"
                                   Margin="0,0,5,0"/>
                            <TextBlock Text="Cognos Servers" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </TreeViewItem.HeaderTemplate>
            <TreeViewItem.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Namespaces}">
                    <Border>
                        <TextBlock Text="{Binding DisplayName}" PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" />
                    </Border>
                    <HierarchicalDataTemplate.ItemContainerStyle>
                        <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource ResourceKey=TreeViewItemStyle1}">
                            <Setter Property="IsExpanded" Value="True"/>
                        </Style>
                    </HierarchicalDataTemplate.ItemContainerStyle>
                    <HierarchicalDataTemplate.ItemTemplate>
                        <HierarchicalDataTemplate ItemsSource="{Binding Clients}">
                            <Border>
                                <TextBlock Text="{Binding DisplayName}" PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" />
                            </Border>
                            <HierarchicalDataTemplate.ItemContainerStyle>
                                <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource ResourceKey=TreeViewItemStyle1}">
                                    <Setter Property="IsExpanded" Value="True"/>
                                </Style>
                            </HierarchicalDataTemplate.ItemContainerStyle>
                            <HierarchicalDataTemplate.ItemTemplate>
                                <DataTemplate>
                                    <Border>
                                        <TextBlock Text="{Binding DisplayName}"
                                                   ContextMenu="{StaticResource ResourceKey=ContextMenuTreeItem}" 
                                                   PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" />
                                    </Border>
                                </DataTemplate>
                            </HierarchicalDataTemplate.ItemTemplate>
                        </HierarchicalDataTemplate>
                    </HierarchicalDataTemplate.ItemTemplate>
                </HierarchicalDataTemplate>
            </TreeViewItem.ItemTemplate>
        </TreeViewItem>

我应用于TreeView的样式如下所示:

<TreeView x:Name="TreeViewLoadedItems" 
              Grid.Row="1"
              VerticalAlignment="Stretch" 
              ItemContainerStyle="{DynamicResource TreeViewItemStyle1}" 
              MouseDoubleClick="TreeViewItem_MouseDoubleClick"
              SelectedItemChanged="TreeViewLoadedItems_SelectedItemChanged" >

最后,我正在应用的风格是:

<Style TargetType="{x:Type TreeViewItem}">
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type TreeViewItem}">
                <!-- Style for the selected item -->
                <Setter Property="BorderThickness" Value="1"/>
                <Style.Triggers>
                    <!-- Selected and has focus -->
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="BorderBrush" Value="#7DA2CE"/>
                    </Trigger>
                    <!-- Mouse over -->
                    <!--<Trigger Property="helpers:TreeView_IsMouseDirectlyOverItem.IsMouseDirectlyOverItem" Value="True">
                                                <Setter Property="Background">
                                                    <Setter.Value>
                                                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                            <GradientStop Color="#FFFAFBFD" Offset="0"/>
                                                            <GradientStop Color="#FFEBF3FD" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter Property="BorderBrush" Value="#B8D6FB"/>
                                            </Trigger>-->
                    <!-- Selected but does not have the focus -->
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="True"/>
                            <Condition Property="IsSelectionActive" Value="False"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="BorderBrush" Value="#D9D9D9"/>
                    </MultiTrigger>
                </Style.Triggers>
                <Style.Resources>
                    <Style TargetType="Border">
                        <Setter Property="CornerRadius" Value="2"/>
                    </Style>
                </Style.Resources>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

无论我做了什么我似乎无法让每个项目在选中时看起来都一样。只有叶子节点似乎在挑选风格。当有HierarchialDataTemplates并且我需要设置样式时,我总是遇到麻烦。是什么给了什么?!

1 个答案:

答案 0 :(得分:2)

在您的风格中设置ItemContainerStyle,为什么?这样,应用的样式的直接TreeViewItem将不具有样式,可能以某种方式甚至传播到叶子;你不应该设置那个属性。只需在TreeView的Resources中放置TreeViewItems样式,它就会自动应用于每个项目,将ItemContainerStyle中的所有内容移动到实际的主样式。