Listview UI Design 2

Listview UI Design - 2

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.ListViewDesign2"
             BackgroundColor="LightGray"
             Title="ListView Design 2">
    <ContentPage.Content>
        <StackLayout Padding="10">
            <ListView x:Name ="listView" HasUnevenRows="True" SeparatorVisibility="None" ItemSelected="listView_ItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell >
                            <views:Design2Template></views:Design2Template>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Design2Template.xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ListviewUIDesigns.Views.Template.Design2Template">
    <ContentView.Content>
        <StackLayout Padding="5" >
            <Frame x:Name="frame" HasShadow="True" CornerRadius="20" Padding="0">
                <Grid HorizontalOptions="FillAndExpand" BackgroundColor="White" VerticalOptions="FillAndExpand" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Path Grid.Column="0" Fill="Purple" WidthRequest="100" HeightRequest="100" 
                          Data="m315.41999,148.26002l70.99999,0l0,0c39.21222,0 70.99999,28.65378 70.99999,64c0,35.34623 -31.78777,64 -70.99999,64l-70.99999,0l0,-128z"
                      Stroke="Purple" Aspect="Fill"></Path>
                    <StackLayout Grid.Column="0"  Spacing="0" WidthRequest="100"  Padding="10" >
                        <Label Text="{Binding Day}" FontAttributes="Bold" FontSize="20" TextColor="White" VerticalOptions="CenterAndExpand" HorizontalOptions="Center"></Label>
                        <Label Text="{Binding Month}"  TextColor="White" HorizontalOptions="Center" VerticalOptions="StartAndExpand" ></Label>
                    </StackLayout>
                    <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" Padding="10" VerticalOptions="FillAndExpand">
                        <Label Text="{Binding Name}" FontAttributes="Bold" TextColor="Black"></Label>
                        <Label Text="{Binding Description}" TextColor="Black"></Label>
                    </StackLayout>
                </Grid>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>