【问题标题】:Styling WPF Tree At All Levels在所有级别设置 WPF 树样式
【发布时间】:2011-12-20 15:52:13
【问题描述】:

我在 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 并且我需要设置样式时,我总是遇到麻烦。什么给了?!

【问题讨论】:

    标签: wpf wpf-controls


    【解决方案1】:

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

    【讨论】:

    • 这对一些人有帮助,但现在我失去了 TreeViewItem 子项的样式。 TreeViewItem 获得了我无法做到的风格。是因为我在 HierarchicalDataTemplate.ItemContainerStyle 中放置了一个现在没有 BasedOn 属性样式的样式吗?
    • 是的。我忘了我可以做 BasedOn="{StaticResource {x:Type TreeViewItem}}。这样我可以自动扩展节点而不丢失样式。正如你所说。谢谢!
    猜你喜欢
    • 1970-01-01
    • 2011-02-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-29
    • 1970-01-01
    • 2010-10-01
    相关资源
    最近更新 更多