水平堆疊面板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>