CODEWITHSUNDEEP
listviewxamarin.forms
user18972374
user18972374

Reputation:

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

I'm trying to achieve this on my Xamarin project

enter image description here

So what I want is to display my images from my Category entity like this, some would expand horizontally and some would be displayed by two in one row.

What I have achieved so far is this.

enter image description here

Here is my code

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

Please help, I'm new to Xamarin and I'm still trying to understand how the views work.

Upvotes: 0

Views: 162

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10148

You could simply use Grid to achieve this layout.If you want some Images to be smaller,you could set Margin="10,3,3,3" property for the image.

Below is the code snippet for your reference:

  <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 official reference link: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

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

enter image description here

Upvotes: 0

Related Questions