具有拉伸功能的树视图项

Question

我想创建一个 WPF TreeView，其中包含拉伸以填充可用空间的 TreeViewItems 。我使用此作为指南修改了 TreeViewItem 模板：https://social.msdn.microsoft.com/Forums/vstudio/en-US/cabcb3ba-80c0-4367-85b7-9b55adc81e65/stretch-treeview-items?forum=wpf，这很好用，因为我希望右侧的一个字符网格组件右对齐，并且长 TextBlock 占用可用空间 - 请参阅下面的代码，其中我的一个 TreeViewItems 的标题是一个网格。

但是，当我通过向左侧拖动右侧来调整窗口大小时，当没有足够的空间容纳所有网格组件时，我期待内容为"长，长，长，..."的长文本块以开始缩小宽度，但右侧的文本块被右侧窗口边缘切断。

如果我创建一个以网格为特色的全新示例，并将上面提到的网格放在其中一个网格单元格中(本质上模拟 TreeView 模板中使用的网格)，那么它会按我的预期调整大小：当我调整大小时，TextBlock 的宽度会缩小。

任何想法我可以对 TreeViewItem 模板或我指定的标题进行哪些更改以获得我想要的大小调整行为？

<Window x:Class="TreeViewSimple3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TreeViewSimple3"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ControlTemplate x:Key="TreeViewItemStretchControlTemplate" 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>
<ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="Transparent" Height="16" Padding="5" Width="16">
<Path x:Name="ExpandPath" Data="M0,0 L0,6 L6,0 z" Fill="Transparent" Stroke="#FF989898">
<Path.RenderTransform>
<RotateTransform Angle="135" CenterY="3" CenterX="3"/>
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="RenderTransform" TargetName="ExpandPath">
<Setter.Value>
<RotateTransform Angle="180" CenterY="3" CenterX="3"/>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
<Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsChecked" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Grid.ColumnSpan="2" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="PART_Header" ContentSource="Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/>
</Grid>
<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" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
Property="Border.Background"/>
<Setter Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"
Property="Control.Foreground"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected" Value="true"/>
<Condition Property="TreeViewItem.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"
Property="Border.Background"/>
<Setter Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"
Property="Control.Foreground"/>
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled" Value="false">
<Setter Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" Property="Control.Foreground"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<TreeView>
<TreeViewItem Header="Parent" Template="{StaticResource TreeViewItemStretchControlTemplate}" HorizontalContentAlignment="Stretch">
<TreeViewItem Template="{StaticResource TreeViewItemStretchControlTemplate}" HorizontalContentAlignment="Stretch">
<TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="A long, long, long, long, long, long, long label."/>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<TextBlock Text="A"/>
<TextBlock Text="B"/>
<TextBlock Text="C"/>
<TextBlock Text="D"/>
</StackPanel>
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>
</TreeView>

Answer 1

当我尝试代码示例并减小窗口大小时，TreeView 显示水平滚动条(因为它的模板中不仅有网格，还有滚动查看器)

请尝试以下设置：

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 

禁用滚动

<TextBlock TextWrapping="Wrap" Grid.Column="0" ...> 

以启用自动换行。