locked
TreeView data and wrapping TreeViewItems RRS feed

  • Question

  • Hi everyone.

    I've recently tried to experiment a little with TreeViews and complex ListView, and I came across a little problem regarding the wrapping of treeview contents.

    To show you what I mean, you can look at this project by Josh Smith - http://www.codeproject.com/WPF/AdvancedCustomTreeViewLyt.asp

    Now, imagine there are about 20 countries, and you want the window to stay the same size, no scroll bar. Meaning, at some point Germany should go under USA, in a normal wrap view.
    No matter what I did, I couldn't get the TreeView items to wrap, like a normal WrapPanel full of pictures for example.

    Is it impossible to override the way treeview items are presented, or am I just missing something?
    Deep thanks for any help.

    Wednesday, May 9, 2007 3:03 PM

Answers

  • In the xaml example I gave above you can get this behavior by adding a wrap panel to each TreeViewItem.

     

    This works in xamlpad and wraps correctly at any level of hierarchy (try adding some cities to 'Washington' for example). 

     

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlnsTongue Tiedys="clr-namespaceTongue Tiedystem;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
     <Grid>
       <Grid.Resources>
          <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="ItemsPanel">
             <Setter.Value>
               <ItemsPanelTemplate>
               <WrapPanel/>
               </ItemsPanelTemplate>
             </Setter.Value>
            </Setter>
         </Style>
       </Grid.Resources>

       <TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
         <TreeView.ItemsPanel>
           <ItemsPanelTemplate>
              <WrapPanel/>
           </ItemsPanelTemplate>
         </TreeView.ItemsPanel>
         <TreeViewItem Header="United States Of America" >
           <TreeViewItem Header="Washington"/>
           <TreeViewItem Header="California"/>
           <TreeViewItem Header="Oregon"/>
         </TreeViewItem>
         <TreeViewItem Header="France">
            <TreeViewItem Header="Haute Loire"/>
            <TreeViewItem Header="Paris"/>
         </TreeViewItem>
       </TreeView>
     </Grid>
    </Page>

     

    Let me know if you have troubles applying this to your code.

     

     

    Friday, May 11, 2007 5:33 PM

All replies

  • You'll want to do two things to get this behavior:

     

    Wednesday, May 9, 2007 10:20 PM
  • Not sure how my message got cut off...

    You'll want to do two things to get this behavior: set the TreeView's ItemsPanel property to be a WrapPanel (which you must have already figured out) and disable horizontal scrolling. The way to do this is to set the ScrollViewer.HorizontalScrollBarVisibility property to 'Disabled' on TreeView. Here's some example xaml:

     

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlnsTongue Tiedys="clr-namespaceTongue Tiedystem;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
     <Grid>
       <TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
         <TreeView.ItemsPanel>
           <ItemsPanelTemplate>
      <WrapPanel/>
           </ItemsPanelTemplate>
         </TreeView.ItemsPanel>
         <TreeViewItem Header="United States Of America">
     <TreeViewItem Header="Washington"/>
     <TreeViewItem Header="California"/>
     <TreeViewItem Header="Oregon"/>
         </TreeViewItem>
         <TreeViewItem Header="France">
     <TreeViewItem Header="Haute Loire"/>
     <TreeViewItem Header="Paris"/>
         </TreeViewItem>
       </TreeView>
     </Grid>
    </Page>

     

    Wednesday, May 9, 2007 10:21 PM
  • Thanks for the answer.
    The problem is still that even though this wraps the FIRST level, meaning all of the roots - it doesn't actually wrap the inside of any treeview item.
    Meaning, a country has 20 regions (let's assume they are horizontal) - it still won't wrap.

    When I read your answer I realized I explained myself wrong at the start, since the way I use my treeview is different than the example (here - every country is a root, in my application it is something like a big root named "World" and then all of the countries, then they don't wrap inside a treeview item itemspanel).
    Friday, May 11, 2007 10:13 AM
  • In the xaml example I gave above you can get this behavior by adding a wrap panel to each TreeViewItem.

     

    This works in xamlpad and wraps correctly at any level of hierarchy (try adding some cities to 'Washington' for example). 

     

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlnsTongue Tiedys="clr-namespaceTongue Tiedystem;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
     <Grid>
       <Grid.Resources>
          <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="ItemsPanel">
             <Setter.Value>
               <ItemsPanelTemplate>
               <WrapPanel/>
               </ItemsPanelTemplate>
             </Setter.Value>
            </Setter>
         </Style>
       </Grid.Resources>

       <TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled">
         <TreeView.ItemsPanel>
           <ItemsPanelTemplate>
              <WrapPanel/>
           </ItemsPanelTemplate>
         </TreeView.ItemsPanel>
         <TreeViewItem Header="United States Of America" >
           <TreeViewItem Header="Washington"/>
           <TreeViewItem Header="California"/>
           <TreeViewItem Header="Oregon"/>
         </TreeViewItem>
         <TreeViewItem Header="France">
            <TreeViewItem Header="Haute Loire"/>
            <TreeViewItem Header="Paris"/>
         </TreeViewItem>
       </TreeView>
     </Grid>
    </Page>

     

    Let me know if you have troubles applying this to your code.

     

     

    Friday, May 11, 2007 5:33 PM
  • Turns out I did an override on my own style.
    Thanks.
    Sunday, May 13, 2007 3:27 PM