Listview UI Design 1

Listview UI Design

Please, support my blog by clicking on our sponsors ad!

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

Design 1 Template

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ListviewUIDesigns.Views.Template.Design1Template">
    <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>
                <StackLayout Grid.Column="0"  Spacing="0" WidthRequest="100" BackgroundColor="Purple" 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>