CODEWITHSUNDEEP
wpftreeviewdatatemplategroupingwrappanel
user1166983
user1166983

Reputation: 91

Treeview with wrappanel - flexible grouping

I'n trying to resolve problem with treeview. I would like to get items (UserControls) ordered inside wrappanel, in treeview node.

-Group
 |---------------------------------------------|
 |Item Item Item Item Item Item Item Item Item |
 |---------------------------------------------|
+Group
+Group

If window width (and along treeview width) suppress and items wont fit to one line, those should be ordered to next line.

-Group
 |-------------------------|
 |Item Item Item Item Item |
 |Item Item Item Item      |
 |-------------------------|
+Group
+Group

I have done above example which won't put items on next row. This is working without Treeview, but inside treeview-node something is missing..

    <DataTemplate x:Key="GroupTemplateFrontPage">
        <Border BorderBrush="AliceBlue" BorderThickness="1" CornerRadius="10"
                Background="{StaticResource TreeViewItemBackground}" >
            <Expander HeaderTemplate="{DynamicResource HeaderTemplate}" 
                      Header="{Binding}" IsTabStop="False" HorizontalAlignment="Left" 
                      IsEnabled="True" ExpandDirection="Down" IsExpanded="True">
                <Grid Margin="5,5,5,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <ListBox Margin="10,39,0,0" VerticalAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding Modems}">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel                                    
                                HorizontalAlignment="Stretch"
                                ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                                ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Controls:UserControlItem Margin="4" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </Expander>
        </Border>
    </DataTemplate>





        <StackPanel Orientation="Vertical">
            <TextBlock Text="Treeview" />
            <TreeView Name="_treeView" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              Margin="0,0,0,0" 
              ItemsSource="{Binding}" 
              ItemTemplate="{StaticResource GroupTemplateFrontPage}"  />
        </StackPanel>

Upvotes: 2

Views: 860

Answers (1)

brunnerh
brunnerh

Reputation: 185047

Setting the ItemsPanel for TreeViewItems should do:

<TreeView.ItemContainerStyle>
    <Style TargetType="TreeViewItem">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.ItemContainerStyle>

Also turn off horizontal scrolling to allow for wrapping:

<TreeView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>

Upvotes: 1

Related Questions