Grid layout in Xamarin Forms

Question

Currently, I've got a ListView implementation that looks something like this:

{Alert1}
{Alert2}
{Alert3}
{Alert4}
{Alert5}
{Alert6]
{Alert7}

xaml:

<ListView Grid.Row="4" 
          ItemsSource="{Binding Alerts}" 
          HasUnevenRows="True" 
          VerticalOptions="Start"
          SeparatorVisibility="None" Margin="10,0"
          x:Name="AlertsList">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Frame BackgroundColor="#333333" Margin="0,5" Padding="5">
                    <StackLayout Margin="0" Padding="0">
                        <Label 
                            Text="{Binding Name, Mode=OneWay}" 
                           FontAttributes="Bold"
                           FontSize="Large"
                           HorizontalOptions="Center"
                           Margin="0" />
                        <Label 
                            Text="{Binding Value, Mode=OneWay}" 
                            HorizontalOptions="Center"
                            FontSize="Medium"
                            Margin="0" />
                    </StackLayout>
                </Frame>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Any suggestion on how to modify this so that the output is displayed in a 2 column grid instead with equal width columns such as?

{Alert1}{Alert2}
{Alert3}{Alert4}
{Alert5}{Alert6]
{Alert7}

I'm using Xamarin Forms v2.3.3

CollectionView supports this layout. But you'll need to upgrade - v2.3 is 4 years old — Jason

Leo Zhu - MSFT Leo Zhu - MSFT · Accepted Answer · 2020-08-11T01:19:28

As Jason said,you could upgrade your XF version and use CollectionView with its ItemsLayout property.

<CollectionView ItemsSource="{Binding Alerts}"
            ItemsLayout="VerticalGrid, 2">
   <CollectionView.ItemTemplate>
      <DataTemplate>
         <Frame BackgroundColor="#333333" Margin="0,5" Padding="5">
                <StackLayout Margin="0" Padding="0">
                    <Label 
                        Text="{Binding Name, Mode=OneWay}" 
                       FontAttributes="Bold"
                       FontSize="Large"
                       HorizontalOptions="Center"
                       Margin="0" />
                    <Label 
                        Text="{Binding Value, Mode=OneWay}" 
                        HorizontalOptions="Center"
                        FontSize="Medium"
                        Margin="0" />
                </StackLayout>
            </Frame>
      </DataTemplate>
   </CollectionView.ItemTemplate>
</CollectionView>

The more you could refer to the doc.

Grid layout in Xamarin Forms

1 Answers