首页 文章

WPF包装`TreeView`中的项目

提问于
浏览
3

Page 里面我有以下 TreeView . 如何将 ItemsControl 中的内容换行而不是滚动页面边缘? WrapPanel 似乎没有做任何事情 .

注意这与询问如何包装叶子项不同 - 我不需要包装 ItemsControl (只有一个),但需要将事物包装在 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 而不是继续使用其他分层数据模板,因为我需要该图层使项目水平排列,并将树中任何一层的 VirtualizingStackPanelOrientation 更改为与其他图层breaks UI virtualization for the entire tree when that layer is expanded不同 . 因此,上面树中的所有 VirtualizingStackPanel 都具有垂直/默认方向,最后一层的水平排列来自 Expander s .

以下是上面的内容 . "ALPHA"是一个 TopLevelItem ,Guids是 MidLevelItem s,每个十六进制对是一个单独的 LowLevelItem (您会注意到它不是包装但继续经过边缘):

Screenshot of the above code

1 回答

  • 1

    您需要指定 ExpanderWidth ,例如:

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

    您可能希望使用转换器或从 TreeViewActualWidth 中减去左边缘偏移的内容 .

相关问题