在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>

在TreeView中使用WrapPanel

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>

这个解决方案适用于我。

尝试

  1. 禁用滚动条
  2. 加宽包裹面板并查看视觉效果,是否受到影响
  3. 制作彩色边框/背景以跟踪WrapPanel的实际大小

这些将帮助您跟踪问题