wpf - 如何在 Treeview 中实现 AutoSize 网格布局
问题描述
我想为树视图实现网格布局,其中最右边的列具有 *-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
设置为红色。所以我需要一种方法,从列宽中减去“级别 * 缩进空间”。
解决方案
我希望除了覆盖默认值之外没有直接的方法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/
希望有帮助。
推荐阅读
- php - PHP:为文件名生成唯一字符串
- ios - 无法设置已在 swift 中以编程方式创建的 UIButton 的角半径
- java - 使用 Spring 和 Redis 的 Vaadin 在慢速环境中加载之前的 UI 状态
- alfresco - 自定义 RSS dashlet alfresco - feed.utils.ftl
- javascript - 在for循环中访问obj
- mysql - 选择最新日期(子查询)
- sql-server-2012 - 使用从同一表计算的数据更改表添加列
- android - 布局管理器 setFirstVisibleItemPosition
- sql - PL/SQL 程序显示顶级“a”员工的薪水
- asp.net-mvc - JQuery Ajax Post - 操作返回部分视图但未成功或显示