Стилизация дерева WPF на всех уровнях - PullRequest
Новая
       12

Стилизация дерева WPF на всех уровнях

1 голос
/ 03 ноября 2011

У меня есть дерево в WPF, которое не имеет корневого узла, но определило TreeViewItems для отдельных категорий. Каждый из этих TreeViewItems имеет свой ItemsSource, связанный с экранным объектом. Данные отображаются нормально. Теперь я пытаюсь сделать дерево похожим на деревья Windows Explorer.

Я использовал некоторые стили из этого поста: WPF TreeView: Как оформить выбранные элементы закругленными углами, как в 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 Ответ

2 голосов
/ 03 ноября 2011

В вашем стиле вы установили ItemContainerStyle, почему? Таким образом, непосредственный TreeViewItem стиль, к которому применяется стиль, не будет иметь стиля, возможно, он каким-то образом даже распространится до самого листа; Вам не нужно устанавливать это свойство. Просто поместите стиль для TreeViewItems в Ресурсы TreeView, и он будет автоматически применяться к каждому элементу, переместите все в ItemContainerStyle до фактического основного стиля.

...