.NET MAUI外部CollectionView中嵌套的另一个CollectionView无法垂直滚动。

huangapple go评论87阅读模式
英文:

.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: [
    {
        &quot;Name&quot;: &quot;Exterior&quot;,
        &quot;Photographs&quot;: [
            {
                &quot;Id&quot;: 561,
                &quot;Data&quot;: null,
                &quot;Description&quot;: &quot;20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/0&quot;
            },
            {
                &quot;Id&quot;: 562,
                &quot;Data&quot;: null,
                &quot;Description&quot;: &quot;20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/1&quot;
            },
            {
                &quot;Id&quot;: 563,
                &quot;Data&quot;: null,
                &quot;Description&quot;: &quot;20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/2&quot;
            }
        ]
    },
    {
        &quot;Name&quot;: &quot;Interior&quot;,
        &quot;Photographs&quot;: [
            {
                &quot;Id&quot;: 564,
                &quot;Data&quot;: null,
                &quot;Description&quot;: &quot;20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/0&quot;
            },
            {
                &quot;Id&quot;: 565,
                &quot;Data&quot;: null,
                &quot;Description&quot;: &quot;20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/1&quot;
            },
            {
                &quot;Id&quot;: 566,
                &quot;Data&quot;: null,
                &quot;Description&quot;: &quot;20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/2&quot;
            }
        ]
    }
]

The best way to present it I figured out so far is this way:

    &lt;StackLayout Orientation=&quot;Vertical&quot; Grid.Row=&quot;1&quot; Margin=&quot;15, 0&quot;&gt;
      &lt;CollectionView ItemsSource=&quot;{Binding Photographs}&quot; ItemsLayout=&quot;VerticalList&quot;&gt;
         &lt;CollectionView.ItemTemplate&gt;
            &lt;DataTemplate x:DataType=&quot;models:PhotographGroup&quot;&gt;
               &lt;StackLayout Orientation=&quot;Vertical&quot;&gt;
                 &lt;Label Text=&quot;{Binding Name}&quot; FontAttributes=&quot;Bold&quot; /&gt;
                   &lt;CollectionView ItemsSource=&quot;{Binding Photographs}&quot;
                     ItemsLayout=&quot;HorizontalList&quot;&gt;
                     &lt;CollectionView.ItemTemplate&gt;
                         &lt;DataTemplate x:DataType=&quot;models:Photograph&quot;&gt;
                            &lt;Image
                              Source=&quot;{Binding Data, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}&quot; 
                              WidthRequest=&quot;400&quot;
                              HeightRequest=&quot;300&quot; /&gt;
                        &lt;/DataTemplate&gt;
                    &lt;/CollectionView.ItemTemplate&gt;
                 &lt;/CollectionView&gt;
              &lt;/StackLayout&gt;
            &lt;/DataTemplate&gt;
         &lt;/CollectionView.ItemTemplate&gt;
       &lt;/CollectionView&gt;
    &lt;/StackLayout&gt;

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).

&lt;!-- Here are my other elements nested in parent grid --&gt;
&lt;Grid Grid.Row=&quot;2&quot;&gt;
    &lt;Grid.RowDefinitions&gt;
        &lt;RowDefinition Height=&quot;*&quot;/&gt;
    &lt;/Grid.RowDefinitions&gt;

    &lt;ScrollView Grid.Row=&quot;0&quot;&gt;
        &lt;CollectionView ItemsSource=&quot;{Binding Photographs}&quot;&gt;
            &lt;CollectionView.ItemTemplate&gt;
                &lt;DataTemplate x:DataType=&quot;models:PhotographGroup&quot;&gt;
                    &lt;StackLayout Orientation=&quot;Vertical&quot;&gt;
                        &lt;Label Text=&quot;{Binding Name}&quot; FontAttributes=&quot;Bold&quot; /&gt;

                        &lt;CollectionView ItemsSource=&quot;{Binding Photographs}&quot; ItemsLayout=&quot;HorizontalList&quot;&gt;
                            &lt;CollectionView.ItemTemplate&gt;
                                &lt;DataTemplate x:DataType=&quot;models:Photograph&quot;&gt;
                                    &lt;Image Source=&quot;{Binding Data, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}&quot; 
                                           WidthRequest=&quot;400&quot;
                                           HeightRequest=&quot;300&quot; /&gt;
                                &lt;/DataTemplate&gt;
                            &lt;/CollectionView.ItemTemplate&gt;
                        &lt;/CollectionView&gt;
                    &lt;/StackLayout&gt;
                &lt;/DataTemplate&gt;
            &lt;/CollectionView.ItemTemplate&gt;
        &lt;/CollectionView&gt;
    &lt;/ScrollView&gt;
&lt;/Grid&gt;
&lt;!-- Here are my other elements nested in parent grid --&gt;


huangapple
  • 本文由 发表于 2023年8月8日 20:34:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/76859626.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定