.Net Maui(XAML)垂直网格视图布局

guykilcj  于 2023-03-06  发布在  .NET
关注(0)|答案(1)|浏览(267)

我对Xamarin/. Net Maui开发非常陌生。我正在开发一个电影应用程序(最初将针对宽屏)。我正在尝试创建一个可滚动的垂直网格视图来显示电影列表,类似于下面的布局

我开始与CollectionView,但我无处接近所需的输出。我想有方向键(D-Pad)支持,以便每个单独的项目可以使用D-Pad聚焦。此外,网格中的每个项目需要点击,以便我可以导航到电影详细信息视图。此外,当项目被选中,我需要不同的样式,该项目(就像在图像中一样,所选项目具有白色背景)。
下面是我当前的XAML

<CollectionView ItemSizingStrategy="MeasureAllItems"
                    ItemsLayout="VerticalGrid, 6"
                    ItemsSource="{Binding Movies}"
                    SelectedItem="{Binding SelectedMovie, Mode=TwoWay}"
                    SelectionMode="Single"
                    SelectionChangedCommand="{Binding GetMovieDetailsCommand}"
                    SelectionChangedCommandParameter="{Binding SelectedItem, Source={RelativeSource Self}}">                        
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="200"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Image
                        AutomationId="ImageViewCell"
                        WidthRequest="500"
                        Source="{Binding PosterPath}" />
                    <StackLayout 
                        Grid.Row="1"
                        Margin="5" Orientation="Vertical">
                        <Label Text="{Binding Title}"
                            AutomationId="LabelTitle"
                            LineBreakMode="NoWrap"
                            Style="{DynamicResource ListItemTextStyle}"
                            FontSize="10" />
                    </StackLayout>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

下面是我的输出。

如果有人能指导我或为我提供如何实现此功能的示例,以便我可以使用D-Pad在项目之间导航,并在选择项目时垂直滚动,我将非常感激。
谢谢。

stszievb

stszievb1#

您可以使用CollectionView来实现这一点,它非常简单:

<CollectionView BackgroundColor="White"
                ItemsSource="{Binding Movies}"
                Margin="5">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical"
                             Span="2"
                             VerticalItemSpacing="5"
                             HorizontalItemSpacing="5" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="vm:MovieModel">
          <--!Design here--> 
        </DataTemplate>
<CollectionView>

在这里,ItemsLayout是你想如何将你的项目放置到视图中,ItemsSource是项目列表,MovieModel是你的模型项目(编译绑定加载列表更快)。
如果您有任何问题,请随时提问!有关CollectionView的更多信息,请访问:https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/?view=net-maui-7.0

相关问题