`TreeView`中的WPF包装项目答案

【问题标题】：WPF Wrap items within `TreeView``TreeView`中的WPF包装项目
【发布时间】：2017-03-22 13:22:52
【问题描述】：

在Page 里面我有下面的TreeView。我怎样才能让ItemsControl 中的东西换行而不是滚动到页面边缘？ WrapPanel 似乎什么也没做。

请注意，这与询问如何包装叶子项目不同——我不需要包装 ItemsControls（只有一个），但需要将东西包装在 ItemsControl 内。

<TreeView
    VirtualizingPanel.IsVirtualizing="True"
    VirtualizingPanel.VirtualizationMode="Recycling"
    VirtualizingPanel.ScrollUnit="Pixel"
    VirtualizingPanel.IsVirtualizingWhenGrouping="True"
    Name="Tree">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate
            DataType="{x:Type viewModel:HighLevelItem}"
            ItemsSource="{Binding MidLevelItems}">
            <TextBlock
                Text="{Binding HighLevelName}"/>
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate
                    DataType="{x:Type viewModel:MidLevelItem}">
                    <Expander>
                        <Expander.Header>
                            <TextBlock
                                Text="{Binding MidLevelName}"/>
                        </Expander.Header>
                        <Expander.Content>
                            <ItemsControl
                                ItemsSource="{Binding LowLevelItems}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapPanel
                                            Orientation="Horizontal"/>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock
                                            Text="{Binding LowLevelName}"/>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </Expander.Content>
                    </Expander>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

...这里有一些类型定义：

public class HighLevelItem
{
    public MidLevelItem[] MidLevelItems { get; set; }
    public string HighLevelName { get; set; }
}
public class MidLevelItem
{
    public LowLevelItem[] LowLevelItems { get; set; }
    public string MidLevelName { get; set; }
}
public class LowLevelItem
{
    public string LowLevelName { get; set; }
}

...以及代码中的其他位置（以填充 TreeView）：

Tree.Items = new[] { new HighLevelItem { HighLevelName = "ALPHA", MidLevelItems = Enumerable.Repeat(0, 1000).Select(_ => new MidLevelItem { MidLevelName = Guid.NewGuid().ToString(), LowLevelItems = Enumerable.Repeat(0, 1000).Select(__ => new LowLevelItem { LowLevelName = "ff" }).ToArray() }).ToArray() } };

还请注意，我使用的是Expander，而不是继续使用另一个分层数据模板，因为我需要该层将项目水平排列，并在树中的任何层更改VirtualizingStackPanel 的Orientation不同于其他层breaks UI virtualization for the entire tree when that layer is expanded。因此，上述树中的所有VirtualizingStackPanels 都具有垂直/默认方向，最后一层的水平排列来自Expanders。

这是上面的样子。 “ALPHA”是一个TopLevelItem，Guids 是MidLevelItems，每个十六进制对是一个单独的LowLevelItem（你会注意到它不是环绕而是继续越过边缘）：

【问题讨论】：

请提供一些可用于从头开始重现您的问题的示例数据：stackoverflow.com/help/mcve
@mm8 让我知道我刚刚编辑的屏幕截图是否有帮助？
当然不会。您应该提供任何人都可以粘贴到 Visual Studio 并按原样运行的代码 sn-ps 以重现您的问题。
@mm8 我编辑了一些足够相似的代码来理解这一点。让我知道这是否有帮助
您需要指定Expander的宽度，例如：

标签： c# wpf xaml treeview word-wrap

【解决方案1】：

您需要指定Expander的Width，例如：

<Expander Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=TreeView}}">
...

您可能想要使用转换器或其他东西，从TreeView 的ActualWidth 中减去左侧的偏移量。

【讨论】：