C＃UWP在ScrollViewer中显示x个ListView

Question

所以我很不确定如何处理这张照片。 我认为他们在这里有一个ScrollView，并且在ScrollView中有不同的ListViews。

如何显示未知数量的ListViews组织？

我甚至卡在部分上如何仅显示9张图片，其中一张图片很大。 我得到的只是：

<ScrollViewer Grid.Row="3" 
              Grid.RowSpan="1"
              Grid.Column="0"
              Grid.ColumnSpan="4">
                            <GridView Background="#fafafa"
                                      SelectedItem="{Binding SelectedMovie,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                      ItemsSource="{Binding Path=FilteredMoviesList, UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"
                                      IsSwipeEnabled="True">
                                <GridView.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Margin="3"
                                              Width="120" 
                                              Height="120">

                                            <Grid>
                                                <Rectangle Opacity="1" 
                                                           Fill="White"
                                                           Height="120"
                                                           Width="120"/>
                                                <Image Source="{Binding ImgSource}" 
                                                       Width="120"
                                                       Height="190"
                                                       HorizontalAlignment="Center"
                                                       VerticalAlignment="Center"/>
                                                <Border BorderBrush="#161616" 
                                                        Background="#16161601" 
                                                        Opacity="0.9"
                                                        BorderThickness="0.1">
                                                    <StackPanel VerticalAlignment="Bottom"
                                            Background="#000000">
                                                        <TextBlock Text="{Binding Name}"
                                               Foreground="#f2f2f2"
                                               HorizontalAlignment="Center"
                                               FontWeight="Bold"
                                               TextWrapping="Wrap"
                                               Margin="2"
                                               MaxWidth="120"
                                               FontSize="13"/>
                                                        <TextBlock Text="{Binding DateOfShot}"
                                               Foreground="#f2f2f2"
                                               FontWeight="SemiBold"
                                               HorizontalAlignment="Right"
                                               FontSize="10"
                                               Margin="0,0,10,0"/>
                                                    </StackPanel>
                                                </Border>
                                                <Rectangle Width="120"
                                           Height="120"
                                           Fill="#000000"
                                           Opacity="0.1"/>
                                            </Grid>
                                        </Grid>
                                    </DataTemplate>
                                </GridView.ItemTemplate>
                            </GridView>

                        </ScrollViewer>

显示所有项目

Answer 1

实现此布局有三个步骤

第1步：

使用Hub Control来执行此操作。

这是一个示例图像。资料来源：Hub control/pattern

语法

<Image>

第2步：

显示一个大图像和一个小图像

在StackPanel的GridView或VariableSizedWrapGrid

中显示<DataTemplate> <StackPanel Orientation="Horizontal"> <Image/> <GridView/> </StackPanel> </DataTemplate> 中的大图像和剩余的8

GridView

第3步：

限制ItemsSource中的项目数量是更改<Page.Resources> <local:MyConverter x:Key="MyConverter"/> </Page.Resources> <GridView ItemsSource="{x:Bind ItemsSourceCollection, Converter={StaticResource MyConverter}}"/> 。为此，您可以使用转换器。

在XAML中

public class MyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (value as ObservableCollection<ItemSource>).Take(8);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

在代码背后

{{1}}

有关详细信息：Hub control/pattern，Hub Class，HubSection Class

对于示例项目：XamlUIBasics