CODEWITHSUNDEEP
xamarinxamarin.androidxamarin.ios
A. Vreeswijk
A. Vreeswijk

Reputation: 954

Xamarin Create ListView with image, text and icon buttons

I have a question.

I am trying to make a ListView with a list of employees. On the left side I want an accepted and dennied button, at the top the employee name and at the bottom of the image I want to add them to my favorite and share them. Can someone help me get started with the design of the listview, because it is pretty difficult?

This is what I want at the end:

enter image description here

Upvotes: 0

Views: 988

Answers (1)

Yurii Kyrychenko
Yurii Kyrychenko

Reputation: 54

It's all what you need for xaml

<ListView>
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell>
             <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Text="Employee Name" Grid.Column="1" Grid.Row="0" HorizontalOptions="Start"/>
                <Image Source="image_ok" VerticalOptions="End" Grid.Row="1" Grid.Column="0"/>
                <Image Source="image_decline" VerticalOptions="Start" Grid.Row="2" Grid.Column="0"/>
                <Image Source="profile" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
                <Image Source="star" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start"/>
                <Image Source="plane" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
                <Image Source="upload" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
            </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

and you can check this doc https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/customizing-cell-appearance

Upvotes: 1

Related Questions