Как использовать Grid и создать это?

Question

Я хотел бы создать вид, подобный этому:

.Где 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>

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

См. официальный образец , источник привязки:

BindingContext = new MonkeysViewModel();

Вот изображение захвата приложения.