Listview UI Design 4

 Listview UI Design

In this tutorial we will learn how to design listview with image.

Listview is the most commonly used scrolling widget. It display its children one after another in scroll direction.

We have four listview designs:

1. Design 1: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-1.html
2. Design 2: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-2.html
3. Design 3: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-3.html
4. Design 4: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-4.html

Xaml Code

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:views="clr-namespace:ListviewUIDesigns.Views.Template"
             x:Class="ListviewUIDesigns.Views.ListViewDesign4"
             BackgroundColor="LightGray"
             Title="ListView Design 4">
    <ContentPage.Content>
        <StackLayout Padding="10">
            <ListView x:Name ="listView" HasUnevenRows="True" SeparatorVisibility="None" ItemSelected="listView_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell >
                            <views:Design4Template></views:Design4Template>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Design 4 Template

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ListviewUIDesigns.Views.Template.Design4Template">
    <ContentView.Content>
        <StackLayout Padding="5" >
            <Frame x:Name="frame" HasShadow="True" CornerRadius="20"  Padding="0">
                <Grid HorizontalOptions="FillAndExpand" BackgroundColor="White" Padding="10"  >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    
                    <Frame Grid.Column="0" HasShadow="False" VerticalOptions="Start" HeightRequest="70"  WidthRequest="70" CornerRadius="100" Padding="0">
                        <Image Source="{Binding Img}" Aspect="AspectFill"></Image>
                    </Frame>
                    <StackLayout Grid.Column="1"  Spacing="0" Padding="5" >
                        <Label Text="{Binding Name}" FontAttributes="Bold" HorizontalOptions="FillAndExpand" TextColor="Black"></Label>
                        <Label Text="{Binding Description}" HorizontalOptions="FillAndExpand" TextColor="Black"></Label>
                    </StackLayout>
                    <StackLayout Grid.Column="2"  Spacing="0" WidthRequest="60" Padding="0" VerticalOptions="CenterAndExpand">
                        <Label Text="{Binding Day}" FontAttributes="Bold" FontSize="20" TextColor="Black" HorizontalOptions="Center"></Label>
                        <Label Text="{Binding Month}"  TextColor="Black" HorizontalOptions="Center"  ></Label>
                    </StackLayout>
                </Grid>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>