在TreeView中使用WrapPanel
本文关键字:WrapPanel TreeView | 更新日期: 2023-09-27 18:19:43
我想显示具有详细级别的数据,所以我使用TreeView,但每个细节都很短,所以我想使用WrapPanel(水平)来每行显示许多细节。
类似于:
-
这是一个未展开的项目
-
这是扩展项目的标题
信息1信息2信息3信息4
信息5信息6信息7
所以我尝试定义TreeViewItem的Template,但我无法将wrappePanel包当信息的数据模板宽度为100并且TreeView时,我每行只有一个信息是500。我尝试过设置包装面板的宽度、项目宽度和其他东西,但都没有成功。
知道吗?
编辑:我终于用了一个"更简单"的解决方案。尽管如此,我们必须定义WrapPanel的宽度,这使得解决方案不那么通用。
以下是我得到的解决方案:只需在样式中定义TreeViewItem:
<Style TargetType="TreeViewItem">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
Width="520"
HorizontalAlignment="Stretch"
Margin="0"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
IsItemsHost="True"
/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
为了完整起见,我仍然让这个不起作用的解决方案出现在这里。(为什么它不起作用???)
<Style TargetType="TreeViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<Grid Margin="2" Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentPresenter Name="PART_Header"
ContentSource="Header"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
!!!! this is the wrapanel not wrapping
<ListBox Name="AllItems" Grid.Row="1" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ItemsPresenter />
</ListBox>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="False">
<Setter
TargetName="AllItems"
Property="Visibility"
Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
EDIT:我终于用一个"更简单"的解决方案实现了这一点。尽管如此,我们必须定义WrapPanel的宽度,这使得解决方案不那么通用。(也许宽度的绑定(但哪个?)可以解决这个问题)
以下是我得到的解决方案:只需在样式中定义TreeViewItem:
<Style TargetType="TreeViewItem">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
Width="520"
HorizontalAlignment="Stretch"
Margin="0"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
IsItemsHost="True"
/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
您必须设置
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
到您的
<TreeView/>
不适用于
<WrapPanel/>
示例:
<TreeView x:Name="fieldTreeView" Grid.Row="1" Margin="5,0,5,0" Background="Beige"
ItemsSource="{Binding Source={StaticResource bla}}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<TreeView.Resources>
<DataTemplate DataType="{x:Type Model:bla}">
<StackPanel Orientation="Vertical">
<Label Content="{Binding Name}"/>
<TextBox Text=""/>
</StackPanel>
</DataTemplate>
</TreeView.Resources>
<TreeView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</TreeView.ItemsPanel>
</TreeView>
这个解决方案适用于我。
尝试
- 禁用滚动条
- 加宽包裹面板并查看视觉效果,是否受到影响
- 制作彩色边框/背景以跟踪WrapPanel的实际大小
这些将帮助您跟踪问题