Using A WrapPanel in a TreeView

2020-05-09 22:33发布

问题:

I want to display data with level of detail, so i use a TreeView, but each detail is quite short, so i would like to use a WrapPanel (horizontal) to have many details per line.

Something like :

  • This is an unexpanded item

  • This is The Header of an expanded item

    Info 1 Info 2 Info 3 Info 4

    Info 5 Info 6 Info 7

So i tried defining TreeViewItem's Template but i could not get the wrappanel to wrap. I have only one info per line, when info's datatemplate width is 100 and TreeView is 500. i tried setting Width of WrapPanel, ItemsWidth, are other things with no success.

Any idea ?

EDIT : i finally got this to work with a 'simpler' solution. Still it seems that we have to define the WrapPanel's Width, which make the solution less generic.

Here's the solution i came to : just defining, in a style, the ItemsPanel used in a TreeViewItem :

<Style TargetType="TreeViewItem">
   <Setter Property="ItemsPanel">
       <Setter.Value>
              <ItemsPanelTemplate>
                <WrapPanel  Orientation="Horizontal"      
                            Width="520"
                            HorizontalAlignment="Stretch" 
                            Margin="0" 
                            ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                            IsItemsHost="True"  
                    />
              </ItemsPanelTemplate>
       </Setter.Value>
   </Setter>
</Style>

And i still let the not working solution here, for completeness sake. (Why wouldn't it work ???)

    <Style TargetType="TreeViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TreeViewItem">
                <Grid Margin="2" Width="500">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <ContentPresenter Name="PART_Header"                 
                                      ContentSource="Header"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center" />

    !!!! this is the wrapanel not wrapping 
                    <ListBox     Name="AllItems"     Grid.Row="1"      >
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel  Orientation="Horizontal"   />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ItemsPresenter   />
                    </ListBox>

                </Grid> 

                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="False">
                        <Setter
                                       TargetName="AllItems"
                                        Property="Visibility"                     
                                          Value="Collapsed" />
                  </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

回答1:

EDIT : i finally got this to work with a 'simpler' solution. Still it seems that we have to define the WrapPanel's Width, which make the solution less generic. (Maybe a binding of the width (but which ?) would solve this)

Here's the solution i came to : just defining, in a style, the ItemsPanel used in a TreeViewItem :

<Style TargetType="TreeViewItem">
   <Setter Property="ItemsPanel">
       <Setter.Value>
              <ItemsPanelTemplate>
                <WrapPanel  Orientation="Horizontal"      
                            Width="520"
                            HorizontalAlignment="Stretch" 
                            Margin="0" 
                            ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                            IsItemsHost="True"  
                    />
              </ItemsPanelTemplate>
       </Setter.Value>
   </Setter>
</Style>


回答2:

You must set

ScrollViewer.HorizontalScrollBarVisibility="Disabled"

to your

<TreeView/>

not for

<WrapPanel/>

example:

<TreeView x:Name="fieldTreeView" Grid.Row="1" Margin="5,0,5,0" Background="Beige"         
          ItemsSource="{Binding Source={StaticResource bla}}"
          ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <TreeView.Resources>                
            <DataTemplate DataType="{x:Type Model:bla}">
                <StackPanel Orientation="Vertical">
                    <Label Content="{Binding Name}"/>
                    <TextBox Text=""/>
                </StackPanel>        
            </DataTemplate>                
        </TreeView.Resources>
        <TreeView.ItemsPanel>
            <ItemsPanelTemplate>                    
                <WrapPanel Orientation="Horizontal"/>                    
            </ItemsPanelTemplate>
        </TreeView.ItemsPanel>
    </TreeView>

This solution works for me.



回答3:

Try

  1. Disable the scroll bars
  2. Widen the WrapPanel and see the visual impact, is it effected?
  3. Make a color border/background to track the actual size of the WrapPanel

These will help you trace the problem