如何显示一些图像双宽度的图像列表

Question

我正在尝试在我的 Xamarin 项目中实现这一点

所以我想要的是像这样显示我的 Category 实体中的图像，有些会水平扩展，有些会在一行中显示两个。

我目前的成就是这样的。

这是我的代码

<?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="AppCrijoya.Views.CategoryPage">
    <ContentPage.Content>

        <StackLayout>

            <ListView x:Name="listTemp" HasUnevenRows="True" IsPullToRefreshEnabled="False" ItemTapped="ListViewCategorias_ItemTapped" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start" HeightRequest="270" RowSpacing="6">
                                <Image Source="{Binding Image}" Aspect="Fill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

        </StackLayout>
    </ContentPage.Content>

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="CERRAR SESIÓN" Clicked="Logout_Clicked"/>
    </ContentPage.ToolbarItems>
    
</ContentPage>

请帮忙，我是 Xamarin 的新手，我仍在努力了解视图的工作原理。

Answer 1

你可以简单地使用Grid来实现这个layout.If你想要一些图像更小，你可以为图像设置Margin="10,3,3,3" 属性。

以下是供您参考的代码片段：

  <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" ></RowDefinition>
            <RowDefinition Height="*" ></RowDefinition>
            <RowDefinition Height="*" ></RowDefinition>
            <RowDefinition Height="*" ></RowDefinition>
            <RowDefinition Height="*" ></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Image  Margin="10,10,10,6" Background="aqua" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  Aspect="AspectFit" Source="XamarinLogo.png"></Image>
        <Image Margin="10,3" Background="aqua" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Source="XamarinLogo.png"></Image>

        <Image  Margin="10,3,3,3"   Grid.Row="2" Grid.Column="0" Aspect="AspectFill" Source="https://m.media-amazon.com/images/I/71sNNCTfMuL._FMwebp__.jpg"></Image>
        <Image Margin="0,3,3,3" Grid.Row="2"  Grid.Column="1" Aspect="AspectFill" Source="https://m.media-amazon.com/images/I/71sNNCTfMuL._FMwebp__.jpg"></Image>

        <Image Margin="10,3,3,3" Background="green" Grid.Row="3" Grid.Column="0" Source="XamarinLogo.png"></Image>
        <Image Margin="0,3,3,3"  Background="green" Grid.Row="3"  Grid.Column="1" Source="XamarinLogo.png"></Image>

        <Image Margin="10,3,3,6" Background="black" Grid.Row="4" Grid.Column="0" Source="XamarinLogo.png"></Image>
        <Image Margin="0,3,3,6" Background="black" Grid.Row="4"  Grid.Column="1" Source="XamarinLogo.png"></Image>

    </Grid>

MS官方参考link： https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding

如何显示一些图像双宽度的图像列表

How to display list of images with some images double-width

listview

xamarin.forms