CollectionView ItemsLayout change number of columns

Schinwinkwinsky 21 Reputation points
2022-06-28T12:59:31.58+00:00

Hello, everybody!

Guys, I'm trying to change the number of columns of a CollectionView using AdaptiveTriggers, but I'm not success. Can you help me, please?

...  
<ContentPage.Resources>  
        <ResourceDictionary>  
            <toolkit:TextCaseConverter x:Key="TextCaseConverter" Type="FirstUpperRestLower"/>  
        </ResourceDictionary>  
        <Style TargetType="CollectionView">  
            <Setter Property="VisualStateManager.VisualStateGroups">  
                <VisualStateGroupList>  
                    <VisualStateGroup>  
                        <VisualState x:Name="Small">  
                            <VisualState.StateTriggers>  
                                <AdaptiveTrigger MinWindowWidth="0"/>  
                            </VisualState.StateTriggers>  
                            <VisualState.Setters>  
                                <Setter Property="ItemsLayout" Value="VerticalGrid, 2"/>  
                            </VisualState.Setters>  
                        </VisualState>  
                        <VisualState x:Name="Medium">  
                            <VisualState.StateTriggers>  
                                <AdaptiveTrigger MinWindowWidth="800"/>  
                            </VisualState.StateTriggers>  
                            <VisualState.Setters>  
                                <Setter Property="ItemsLayout" Value="VerticalGrid, 3"/>  
                            </VisualState.Setters>  
                        </VisualState>  
                    </VisualStateGroup>  
                </VisualStateGroupList>  
            </Setter>  
        </Style>  
    </ContentPage.Resources>  
  
    <Grid>  
        <RefreshView Command="{Binding RefreshPokemonsCommand}"   
                     IsRefreshing="{Binding IsRefreshing}">  
            <CollectionView ItemsSource="{Binding Pokemons}"  
                            ItemsLayout="VerticalGrid, 2"  
                            RemainingItemsThreshold="4"  
   ...  
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,934 questions
0 comments No comments
{count} votes

Accepted answer
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 35,826 Reputation points Microsoft Vendor
    2022-06-29T09:48:24.853+00:00

    Hello,

    You could remove ItemsLayout property in CollectionView , it is always 2 columns now. Then you can change MinWindowWidth from 800 to 320, and test again, 800 is a little wide for iOS and Android device( you can test on ipad).

    <CollectionView ItemsSource="{Binding Pokemons}"  
                                 ItemsLayout="VerticalGrid, 2"// remove  
                                 RemainingItemsThreshold="4"  
        ...  
    

    It works on iOS and Android, the number of columns is 3, the color has been triggered as well.

                       <VisualState x:Name="Medium">  
                        <VisualState.StateTriggers>  
                            <AdaptiveTrigger MinWindowWidth="320"/>  
                        </VisualState.StateTriggers>  
                        <VisualState.Setters>  
                            <Setter Property="BackgroundColor" Value="Yellow"></Setter>  
                            <Setter Property="ItemsLayout" Value="VerticalGrid, 3"/>  
                        </VisualState.Setters>  
                    </VisualState>  
    

    But it doesn't work on Windows, the number of columns has not changed. There is known issue CollectionView does not update when changing ItemsLayout #7747 and #7242, you could follow the progress.

    Best Regards,
    Wenyan Zhang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.