英文:
.NET MAUI Outer CollectionView with another collectionView inside doesn't scroll vertically
问题
我想创建一个照片画廊。数据看起来像这样("Data":实际上是byte[]):
PhotographGroup: [
{
"Name": "Exterior",
"Photographs": [
{
"Id": 561,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/0"
},
{
"Id": 562,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/1"
},
{
"Id": 563,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/2"
}
]
},
{
"Name": "Interior",
"Photographs": [
{
"Id": 564,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/0"
},
{
"Id": 565,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/1"
},
{
"Id": 566,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/2"
}
]
}
]
到目前为止,我找到的最好的展示方式是这样的:
<StackLayout Orientation="Vertical" Grid.Row="1" Margin="15, 0">
<CollectionView ItemsSource="{Binding Photographs}" ItemsLayout="VerticalList">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:PhotographGroup">
<StackLayout Orientation="Vertical">
<Label Text="{Binding Name}" FontAttributes="Bold" />
<CollectionView ItemsSource="{Binding Photographs}" ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Photograph">
<Image
Source="{Binding Data, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}"
WidthRequest="400"
HeightRequest="300" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
两个ScrollView是为了解决我想尝试的在两个方向上都移动的ScrollView问题(基于另一个与此问题非常相似的StackOverflow问题,但没有提供可行的答案)。
已经使用了Grid,在ScrollView中使用了ScrollView,但会生成一个maui错误。基本上,我想看到一个画廊,其中主列表中的对象相互叠放,每个对象(部分)中的图片水平显示。
英文:
I'd like to make a gallery of photos. Data looks like this ("Data": null is byte[] in real situation):
PhotographGroup: [
{
"Name": "Exterior",
"Photographs": [
{
"Id": 561,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/0"
},
{
"Id": 562,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/1"
},
{
"Id": 563,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/2"
}
]
},
{
"Name": "Interior",
"Photographs": [
{
"Id": 564,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/0"
},
{
"Id": 565,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/1"
},
{
"Id": 566,
"Data": null,
"Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/2"
}
]
}
]
The best way to present it I figured out so far is this way:
<StackLayout Orientation="Vertical" Grid.Row="1" Margin="15, 0">
<CollectionView ItemsSource="{Binding Photographs}" ItemsLayout="VerticalList">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:PhotographGroup">
<StackLayout Orientation="Vertical">
<Label Text="{Binding Name}" FontAttributes="Bold" />
<CollectionView ItemsSource="{Binding Photographs}"
ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Photograph">
<Image
Source="{Binding Data, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}"
WidthRequest="400"
HeightRequest="300" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Two scrollViews is a walkaround for scrollView not moving in both direction that I wanted to try out (based on another stackOverflow question that is pretty similar to this one, but that doesn't provide workable answer).
Have already used grid, ScrollView in the ScrollView which generates a maui error. Basically I want to see gallery where objects in the main list are positioned one above another and pictures in every object (section) are displayed horizontally.
答案1
得分: 0
这是解决方案。
基本上,我尝试了来自大多数StackOverflow和GitHub/Maui问题的所有可能的解决方案。CollectionView必须嵌套在另一个允许扩展视图的Grid中。然后,您必须添加ScrollView使其可滚动,尽管这不被推荐并且不应该使用(MS Docs)。
<!-- 这是嵌套在父Grid中的其他元素 -->
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollView Grid.Row="0">
<CollectionView ItemsSource="{Binding Photographs}">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:PhotographGroup">
<StackLayout Orientation="Vertical">
<Label Text="{Binding Name}" FontAttributes="Bold" />
<CollectionView ItemsSource="{Binding Photographs}" ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Photograph">
<Image Source="{Binding Data, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}"
WidthRequest="400"
HeightRequest="300" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</Grid>
<!-- 这是嵌套在父Grid中的其他元素 -->
英文:
Here's the solution.
Basically I tried every possible solution from most StackOverflow and GitHub/Maui questions. The CollectionView has to be nested in another Grid that allows to expand the view. Then you have to add ScrollView to make it scrollable, even though it's not recommended and shouldn't be used (MS Docs).
<!-- Here are my other elements nested in parent grid -->
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollView Grid.Row="0">
<CollectionView ItemsSource="{Binding Photographs}">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:PhotographGroup">
<StackLayout Orientation="Vertical">
<Label Text="{Binding Name}" FontAttributes="Bold" />
<CollectionView ItemsSource="{Binding Photographs}" ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Photograph">
<Image Source="{Binding Data, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}"
WidthRequest="400"
HeightRequest="300" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</Grid>
<!-- Here are my other elements nested in parent grid -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论