read

When your app is all about the images, sometimes you want your images to be hero of the UI.  That’s what this weeks Xamarin.Forms Layout Challenge is all about.    Normally I prefer a light themed application, so just to change things up a bit, I thought I would go for a dark themed layout. They say, variety is the spice of life.

  

Page Layout

The page layout, not surprisingly is really just a ListView.  I played around with adding a bit of spice by making the ListView have a transparent background and put a purple gradient behind the ListView.  I’m not sure it’s great, but kind of interesting, none-the-less.

The ViewCell

The ViewCell is pretty straight forward.  The whole cell is a Grid of 2 rows.

The “Hero Image” spans both the rows.  At the bottom, I included a slight “Transparent to Black” overlay that helps the text to be more readable at the bottom

The text parts are  done with a Grid that occupies the 2nd row

You’ll notice that I have used the CircleImage plugin from James Montemagno.  It just requires a little reference to the namespace at the top of the page:

Also for the viewcount, I added a little bit of string formatting, which is a nice little binding feature, to show the comma’s in the ViewCount.

How does it scale

   

It even doesn’t look too bad in landscape…

Wrap Up

So that is it, a simple image ListView.

I thought I should also mention a couple of places I go to get nice images for mockups

  • For random user data and images you can go to RandomUser.me
  • For some really nice royalty free images you can use Unsplash.com

 

As always, and you can grab the project over at https://github.com/kphillpotts/XamarinFormsLayoutChallenges

Also, make sure you check out some of the other layouts in Xamarin.Forms Layout Challenges.

Happy Layouts!

Kym

Mobile, Xamarin, Windows Store Apps, Agile -- I love 'em all! Check out more


Published on

Show Comments
    1. Kym says:

      Thanks Mario. Pleased you enjoyed it.

  1. JO says:

    Awesome stuff Kym 🙂 Please keep up the fantastic blog posts – It’s great to see what cool UI’s can be built with Xamarin Forms.


Leave a Reply

Your email address will not be published. Required fields are marked *

Kym Phillpotts

I write about Xamarin Forms, mobile development or whatever else I might be concentrating on.

Back to Home