Search code examples
xamllistviewxamarin.formscardview

How to use a Frame as the root element of a ListView in Xamarin.Forms?


I am trying to achieve a list of Card-like records for the timeline on an application built in Xamarin.Forms, this is the layout that more or less I need to replicate:

enter image description here

I think I am close, I have two records on my code behind that I assign as the ItemSource to a listView on the XAML side, and this is my result so far:

enter image description here

But as you can see, the elements are not showing at all inside their frame, if I replace the form controls with TextCells or ImageCells, the data shows fine. This is the XAML code I have so far:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Title="AudioBitts" 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AudioBitts"
    x:Class="AudioBitts.TimelinePage">

    <ListView x:Name="listView">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell Height="300">
                    <Frame HasShadow="true" Margin="5">
                        <StackLayout>
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding UserAvatar}" />
                                <Label Text="{Binding UserName}" />
                            </StackLayout>
                            <Image Source="{Binding BittImage}" />
                        </StackLayout>
                    </Frame>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

Am I missing something on the structure I am giving to my XAML code? Thanks!


Solution

  • You can set ListView.RowHeight or set ListView.HasUnevenRow to allow the data to be displayed in full.