title: WPF Wrap items within `TreeView`
body: <p>Inside a <code>Page</code> I have the below <code>TreeView</code>. How can I get the things inside the <code>ItemsControl</code> to wrap instead of scrolling off the edge of the page? The <code>WrapPanel</code> doesn't seem to be doing anything.</p>
  
  <p>Note this is not the same as asking how to wrap leaf items--I don't need to wrap <code>ItemsControl</code>s (there's only one), but need to wrap the things inside the <code>ItemsControl</code>.</p>
  
  <pre><code>&lt;TreeView
      VirtualizingPanel.IsVirtualizing="True"
      VirtualizingPanel.VirtualizationMode="Recycling"
      VirtualizingPanel.ScrollUnit="Pixel"
      VirtualizingPanel.IsVirtualizingWhenGrouping="True"
      Name="Tree"&gt;
      &lt;TreeView.ItemTemplate&gt;
          &lt;HierarchicalDataTemplate
              DataType="{x:Type viewModel:HighLevelItem}"
              ItemsSource="{Binding MidLevelItems}"&gt;
              &lt;TextBlock
                  Text="{Binding HighLevelName}"/&gt;
              &lt;HierarchicalDataTemplate.ItemTemplate&gt;
                  &lt;DataTemplate
                      DataType="{x:Type viewModel:MidLevelItem}"&gt;
                      &lt;Expander&gt;
                          &lt;Expander.Header&gt;
                              &lt;TextBlock
                                  Text="{Binding MidLevelName}"/&gt;
                          &lt;/Expander.Header&gt;
                          &lt;Expander.Content&gt;
                              &lt;ItemsControl
                                  ItemsSource="{Binding LowLevelItems}"&gt;
                                  &lt;ItemsControl.ItemsPanel&gt;
                                      &lt;ItemsPanelTemplate&gt;
                                          &lt;WrapPanel
                                              Orientation="Horizontal"/&gt;
                                      &lt;/ItemsPanelTemplate&gt;
                                  &lt;/ItemsControl.ItemsPanel&gt;
                                  &lt;ItemsControl.ItemTemplate&gt;
                                      &lt;DataTemplate&gt;
                                          &lt;TextBlock
                                              Text="{Binding LowLevelName}"/&gt;
                                      &lt;/DataTemplate&gt;
                                  &lt;/ItemsControl.ItemTemplate&gt;
                              &lt;/ItemsControl&gt;
                          &lt;/Expander.Content&gt;
                      &lt;/Expander&gt;
                  &lt;/DataTemplate&gt;
              &lt;/HierarchicalDataTemplate.ItemTemplate&gt;
          &lt;/HierarchicalDataTemplate&gt;
      &lt;/TreeView.ItemTemplate&gt;
  &lt;/TreeView&gt;
  </code></pre>
  
  <p>...here are some type definitions:</p>
  
  <pre><code>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; }
  }
  </code></pre>
  
  <p>...and somewhere else in your code (to get the <code>TreeView</code> to populate):</p>
  
  <pre><code>Tree.Items = new[] { new HighLevelItem { HighLevelName = "ALPHA", MidLevelItems = Enumerable.Repeat(0, 1000).Select(_ =&gt; new MidLevelItem { MidLevelName = Guid.NewGuid().ToString(), LowLevelItems = Enumerable.Repeat(0, 1000).Select(__ =&gt; new LowLevelItem { LowLevelName = "ff" }).ToArray() }).ToArray() } };
  </code></pre>
  
  <p>Also note that I'm using an <code>Expander</code> instead of continuing with another hierarchical data template because I need that layer to have items arranged horizontally, and changing the <code>Orientation</code> of the <code>VirtualizingStackPanel</code> at any layer within the tree to be different than the other layers <a href="https://stackoverflow.com/q/42911247/3063273">breaks UI virtualization for the entire tree when that layer is expanded</a>. Hence all the <code>VirtualizingStackPanel</code>s in the above tree have a vertical/default orientation, and horizontal arrangement for the last layer comes from <code>Expander</code>s.</p>
  
  <p>Here's what the above looks like. "ALPHA" is a <code>TopLevelItem</code>, the Guids are <code>MidLevelItem</code>s, and each hex pair is an individual <code>LowLevelItem</code> (which you'll notice are not wrapping but continue past the edge):</p>
  
  <p><a href="https://i.stack.imgur.com/f94QO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f94QO.png" alt="Screenshot of the above code"></a></p>