切换CollectionView布局后项被拉伸至屏幕宽度的问题排查

我正在实现一个「查看更多」按钮，用来切换条目显示模式：

• 「更少」模式：水平列表，可同时展示多个条目
• 「更多」模式：垂直双列网格，占满整个屏幕

初始启动时布局正常，能显示多个条目，但切换为垂直布局后再切回水平布局，所有条目会占用远超预期的空间。

所用CollectionView的XAML代码 #

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

切换布局的按钮后台代码 #

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;

    }
}

内容的提问来源于stack exchange，提问作者user23693962