用于包装 DataBinded ItemsControl 的水平堆栈面板

Question

我有一个 ItemsControl 绑定了 ItemsSource。我按照下面的代码对其进行了编码，以便它将 UserControl（显示不同的项目）添加到具有水平方向的 StackPanel 中，然后包含一个包裹面板来包裹里面的项目，但它不起作用。所有项目都在显示，但它们都在一行上，并且在需要时不会换行。

如何修复此代码以包含包装？

    <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

我通过为 WrapPanel 设置 Width 解决了这个问题。在下面的 sn-p 中，我将 WrapPanel 宽度绑定到其名为 MainGrid 的父网格控件，并将 Path 绑定到其 ActualWidth。请参阅下面的 sn-p 有时会帮助您解决问题

<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>