Xamarin.Forms in Anger – Cards

The #1 request I get for the Xamarin.Forms in Anger is for a Google or Facebook like card view. Today is the day that I fulfill those requests.
To be completely honest, I’ve been thinking about how to do a card view for a while and let me tell you, it’s not easy. Especially when you try to stick with the “in the box” components of Xamarin.Forms. My first attempt at it was hideous.

Hideous Forms

Hideous would be the most polite way of saying it was crap. I started off using BoxViews to draw the lines and contain the whole thing in a Xamarin.Forms Grid. Ouch, yes hideous.
The Grid was becoming a nightmare with all the extra rows and columns needed for lines. What I wouldn’t do for some HTML Tables with a borders = 1 in Xamarin.Forms. I thought of putting in a feature request to the team, but didn’t. I don’t want them to laugh at me.

A Grid of Lines

I worked up a Xamarin.Forms Grid with some padding, row and column spacing. In addition to those settings, I also set the background color of the grid to a medium dark grey. Then added ContentViews with white backgrounds into each cell of the Grid. This is what it looked like when I finished.

The white panels acted like the ketchup on my waffle fries and the borders are the potato. Yes, I know, it’s strange to describe Xamarin.Forms design techniques using food, but stay with me; it gets better. Now that I knew the technique worked and was a heck of a lot less messy, I pushed on.

Content View Panels

Each CardView is made up of 5 ContentViews with a background color set to the designed color. Here are some of the background colors for each panel.

The CardView.cs file would have been gigantic if I kept all the code in the same file so I broke it up into different ContentViews. Here are the names for each ContentView that makes up the CardView.

The CardDetailsView has a column span of three to horizontally bridge the two IconLableViews and the ConfigIconView. The CardStatusView has a row span of two to complete the vertical lefthand status bar.

The CardView Code

For the demo, I put a couple of CardViews in a vertical StackLayout. If I had a lot of cards, I would prefer to use a ListView. Hopefully a reader will let me know how well this design works in a ListView. It should be ok, especially while using the Grid and not a bunch of nested StackLayouts. I’ve learned my lesson.

public class CardView : ContentView { public CardView (Card card) { Grid grid = new Grid { Padding = new Thickness (0, 1, 1, 1), RowSpacing = 1, ColumnSpacing = 1, BackgroundColor = StyleKit.CardBorderColor, VerticalOptions = LayoutOptions.FillAndExpand, RowDefinitions = { new RowDefinition { Height = new GridLength (70, GridUnitType.Absolute) }, new RowDefinition { Height = new GridLength (30, GridUnitType.Absolute) } }, ColumnDefinitions = { new ColumnDefinition { Width = new GridLength (4, GridUnitType.Absolute) }, new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) }, new ColumnDefinition { Width = new GridLength (100, GridUnitType.Absolute) }, new ColumnDefinition { Width = new GridLength (50, GridUnitType.Absolute) } } }; grid.Children.Add ( new CardStatusView (card) , 0, 1, 0, 2); grid.Children.Add (new CardDetailsView (card), 1, 4, 0, 1); grid.Children.Add ( new IconLabelView ( card.StatusMessageFileSource, card.StatusMessage ) , 1, 1); grid.Children.Add ( new IconLabelView ( card.ActionMessageFileSource, card.ActionMessage ) , 2, 1); grid.Children.Add (new ConfigIconView (), 3, 1); Content = grid; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

public class CardView : ContentView { public CardView (Card card) { Grid grid = new Grid { Padding = new Thickness (0, 1, 1, 1), RowSpacing = 1, ColumnSpacing = 1, BackgroundColor = StyleKit.CardBorderColor, VerticalOptions = LayoutOptions.FillAndExpand, RowDefinitions = { new RowDefinition { Height = new GridLength (70, GridUnitType.Absolute) }, new RowDefinition { Height = new GridLength (30, GridUnitType.Absolute) } }, ColumnDefinitions = { new ColumnDefinition { Width = new GridLength (4, GridUnitType.Absolute) }, new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) }, new ColumnDefinition { Width = new GridLength (100, GridUnitType.Absolute) }, new ColumnDefinition { Width = new GridLength (50, GridUnitType.Absolute) } } };   grid.Children.Add ( new CardStatusView (card) , 0, 1, 0, 2);   grid.Children.Add (new CardDetailsView (card), 1, 4, 0, 1);   grid.Children.Add ( new IconLabelView ( card.StatusMessageFileSource, card.StatusMessage ) , 1, 1);   grid.Children.Add ( new IconLabelView ( card.ActionMessageFileSource, card.ActionMessage ) , 2, 1);   grid.Children.Add (new ConfigIconView (), 3, 1);   Content = grid; } }

With all the refactoring; the CardView looks small and plain but the devil is in the ContentViews.

Solution

The code for this sample is up on GitHub in the “In Anger” repository. For this post, I broke the code out into a separate directory and solution to make it easier for you to reuse the CardView without getting confused with all the other code and resources from other posts.

Source: goo.gl/aCHqyu