在 TreeView 中使用 WrapPanel答案

【问题标题】：Using A WrapPanel in a TreeView在 TreeView 中使用 WrapPanel
【发布时间】：2012-01-09 02:58:04
【问题描述】：

我想显示详细程度的数据，所以我使用 TreeView，但每个细节都很短，所以我想使用 WrapPanel（水平）每行有很多细节。

类似：

这是一个未展开的项目
这是展开项目的标题

信息 1 信息 2 信息 3 信息 4

信息 5 信息 6 信息 7

所以我尝试定义 TreeViewItem 的模板，但我无法让包装面板裹。当信息的数据模板宽度为 100 且 TreeView 时，我每行只有一个信息是500。我尝试设置WrapPanel的宽度，ItemsWidth，其他的都没有成功。

有什么想法吗？

编辑：我终于得到了一个“更简单”的解决方案。似乎我们仍然必须定义 WrapPanel 的宽度，这使得解决方案不那么通用。

这是我找到的解决方案：只需以一种样式定义在树视图项：

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

【问题讨论】：

你看到 WrapPanel 了吗？它有滚动条吗？也许尝试禁用它们。
是的，事实上正如我所说的那样，它可以工作，只是它显示的项目好像面板是一个垂直 StackPanel。无论我改变什么，它都是水平居中的。是的，它尝试将 Horizontal ScrollViewer 设置为 Disabled，但它不起作用。
如果 WrapPanel 更宽会怎样？尝试为其设置边框并确保它确实是垂直的或者它只是可用空间
如上所述，找到了解决方案。仍然不知道为什么另一个不起作用，但是.. 感谢支持。
我会把它写成帖子，如果是，请将其标记为答案，以便遇到相同问题的其他用户也可以享受。

标签： c# wpf vb.net xaml panel

【解决方案1】：

编辑：我终于得到了一个“更简单”的解决方案。似乎我们仍然必须定义 WrapPanel 的宽度，这使得解决方案不那么通用。（也许宽度的绑定（但哪个？）可以解决这个问题）

这是我找到的解决方案：只需以一种样式定义在树视图项：

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

【讨论】：

【解决方案2】：

你必须设置

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>

这个解决方案对我有用。

【讨论】：

【解决方案3】：

试试

禁用滚动条
加宽 WrapPanel 看看视觉效果，有没有效果？
制作彩色边框/背景以跟踪 WrapPanel 的实际大小

这些将帮助您追踪问题

【讨论】：