.NET MAUI: CollectionViewでスクロールできない

.NET MAUI

2024.01.242024.01.20

この記事は約6分で読めます。

.NET MAUIでAndroidアプリを開発している際、CollectionViewでスクロールできない現象が見られた。いろいろ試した結果、レイアウトを見直すことで、CollectionViewのスクロールができるようになった。

CollectionViewでスクロールができない
レイアウトを見直した結果、スクロールが可能に！
まとめ

CollectionViewでスクロールができない

.NET MAUI（.NET8）で、CollectionViewにItemを表示させるコードを書いて、Andoroidエミュレーターで動かしてみたところ、なぜか下方向にスクロールできない。

その時のxamlファイルは、以下の通り。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">

    <VerticalStackLayout>
        <CollectionView ItemsSource="{Binding Notes}"
                        SelectionMode="Single"
                        SelectionChanged="CollectionView_SelectionChanged">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Text}" FontSize="22"/>
                        <Label Text="{Binding Date}" FontSize="14" TextColor="Silver"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>

</ContentPage>

その時の様子。なぜかスクロールできない。

レイアウトを見直した結果、スクロールが可能に！

レイアウトを見直し、CollectionViewを囲む「VerticalStackLayout」を「Grid」にすると、スクロールができるようになった。

スクロールが可能な時のxamlファイル。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">

    <Grid>
        <CollectionView ItemsSource="{Binding Notes}"
                        SelectionMode="Single"
                        SelectionChanged="CollectionView_SelectionChanged">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Text}" FontSize="22"/>
                        <Label Text="{Binding Date}" FontSize="14" TextColor="Silver"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>

</ContentPage>

その時の様子。スクロールできるようになった。

MicrosoftのサイトのCollectionViewの説明を見ると、以下の記載があった。
今回の状況と一致している。スクロールができないのは、VerticalStackLayoutが原因のようだ。

Placing a CollectionView inside a VerticalStackLayout can stop the CollectionView scrolling, and can limit the number of items that are displayed. In this situation, replace the VerticalStackLayout with a Grid.
https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/scrolling?view=net-maui-8.0

まとめ

.NET MAUIのCollectionViewでスクロールができない場合には、CollectionViewをVerticalStackLayoutで囲っていないかを確認してみると良い。
囲っていた場合には、VerticalStackLayoutをGridに変更することで、スクロールができるようになる。