WPF TreeViewItem 水平对齐
Posted
技术标签:
【中文标题】WPF TreeViewItem 水平对齐【英文标题】：WPF TreeViewItem HorizontalAlignment 【发布时间】：2020-01-08 04:27:22 【问题描述】：我正在使用 WPF 4.5.2
我的基本结构是这样的
<UserControl>
<Grid>
<ContentPresenter />
</Grid>
</UserControl>
在运行时，ContentPresenter 会托管一个 TreeView，例如
<TreeView>
<TreeViewItem Header="Node 1">
<TreeViewItem Header="Leaf 1" />
<TreeViewItem Header="Leaf 2" />
</TreeViewItem>
<TreeViewItem Header="Node 2" />
</TreeView>
我想要标题为 Node 的 TreeViewItems。被拉伸到父 UserControl 的宽度。
不幸的是，TreeView 本身被拉伸到应用程序窗口的宽度。
如何设置节点项的样式宽度？
提前致谢！
【问题讨论】：
【参考方案1】：如果您想拉伸 TreeViewItem，您必须将其默认 ControlTemplate 复制到您的 XAML 中并根据您的要求对其进行编辑。
这是一堆 XAML，但恐怕没有任何属性或任何东西可以在不定义自定义模板的情况下设置来完成此操作：
<TreeView>
<TreeView.Resources>
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Checked.Fill" Color="#FF595959"/>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Checked.Stroke" Color="#FF262626"/>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Stroke" Color="#FF27C7F7"/>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Fill" Color="#FFCCEEFB"/>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Checked.Stroke" Color="#FF1CC4F7"/>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.MouseOver.Checked.Fill" Color="#FF82DFFB"/>
<PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Fill" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="TreeViewItem.TreeArrow.Static.Stroke" Color="#FF818181"/>
<Style x:Key="ExpandCollapseToggleStyle" 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,5,5,5" Width="16">
<Path x:Name="ExpandPath" Data="StaticResource TreeArrow" Fill="StaticResource TreeViewItem.TreeArrow.Static.Fill" Stroke="StaticResource TreeViewItem.TreeArrow.Static.Stroke">
<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="StaticResource TreeViewItem.TreeArrow.Static.Checked.Fill"/>
<Setter Property="Stroke" TargetName="ExpandPath" Value="StaticResource TreeViewItem.TreeArrow.Static.Checked.Stroke"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="ExpandPath" Value="StaticResource TreeViewItem.TreeArrow.MouseOver.Stroke"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="StaticResource TreeViewItem.TreeArrow.MouseOver.Fill"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsChecked" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Stroke" TargetName="ExpandPath" Value="StaticResource TreeViewItem.TreeArrow.MouseOver.Checked.Stroke"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="StaticResource TreeViewItem.TreeArrow.MouseOver.Checked.Fill"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="StretchingTreeViewItemStyle" TargetType="x:Type TreeViewItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Binding HorizontalContentAlignment, RelativeSource=RelativeSource AncestorType=x:Type ItemsControl"/>
<Setter Property="VerticalContentAlignment" Value="Binding 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="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="Binding IsExpanded, RelativeSource=RelativeSource TemplatedParent" Style="StaticResource ExpandCollapseToggleStyle"/>
<Border x:Name="Bd" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background" Grid.Column="1" Padding="TemplateBinding Padding" SnapsToDevicePixels="true"
Grid.ColumnSpan="2">
<ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="TemplateBinding HorizontalContentAlignment" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels"/>
</Border>
<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="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.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>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TreeView.Resources>
<TreeViewItem Header="Node 1" Style="StaticResource StretchingTreeViewItemStyle">
<TreeViewItem Header="Leaf 1" />
<TreeViewItem Header="Leaf 2" />
</TreeViewItem>
<TreeViewItem Header="Node 2" Style="StaticResource StretchingTreeViewItemStyle" />
</TreeView>
【讨论】：
@GeorgeDuke：你试过这个还是发生了什么？以上是关于WPF TreeViewItem 水平对齐的主要内容，如果未能解决你的问题，请参考以下文章
C# WPF TreeViewItem MouseDoubleClick 事件在 TreeViewItem 与 TreeViewItem.Header
WPF 如果选中它，则只保留一个 TreeViewItem 展开，折叠其他的，除非它是 Selected TreeViewItem 的祖先