I am trying to make a “See more” button display more, or less items. “Less” is defined as a horizontal list displaying multiple items at a time, whilst “More” is a vertical 2 column grid that takes up the entire screen. The initial starting layout is fine on bootup and displays multiple items, however when I expand and make it vertical, and then back to horiztonal, all items occupy significantly more space.

The XAML I tried for the CollectionView:

<CollectionView
    ItemsSource="{Binding FoodPlace}"
    x:Name="CollectionviewFoodplaces"
    HorizontalOptions="Start"
    ItemsLayout="HorizontalList"
    SelectionMode="Single">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="foodgrid" RowDefinitions="100,50" ColumnDefinitions="150" MaximumWidthRequest="150">
                <Image Source="{Binding Icon}"
                       x:Name="Icon_"
                       WidthRequest="150"
                       Grid.RowSpan="2" 
                       Grid.Column="0"
                       Margin="2"/>
                <Label Text="{Binding Path=Pin.Label}" 
                       x:Name="Labell"
                       Grid.Row="1" 
                       Margin="2" 
                       HorizontalOptions="Center"
                       FontSize="Body" 
                       FontAttributes="Bold"
                       WidthRequest="150"
                       Grid.Column="0"/>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

The codebehind for the button to switch between more and less:

 public static GridItemsLayout seemorelayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical);
...
...
...
 private void buttonFoodplaceSeeMore_Clicked(object sender, EventArgs e)
 {
     SeeMoreFood = !SeeMoreFood;
     if (SeeMoreFood == true)
     {
         buttonFoodplaceSeeMore.Text = "See Less <";
         CollectionviewFoodplaces.ItemsLayout = seemorelayout;

     }
     if (SeeMoreFood == false)
     {
         buttonFoodplaceSeeMore.Text = "See More >";
         CollectionviewFoodplaces.ItemsLayout = LinearItemsLayout.Horizontal;

     }
 }