Treeview with wrappanel - 灵活的分组

Question

我正在尝试解决树视图的问题。 我想在树视图节点中的 wrappanel 中排序项目（用户控件）。

-Group
 |---------------------------------------------|
 |Item Item Item Item Item Item Item Item Item |
 |---------------------------------------------|
+Group
+Group

如果窗口宽度（以及沿树视图宽度）被抑制并且项目不适合一行，则应将它们排序到下一行。

-Group
 |-------------------------|
 |Item Item Item Item Item |
 |Item Item Item Item      |
 |-------------------------|
+Group
+Group

我已经完成了上面的示例，它不会将项目放在下一行。这在没有 Treeview 的情况下工作，但在 treeview-node 内部缺少一些东西..

    <DataTemplate x:Key="GroupTemplateFrontPage">
        <Border BorderBrush="AliceBlue" BorderThickness="1" CornerRadius="10"
                Background="{StaticResource TreeViewItemBackground}" >
            <Expander HeaderTemplate="{DynamicResource HeaderTemplate}" 
                      Header="{Binding}" IsTabStop="False" HorizontalAlignment="Left" 
                      IsEnabled="True" ExpandDirection="Down" IsExpanded="True">
                <Grid Margin="5,5,5,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <ListBox Margin="10,39,0,0" VerticalAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding Modems}">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel                                    
                                HorizontalAlignment="Stretch"
                                ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                                ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Controls:UserControlItem Margin="4" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </Expander>
        </Border>
    </DataTemplate>





        <StackPanel Orientation="Vertical">
            <TextBlock Text="Treeview" />
            <TreeView Name="_treeView" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              Margin="0,0,0,0" 
              ItemsSource="{Binding}" 
              ItemTemplate="{StaticResource GroupTemplateFrontPage}"  />
        </StackPanel>

Answer 1

为TreeViewItems 设置ItemsPanel 应该这样做：

<TreeView.ItemContainerStyle>
    <Style TargetType="TreeViewItem">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.ItemContainerStyle>

同时关闭水平滚动以允许换行：

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>