如何在WPF TreeView中突出显示整行 [英] How to highlight entire row in WPF TreeView

问题描述

我想调整默认的WPF TreeView/TreeViewItem模板，以便可以突出显示整个行，如图所示:

I want to adapt the default WPF TreeView/TreeViewItem template, so that the entire row can be highlighted, as shown in the image:

但是，我尝试了从谷歌搜索中获取多个模板，但是它们都无法真正产生效果，甚至将一些错误的答案标记为正确...

However, I've tried several templates from googling, but none of them can really make the effects, some wrong answers were even marked as correct...

在代码流中似乎有一个答案似乎可行，但是它添加了额外的C#代码，或者不需要额外的代码但效果并不理想.

There was an answer in codeflow which seems to work, but it add extra C# code, or didn't need extra code but not working perfectly.

我不想添加额外的C#代码，而只更改默认模板. 有人有什么好主意吗?

I don't want to add extra C# code, but only change the default template. Anyone have any good ideas?

非常感谢！

----编辑----

----EDIT----

@Nick，在使用模板后，它显示如下，

@Nick, after using your template, it is shown like this,

首先，它没有突出显示整个"行，整个"是指树的最宽宽度.

first, it didn't highlight the "entire" row, by "entire" I mean the widest width of the tree.

第二次，它突出显示了包括孩子在内的额外区域.

second, it highlighted extra areas including the children.

推荐答案

我最近不得不做类似的事情，尽管这个问题已经很老了，但发现像我一样偶然发现此页面的其他人也许可以从我的书中得到一些东西.解决方案.

I recently had to do something similar and though the question is quite old, figured others who stumble upon this page like I did might be able to get something from my solution.

我也编辑了ControlTemplate，就像Tim在评论中所描述的一样.我将"Expander"切换按钮和"Bd"边框控件分组为一个单一的网格，该网格在TreeView的整个宽度上延伸.然后在IsSelected触发器下，将突出显示设置为新创建的网格，而不是边框​​.

I also edited the ControlTemplate, much like how Tim described in the comments. I grouped the "Expander" toggle button and the "Bd" border controls to a single grid that stretches across the full width of the TreeView. Then under the IsSelected trigger, I set the highlight to the newly created grid instead of the border.

这是TreeView的ControlTemplate，其中包含我所做的修改:

Here is the TreeView's ControlTemplate with my edits:

<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="19" Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <!-- created ItemRowGrid to contain both togglebutton and border -->
    <Grid x:Name="ItemRowGrid" Grid.ColumnSpan="3" Margin="1.5,0,0,0">
        <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}" HorizontalAlignment="Left" d:LayoutOverrides="Width, LeftMargin, RightMargin"/>
        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true" Margin="17.5,0,-17.5,0">
            <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
        </Border>
    </Grid>
    <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/>
</Grid>
<ControlTemplate.Triggers>
    <Trigger Property="IsExpanded" Value="false">
        <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
    </Trigger>
    <Trigger Property="HasItems" Value="false">
        <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
    </Trigger>
    <Trigger Property="IsSelected" Value="true">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
        <!-- setting highlight target to created ItemRowGrid instead of border -->
        <Setter Property="Background" TargetName="ItemRowGrid" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    </Trigger>
    <MultiTrigger>
        <MultiTrigger.Conditions>
            <Condition Property="IsSelected" Value="true"/>
            <Condition Property="IsSelectionActive" Value="false"/>
        </MultiTrigger.Conditions>
        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
    </MultiTrigger>
    <Trigger Property="IsEnabled" Value="false">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
    </Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

这并不是OP要求的确切方式，因为子级"行的突出显示以缩进开始.但是，它确实正确地突出了每一行，而没有包含子项.

It is not exactly the way the OP asked for because the highlight for the "children" rows start with an indent. But it does properly highlight each row without including sub-items.

这篇关于如何在WPF TreeView中突出显示整行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！