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会随着实施的完成而发生变化。

在{strong> Xamarin.Forms 4.0-pre1 中可以使用CollectionView。

如果版本没有问题，请按以下方式使用代码：（更新：将框架添加到代码中）

<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();

这是应用程序的捕获图像。

如何使用网格并创建它？

1 个答案: