Xamarin表单中的网格布局

问题描述

当前，我有一个看起来像这样的ListView实现：

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

关于如何修改此设置的任何建议，以使输出显示在2列网格中，而不是等宽列，例如？

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

我正在使用Xamarin Forms v2.3.3

解决方法

如Jason所说，您可以升级XF版本并使用CollectionView及其ItemsLayout属性。

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

您可以参考更多doc。