WPF Treeview: Как отобразить скругленную границу вокруг выбранного элемента? - PullRequest
Новая
       3

WPF Treeview: Как отобразить скругленную границу вокруг выбранного элемента?

2 голосов
/ 26 декабря 2010

Я пытаюсь установить скругленную границу вокруг выбранного элемента древовидной структуры (как в проводнике Windows на Vista)Проблема в том, что триггер в следующем коде, похоже, не работает.Похоже, что свойство IsSelected всегда ложно. 

 <TreeView x:Name="m_treeView" BorderThickness="0" d:LayoutOverrides="Width, Height">
            <TreeView.Resources>
                <Style TargetType="TreeViewItem">
                    <Style.Resources>
                        <Brush x:Key="{x:Static SystemColors.HighlightBrushKey}">Transparent</Brush>
                    </Style.Resources>
                </Style>
            </TreeView.Resources>
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate DataType="{x:Type local:DirectoryPresentationBase}" ItemsSource="{Binding Children}">
                    <TreeViewItem>
                        <TreeViewItem.Header>
                            <Border  Name="SelectedBorder"  CornerRadius="3" Background="#EFF8FD" BorderBrush="#99DEFD"
                                     BorderThickness="1" >
                                <StackPanel Orientation="Horizontal">
                                    <interactivity:Interaction.Behaviors>
                                        <local:TreeViewExpandBehavior AssociatedTreeView="{Binding ElementName=m_treeView}"/>
                                    </interactivity:Interaction.Behaviors>
                                    <Image x:Name="img" Width="24" Height="16" Stretch="None" Source="{Binding SmallIcon}"/>
                                    <TextBlock Text="{Binding Name}" Margin="5,0" />
                                </StackPanel>
                            </Border>
                        </TreeViewItem.Header>
                    </TreeViewItem>
                    <HierarchicalDataTemplate.Triggers>
                        <Trigger Property="TreeViewItem.IsSelected" Value="True">
                            <Setter Property="Background" TargetName="SelectedBorder"  Value="Red"/>
                            <Setter Property="BorderBrush" TargetName="SelectedBorder"  Value="Green"/>
                        </Trigger>
                        <Trigger Property="TreeViewItem.IsSelected" Value="False">
                            <Setter Property="Background" TargetName="SelectedBorder"  Value="Transparent"/>
                            <Setter Property="BorderBrush" TargetName="SelectedBorder"  Value="Transparent"/>
                        </Trigger>
                    </HierarchicalDataTemplate.Triggers>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>

1 Ответ

4 голосов
/ 26 декабря 2010

Сначала удалите триггер IsSelected=False. Он автоматически отменит все изменения, когда IsSelected станет не True.

Во-вторых, переместите триггеры на TreeView.Resources: 

            <TreeView.Resources>
            <Style TargetType="TreeViewItem">
                .....
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="Red"/>
                        <Setter Property="BorderBrush" Value="Green"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TreeView.Resources>

В-третьих, удалите тег TreeViewItem. Используйте Border непосредственно внутри HierarchicalDataTemplate. Это потому, что все, что вы помещаете внутрь HierarchicalDataTemplate, уже создано внутри некоторого TreeViewItem.

В-четвертых, привязать фон границы и границу кисти к элементам TreeViewitem 

Background="{Binding Background, RelativeSource={RelativeSource AncestorType=TreeViewItem}}"
BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType=TreeViewItem}}"
...