CODEWITHSUNDEEP
c#wpfxaml
Harry Boy
Harry Boy

Reputation: 4747

ItemsControl not wrapping items onto next line

I have the following CntrolTemplate that has a HierarchicalDataTemplate that displays a custom DataType I have. Its simply an ItemsControl with a stackPanel that displays a button and some text.

The problem I am having is that the content does not wrap around and go to the next line when lots of items are added:

 <ControlTemplate x:Key="MyControlTemplate">
    <StackPanel x:Name="MyStackPanel" Orientation="Horizontal" Width="Auto" Margin="0,1,0,1" Background="{x:Null}">
        <ItemsControl  x:Name="MyItemsControl" Margin="5,0,5,0" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MyClass}}, Path=ItemsSource}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" IsItemsHost="True">
                        <StackPanel.Resources>
                            <BooleanToVisibilityConverter x:Key="BoolToVisibility"/>
                            <HierarchicalDataTemplate DataType="{x:Type local:MyCustomDataType}">
                                <Button Height="24" MinWidth="16" Width="Auto" Command="{Binding}" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled, Converter={StaticResource BoolToVisibility}}"                                           
                                        Background="Transparent" BorderBrush="Transparent">
                                    <StackPanel Orientation="Horizontal" Height="22" VerticalAlignment="Center">
                                        <Image Height="Auto" Width="Auto" Stretch="Uniform" Source="{Binding Path=IconSource}" 
                                               Visibility="{Binding Path=HideInTileGroup, Converter={StaticResource BoolToVisibility}}" Margin="2" VerticalAlignment="Center"/>
                                        <TextBlock Text="{Binding Path=DisplayName}" VerticalAlignment="Center" Width="Auto"
                                                   Foreground="{Binding Path=DisplayBrush}"
                                                   Visibility="{Binding Path=ShowDisplayName, Converter={StaticResource BoolToVisibility}}" FontSize="12">
                                        </TextBlock>
                                    </StackPanel>
                                </Button>
                            </HierarchicalDataTemplate>
                        </StackPanel.Resources>
                    </StackPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </StackPanel>
</ControlTemplate>

How can I make it wrap around?

EDIT:

I have changed it to a WrapPanel like so but still it doesn't wrap.

<ControlTemplate x:Key="MyControlTemplate">
<StackPanel x:Name="MyStackPanel" Orientation="Horizontal" Width="Auto" Margin="0,1,0,1" Background="{x:Null}">
    <ItemsControl  x:Name="MyItemsControl" Margin="5,0,5,0" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MyClass}}, Path=ItemsSource}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel>
                    <WrapPanel.Resources>
                        <BooleanToVisibilityConverter x:Key="BoolToVisibility"/>
                        <HierarchicalDataTemplate DataType="{x:Type local:MyCustomDataType}">
                            <Button Height="24" MinWidth="16" Width="Auto" Command="{Binding}" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled, Converter={StaticResource BoolToVisibility}}"                                           
                                    Background="Transparent" BorderBrush="Transparent">
                                <StackPanel Orientation="Horizontal" Height="22" VerticalAlignment="Center">
                                    <Image Height="Auto" Width="Auto" Stretch="Uniform" Source="{Binding Path=IconSource}" 
                                           Visibility="{Binding Path=HideInTileGroup, Converter={StaticResource BoolToVisibility}}" Margin="2" VerticalAlignment="Center"/>
                                    <TextBlock Text="{Binding Path=DisplayName}" VerticalAlignment="Center" Width="Auto"
                                               Foreground="{Binding Path=DisplayBrush}"
                                               Visibility="{Binding Path=ShowDisplayName, Converter={StaticResource BoolToVisibility}}" FontSize="12">
                                    </TextBlock>
                                </StackPanel>
                            </Button>
                        </HierarchicalDataTemplate>
                    </WrapPanel.Resources>                            
                </WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</StackPanel>

Upvotes: 0

Views: 1196

Answers (2)

Rouzbeh Zarandi
Rouzbeh Zarandi

Reputation: 1082

you can also set the item control panel to specific layout or panel

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

example

<Grid Margin="0 20 0 0">


                                        <ItemsControl ItemsSource="{Binding SourceCollection}">
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <WrapPanel />
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                            <ItemsControl.ItemTemplate>

                                                <DataTemplate>
                                                    <StackPanel Orientation="Horizontal">
                                                        <materialDesign:Card Width="200" Height="200" Margin="16">
                                                            <TextBlock Text="XX" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                                        </materialDesign:Card>
                                                    </StackPanel>
                                                   

                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>


                                        </ItemsControl>


                                </Grid>

Upvotes: 0

ChrisF
ChrisF

Reputation: 137108

If changing the ItemsPanel to a WrapPanel hasn't worked, it's because you still have an outer StackPanel:

<ControlTemplate x:Key="MyControlTemplate">
    <StackPanel x:Name="MyStackPanel" Orientation="Horizontal" Width="Auto" Margin="0,1,0,1" Background="{x:Null}">

This means that the ItemsPanel still thinks it has infinite width to deal with so won't actually wrap.

Either remove the outer StackPanel completely, replace it with some other container or limit it's width. I see nothing in your code that says to me you need that outer container so I'd simply remove it and go from there.

If it's still not wrapping there still must be another "infinite width" (i.e one that grows to fit it's contents) container somewhere in the visual tree. You;ll need to work outwards from this item until you find it.

Upvotes: 3

Related Questions