如何使用 Grid 并创建它？答案

【问题标题】：How to use Grid and create this?如何使用 Grid 并创建它？
【发布时间】：2019-08-11 13:01:09
【问题描述】：

我想创建一个这样的视图：

。其中Contact1、Contact2 是models，ListView 是这些模型的列表。现在我有这样的代码，但我没有得到想要的输出。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="KiaiDay.Pages.ConviteEmailPage"
             NavigationPage.TitleView="Convive por email"
             NavigationPage.HasBackButton="True"
             NavigationPage.BackButtonTitle="Voltar"
             BackgroundColor="AliceBlue">

    <ContentPage.Content>
        <AbsoluteLayout>
            <ActivityIndicator x:Name="indicador" AbsoluteLayout.LayoutBounds="0.5,0.5,100,100" AbsoluteLayout.LayoutFlags="PositionProportional" Color="Blue"/>
            <StackLayout>
                <ListView  x:Name="ListaContactos">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout>
                                    <Image Source="{Binding Imagem}"/>
                                    <Label Text="{Binding Nome}"/>
                                    <Label Text="{Binding Email}"/>
                                    <Label Text="{Binding Numero}"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

【问题讨论】：

使用 CollectionView - docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
请记住，CollectionView 在 XF 3.6 中仍处于预览阶段，但从我的使用情况来看，它已经相当可靠了。此外，如果您只有一小部分不变的联系人集合，您可以在 `ScrollView 中使用 FlexLayout。

标签： xaml xamarin layout xamarin.forms

【解决方案1】：

正如杰森所说，您可以使用CollectionView 来做到这一点。但是，您应该注意：

CollectionView 目前是早期预览版，缺少许多计划中的功能。此外，API 会随着实现的完成而改变。

CollectionView 在 Xamarin.Forms 4.0-pre1 中可用。

如果版本没有问题，使用如下代码：(更新：在代码中添加框架)

<StackLayout Margin="20,35,20,20">
    <CollectionView ItemsSource="{Binding Monkeys}" >
        <CollectionView.ItemsLayout>
           <GridItemsLayout Orientation="Vertical"
                            Span="2" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout Padding="10">
                <Frame BackgroundColor="LightGray"
                       OutlineColor="Black"
                       CornerRadius="10">
                <Grid Padding="5" WidthRequest="120" HeightRequest="120">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                        <RowDefinition Height="25" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="120" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" 
                           Text="{Binding Name}" 
                           FontAttributes="Bold"
                           LineBreakMode="TailTruncation" />
                    <Image Grid.Row="1" 
                           Source="{Binding ImageUrl}" 
                           Aspect="AspectFill"
                           HeightRequest="60" 
                           WidthRequest="60" />
                    <Label Grid.Row="2" 
                           Text="{Binding Location}"
                           LineBreakMode="TailTruncation"
                           FontAttributes="Italic" 
                           VerticalOptions="End" />
                    <Label Grid.Row="3" 
                           Text="{Binding Details}"
                           LineBreakMode="TailTruncation"
                           FontAttributes="Italic" 
                           VerticalOptions="End" />
                </Grid>
                </Frame>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

参考official sample，绑定源：

BindingContext = new MonkeysViewModel();

这是应用的截图。

【讨论】：

也可以插入一个圆角框，里面包含所有元素？
@Kelve 是的，肯定可以。添加Frame，其中的所有元素都可以做到。我会更新答案。