如何在 Treeview 中实现 AutoSize 网格布局

Question

我想为树视图实现网格布局，其中最右边的列具有 *-size，最左边的列始终具有大小。

Xaml

<TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="{x:Type model:BaustelleModel}" ItemsSource="{Binding Abschnitte}">
            <Grid ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="A"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0" BorderThickness="0 0 1 0" BorderBrush="Black">
                    <Label Content="{Binding Bezeichnung}"/>                                                                                        
                </Border>
                <Label Grid.Column="1" Background="Red"/>
                <Label Grid.Column="2" Background="Green"/>
                <Label Grid.Column="3" Background="AliceBlue"/>
            </Grid>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

结果如图所示。但是，我想为每个节点绘制一个边框，比如蓝线。如果添加了新节点或更改了文本，则所有节点的边框应与节点的边框对齐，文本在最右侧结束。

更新 1

所以，我摆弄了一下ControlTemplate。问题是，ContentPresenter 以基于其级别的缩进开始。在下图中，ContentPresenter 的背景设置为红色。所以我需要一种方法，从列宽中减去“级别 * 缩进空间”。

Answer 1

我希望除了覆盖默认的TreeviewItem 之外没有其他直接的方法。

TreeViewItem 样式：

<Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TreeViewItem">
                    <StackPanel>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"
                            MinWidth="19" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition />
                            </Grid.RowDefinitions>                           
                            <ToggleButton IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Name="Expander">
                                <ToggleButton.Style>
                                    <Style TargetType="ToggleButton">
                                        <Setter Property="UIElement.Focusable" Value="false" />
                                        <Setter Property="FrameworkElement.Width" Value="16" />
                                        <Setter Property="FrameworkElement.Height" Value="16" />
                                        <Setter Property="Control.Template"> 
                                            <Setter.Value>
                                                <ControlTemplate TargetType="ToggleButton">
                                                    <Border Padding="5,5,5,5" Background="#00FFFFFF" Width="16" Height="16">
                                                        <Path Fill="#00FFFFFF" Stroke="#FF989898" Name="ExpandPath">
                                                            <Path.Data>
                                                                <PathGeometry Figures="M0,0L0,6L6,0z" />
                                                            </Path.Data>
                                                            <Path.RenderTransform>
                                                                <RotateTransform Angle="135"  CenterX="3" CenterY="3" />                                              
                                                            </Path.RenderTransform>
                                                        </Path>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                                                            <Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF1BBBFA" />
                                                            <Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#00FFFFFF" />
                                                        </Trigger>
                                                        <Trigger Property="ToggleButton.IsChecked" Value="True">
                                                            <Setter TargetName="ExpandPath" Property="UIElement.RenderTransform">
                                                                <Setter.Value>
                                                                    <RotateTransform Angle="180" CenterX="3" CenterY="3" />
                                                                </Setter.Value>
                                                            </Setter>
                                                            <Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#FF595959" />
                                                            <Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF262626" />
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </ToggleButton.Style>
                            </ToggleButton>
                            <Border x:Name="Bd"
                                                HorizontalAlignment="Stretch"
                                                BorderThickness="{TemplateBinding Border.BorderThickness}"
                                                BorderBrush="{TemplateBinding Border.BorderBrush}"
                                                Padding="{TemplateBinding Control.Padding}"
                                                Background="{TemplateBinding Panel.Background}"
                                                SnapsToDevicePixels="True"
                                                Grid.Column="1">
                                <ContentPresenter x:Name="PART_Header"
                                        Content="{TemplateBinding HeaderedContentControl.Header}"
                                        ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
                                        ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
                                        ContentTemplateSelector="{TemplateBinding HeaderedItemsControl.HeaderTemplateSelector}"
                                        ContentSource="Header"
                                        HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                        SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                            </Border>
                            <ItemsPresenter x:Name="ItemsHost"
                        Grid.Column="1"
                        Grid.Row="1" />
                        </Grid>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="TreeViewItem.IsExpanded" Value="False">
                            <Setter TargetName="ItemsHost" Property="UIElement.Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="ItemsControl.HasItems"  Value="False">
                            <Setter TargetName="Expander" Property="UIElement.Visibility" Value="Hidden" />
                        </Trigger>
                        <Trigger Property="TreeViewItem.IsSelected" Value="True">
                            <Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                            <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="TreeViewItem.IsSelected" Value="True" />
                                <Condition Property="Selector.IsSelectionActive" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                            <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                        </MultiTrigger>
                        <Trigger Property="UIElement.IsEnabled" Value="False">
                            <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

现在你可以得到你的代码了：

 <TreeView x:Name="treeView">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate DataType="{x:Type local:BaustelleModel}" ItemsSource="{Binding Abschnitte}">
                <DockPanel LastChildFill="False">
                    <Border BorderThickness="0 0 1 0" BorderBrush="Black" DockPanel.Dock="Left">
                        <Label Content="{Binding Bezeichnung}"/>
                    </Border>
                    <StackPanel Orientation="Horizontal"  DockPanel.Dock="Right">
                        <Label Background="Red" Width="50"/>
                        <Label Background="Green" Width="50"/>
                        <Label Background="AliceBlue" Width="50"/>
                    </StackPanel>
                </DockPanel>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

输出：

参考：https://leecampbell.com/2009/01/14/horizontal-stretch-on-treeviewitems/

希望对您有所帮助。