Horizontal stackpanel to wrap DataBinded ItemsControl

Question

I have an ItemsControl for which the ItemsSource is Binded. i coded it as per the below so that it would add the UserControl (showing the different items) to a StackPanel with a horizontal orientation that then contains a wrappanel to wrap the items inside but it is not working. All of the items are showing but they are all on one line and do not wrap to a new line when needed.

How can this code be fixed to include wrapping?

    <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto"
                   Grid.Column="0" Grid.Row="1">
        <ItemsControl x:Name="tStack"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto"
                      ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1"
                  ItemsSource="{Binding Items.View}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel x:Name="stckPnl" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                    <StackPanel>
                        <WrapPanel>
                        <Viewbox HorizontalAlignment="Left" Height="400">
                            <Controls1:MyItemsUserControl Padding="5"/>
                        </Viewbox>
                        </WrapPanel>
                    </StackPanel>
                </DataTemplate>
        </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>

Answer 1

I have solved this issue by setting Width for WrapPanel. In below snippet i have binded WrapPanel width to its Parent Grid control named MainGrid and Path to its ActualWidth. Please see below snippet will helps you sometimes to solve your issue

<ItemsControl Name="ThemesItemControl" 
                  Grid.Column="1"
                  Grid.Row="1"
                  ItemsSource="{Binding InstalledCollection}" 
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch"
                  BorderThickness="0.5">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" 
                               VerticalAlignment="Top" 
                               Width="{Binding ElementName=MainGrid, Path=ActualWidth}"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Button Width="210"
                            Height="260"
                            Margin="20"
                            Tag="{Binding ID}"
                            Command="{Binding DataContext.ThemeSelectCommand,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window}}}" 
                            CommandParameter="{Binding RelativeSource={RelativeSource Self}}">
                        <StackPanel>
                            <Image Source="{Binding TileImage}"/>
                        </StackPanel>
                    </Button>
                    <TextBlock Text="{Binding Title}" 
                             FontWeight="ExtraBold" 
                             HorizontalAlignment="Center"
                             FontSize="15" 
                             FontFamily="Segoe Print"
                             Foreground="Red"/>
                    <TextBlock Text="{Binding Description}" 
                               HorizontalAlignment="Center" 
                               FontSize="13"
                               FontFamily="Segoe Print"
                               Foreground="Red"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

    </ItemsControl>