Как реализовать макет .Net Maui CollectionView с вертикальными группами и горизонтальными элементами
Я пытаюсь добиться определенного вида в приложении, которое отображает элементы по категориям. Из того, что я узнал, это то, что CollectionView позволяет нам делать это, и я успешно использовал его в различных макетах. Проблема в том, что есть ровно один макет, которого я пытаюсь достичь, но который я нигде не нашел описанным и, следовательно, мне нужна помощь/руководство.
CollectionView позволяет нам использовать либо сетку, либо линейный макет, а также группировать объекты. Я хочу добиться того, чтобы элементы группы отображались как линейная горизонтальная коллекция, а категории располагались одна за другой вертикально. (как показано на прилагаемом удивительном рисунке).
Я перепробовал все возможные комбинации CollectionView (которые мне известны) и не смог добиться этого, и поэтому размышляю, придется ли мне на этом этапе создавать эту вещь полностью вручную или просто создать несколько экземпляров CollectionView для каждой категории.
Любая помощь будет оценена по достоинству. P.S: тихий новичок в .Net maui и мобильной разработке. но у меня есть знание xaml.
Я попытался создать одно основное представление коллекции с isgrouped=true и groupheaderlayout. затем в качестве шаблона элемента я попытался создать другое представление коллекции, которое снова принимает группу и работает как обычное горизонтальное представление коллекции, но это не сработало.
Ответы 1
Мне удалось это сделать, выполнив следующие действия:
- в ItemsGroupModel объявите список того же типа объекта и заполните его исходным.
public class AnimalsCategory : List<Animal> { public string GroupName { get; set; } public List<Animal> Animals { get; set; } public AnimalsCategory(string groupName, List<Animal> animals, string) : base(animals) { Animals = new List<Animal>(animals); } }
- ViewModel является базовым и соответствует рекомендуемому стилю .Net Maui (Примечание: я использую набор инструментов Mvvm для ObservableProperty и устанавливаю значение свойства, а не поля!)
public partial class AnimalsViewModel { [ObservableProperty] List<ShopItemsCategory> categories; public AnimalsViewModel(DataService ds) { Categories = ds.GetAnimalsInCategories(); } }
- Я позаботился о доступе к недавно определенному свойству «Животные» в XAML внутри подсписка.
<RefreshView Grid.Row = "1"> <ScrollView> <CollectionView ItemsSource = "{Binding Categories}"> <CollectionView.ItemTemplate> <DataTemplate x:DataType = "model:AnimalsCategory "> <StackLayout Orientation = "Vertical"> <Label Text = "{Binding GroupName}" FontAttributes = "Bold" FontSize = "28"/> <CollectionView ItemsSource = "{Binding Animals}" ItemsLayout = "HorizontalList" Background = "Transparent" Margin = "5"> <CollectionView.ItemTemplate> <DataTemplate x:DataType = "model:Animal"> <Frame CornerRadius = "20" Margin = "5,5,5,5" HasShadow = "True" BackgroundColor = "#FEF6FF" WidthRequest = "150" HeightRequest = "200"> <StackLayout Orientation = "Vertical" Grid.Row = "1" Margin = "0,0,0,0"> <Image Source = "{Binding Image}" Grid.Row = "0" HeightRequest = "60" WidthRequest = "60" Margin = "0,0,0,5"/> <Line Stroke = "LightGray" X2 = "300" StrokeThickness = "2"/> <Label Text = "{Binding Name}" > Margin = "0,5,0,0" FontAttributes = "Bold" VerticalOptions = "Center" HorizontalOptions = "Center"/> <Label Text = "{Binding > Description}" Margin = "0,10,0,0"/> </StackLayout> </Frame> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </StackLayout> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </ScrollView> </RefreshView>