Question

我有一个ItemsStrol，其ItemsSource是Binded。我按照下面对它进行编码，以便将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的Path。请参阅下面的代码片段，有时可以帮助您解决问题

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

用于包装DataBinded ItemsControl的水平stackpanel

1 个答案: