我对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在项目之间导航,并在选择项目时垂直滚动,我将非常感激。
谢谢。
1条答案
按热度按时间stszievb1#
您可以使用CollectionView来实现这一点,它非常简单:
在这里,ItemsLayout是你想如何将你的项目放置到视图中,ItemsSource是项目列表,MovieModel是你的模型项目(编译绑定加载列表更快)。
如果您有任何问题,请随时提问!有关CollectionView的更多信息,请访问:https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/?view=net-maui-7.0