CODEWITHSUNDEEP
xamarin.formscardview
Multitut
Multitut

Reputation: 2169

CardView in Xamarin.Forms

I'm looking for a way to dynamically generate card-like controls that look like these:

enter image description here

I have been doing some search and have found this article that shows you how to implement CardView on a Xamarin.Android project. But I'm using Xamarin.Forms so I can compile for iOS as well.

I also tried to use a ListView with ViewCells and a couple StackLayout tags, but wasn't able to even get close to that, here is the code:

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

I'm pretty new to Xamarin, so if I'm missing something basic, please let me know guys.

Upvotes: 0

Views: 2489

Answers (1)

Adam
Adam

Reputation: 16199

You are on the right track. Use a ListView, with a Frame as the root element and a margin, and set the background color of the ListView as appropriate. This should give you the card look. Then you fill in the card as you require.

<ListView x:Name="listView" BackgroundColor="Gray">
    <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>

Upvotes: 3

Related Questions