WPF Wrapping Items in a TreeView

Inside Page

I have TreeView

. How can I wrap things inside ItemsControl

instead of scrolling from the edge of the page? WrapPanel

doesn't seem to do anything.

Note that this is not the same as asking how to wrap the sheet elements - I don't need to wrap ItemsControl

(there is only one), but I do need to wrap things inside 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>

      

        
        
        
      

    

... here are some type definitions:

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

      

        
        
        
      

    

... and somewhere else in your code (to fill in 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() } };

      

        
        
        
      

    

Also note that I am using Expander

instead of continuation with another hierarchical data pattern because I need this layer to accommodate horizontal items, and changes Orientation

VirtualizingStackPanel

at any level within the tree to be different from other layers breaks the UI virtualization for the entire tree when expanding this layer . Hence everything VirtualizingStackPanel

in the above tree has a vertical / default orientation, and the horizontal layout for the last layer comes from Expander

s.

This is what looks like above. "ALPHA" is TopLevelItem

, MidLevelItem

s guides , and each hexa pair is individual LowLevelItem

(which you will notice, do not wrap, but continue past the edge):