具有固定宽度列的 WPF TreeView

Question

我想创建一个 TreeView 和一个 ListView 的混合。
我想要2列。
在左列中，我想要一个递归 TreeView ，右列应该显示有关左列项目的一些信息。
让我们调用左列名称和右列值。
问题是，当您展开 TreeView 时，缩进级别会发生变化，并且值列变得不对齐。

我能想到的只是:

A: 使用内置的 TreeView 并根据缩进级别手动更改 Name-column 的宽度，以便 value-column 始终对齐。

B. 使用内置的 ListView 并通过在父项之间添加子项并更改这些项的缩进来手动创建 TreeView。

真的没有更好的办法吗？

Answer 1

有一种方法，我在一个 Silverlight 应用程序中有这样一个野兽

您需要调整 treeviewitem 的模板。
默认模板不会一直延伸到整个 TreeView 。

通过 tweeking 模板，您可以让它一直扩展，然后您可以将 DataTemplate(或 HierarchicalDataTemplate)设置为网格。如果我没记错的话，您需要获取 TreeviewItem 的默认模板的副本并将“Header”元素的 Horizo​​ntalAlignment 属性更改为“Stretch”，删除构成模板的网格中最右边的列，然后更改包含从“自动”到“*”的元素的列的宽度。

使用混合很容易做到。创建一个TreeViewItem，右键单击它并选择“编辑控制部件("template")>编辑副本...”
这将为 TreeViewItem 创建默认模板的副本。从那里，找到名为 PART_Header 的 ContentPresenter。从这里向上走，找到包含网格和
修改其列以匹配我的解释(删除最后一列，将第二列从“自动”更改为“*”)。
在为项目创建的样式中，将 Horizo​​ntalContentAlignment 设置为“Stretch”(默认情况下它绑定(bind)到其他东西)。

使用在 TreeView 上创建为 ItemContainerStyle 的样式。
之后，您可以删除您最初创建的 TreeViewItem。

最后，你应该得到一堆资源，其中之一就是你的风格。请参阅下文了解我的最终结果(TreeViewItem 样式和带有名称和值列的项目的基本 DataTemplate)。还创建了 TreeViewItem 样式/模板引用的其他资源，但此处未显示它们(因为它已经太长了:p)。

<Window.Resources>    
<Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
        <Setter Property="Padding" Value="1,0,0,0"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="19" Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/>
                        </Border>
                        <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" 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="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                        </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.ControlBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

        <HierarchicalDataTemplate x:Key="DataTemplate1"                                   
                                  ItemsSource="{Binding SubNodes}">
            <Grid Margin="5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <TextBlock HorizontalAlignment="Left"
                           VerticalAlignment="Top"
                           Grid.Column="1"
                           Text="HEADER"
                           TextWrapping="Wrap" />
                <TextBox HorizontalAlignment="Left"
                         Margin="2"
                         VerticalAlignment="Top"
                         Text="VALUE"
                         TextWrapping="Wrap"
                         Grid.Column="2" />
            </Grid>

</Window.Resources>

<TreeView HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  Width="Auto"
                  Height="Auto"
                  x:Name="trv"
          ItemContainerStyle="{StaticResource TreeViewItemStyle1}"
                  ItemTemplate="{DynamicResource DataTemplate1}">            
        </TreeView>

请注意，您需要确保包含右侧单元格的网格列始终具有相同的宽度，否则您会有一些奇怪的东西(我使用具有固定宽度内容的“自动”列，我添加了一个空白的“*”名称和“单元格”之间的列以使它们右对齐)。

另请注意，此解决方案基本上将 TreeView 的外观“卡住”为您机器上的任何主题。 (根据您进行修改时使用的操作系统，它在 Vista 和 XP 机器上看起来是一样的)。