Customise ListView using Xamarin Forms - xamarin

Question

Is it possible to create a `ListView' like the attached screen shot using Xamarin Forms.

Answer 1

Try this:
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding image}" WidthRequest="50" HeightRequest="50" Grid.Column="0" VerticalOptions="Center"/>
<StackLayout Grid.Column="1">
<Label Text="{Binding property1}" TextColor="#f35e20" HorizontalTextAlignment="Center"/>
</StackLayout>
<StackLayout Grid.Column="2">
<Label Text="{Binding property2}" HorizontalTextAlignment="Center" TextColor="#503026"/>
</StackLayout>
<StackLayout Grid.Column="3">
<Label Text="{Binding property3}" HorizontalTextAlignment"Center" TextColor="#503026"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You can use https://github.com/jamesmontemagno/ImageCirclePlugin to create circular image for the first column.

Answer 2

To design something like this, you can take a Grid layout with 1 row and 4 column.
In 1st column: you can draw shape like this:How To Draw a circle with a text in the center using Xamarin Forms C# Without using custom-renderer?
<Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Start" Margin="0" Padding="0" BackgroundColor="Maroon">
<Label Text="7" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
In other columns, you can have Stacklayout with padding 1 and BackgroundColor black applied in it, containing Label with BackgroundColor Blue and text in it.
Hope this may solve your issue.