水平堆叠面板DataBinded ItemsControl

Question

我有一个ItemsControl的ItemsSource绑定。我按照下面的代码编写它，以便它将UserControl（显示不同的项目）添加到一个水平方向的StackPanel，然后包含一个wrappanel来包装项目，但它不工作。所有的项目都显示出来，但它们都在同一行，并且在需要时不会换行到新行。

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

<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这个问题。在下面的代码片段中，我将WrapPanel宽度绑定到名为MainGrid的Parent Grid控件和其ActualWidth的路径。请参阅下面的代码片段可以帮助你有时解决你的问题

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