开发者

WPF Treeview: How to display rounded border around the selected item?

I am trying to set the rounded border around the selected item of the treeview (like the one in the windows explorer on Vista). The problem is that the trigger in the following code doesn't seem to be working. It looks like the IsSelected property is always false.

 <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>


First, remove trigger IsSelected=False. It will automatically revert all changes when IsSelected will become not True.

Second, move triggers to 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>

Third, remove TreeViewItem tag. Use Border directly inside of HierarchicalDataTemplate. That's because everything you put inside HierarchicalDataTemplate is already instantiated inside of some TreeViewItem.

Fourth, bind border's background and border brush to treeviewitem's ones

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜