/ XAMARIN

Xamarin.Forms Layout Challenges – Great Places

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.

alt text alt text

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. alt text

<Grid>
 <Image Source="ColoredBackground" VerticalOptions="Fill" HorizontalOptions="Fill" Aspect="Fill">
 <ListView x:Name="placeList" 
           BackgroundColor="Transparent"
           RowHeight="200" ItemsSource="{Binding .}" SeparatorVisibility="None">
  ...

The ViewCell

The ViewCell is pretty straight forward.  The wis 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

<Grid RowSpacing="5" ColumnSpacing="0" Margin="10,5" >
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="AUTO"/>
  </Grid.RowDefinitions>
							
  <Image Source="{Binding HeroImage}" Aspect="AspectFill" Grid.RowSpan="2" />
  <Image Source="ShadowOverlay" Grid.RowSpan="2"  Aspect="Fill" VerticalOptions="End" HorizontalOptions="Fill" />

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

<Grid Margin="10" RowSpacing="10" ColumnSpacing="10" Grid.Row="1">
  <Grid.RowDefinitions>
    <RowDefinition Height="AUTO"/>
    <RowDefinition Height="25"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="25"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="AUTO"/>
  </Grid.ColumnDefinitions>
								
  <Label Text="{Binding Title}"  Grid.Row="0" Grid.ColumnSpan="3" Style="{StaticResource TitleLabel}" LineBreakMode="NoWrap"/>
  
  <controls:CircleImage Source="{Binding ProfileImage}" Aspect="AspectFill" Grid.Row="1" Grid.Column="0" WidthRequest="25" HeightRequest="25" />

  <Label Text="{Binding Handle}" Grid.Row="1" Grid.Column="1" VerticalOptions="Center" Style="{StaticResource HandleLabel}" />

  <StackLayout Orientation="Horizontal"  VerticalOptions="Center" Grid.Column="2" Grid.Row="1" Spacing="5">
    <Image Source="Eye"/>
    <Label Text="{Binding ViewCount, StringFormat='{0:N0}'}" Style="{StaticResource HandleLabel}" />
    <Label Text="views" Style="{StaticResource BodyLabel}"/>
  </StackLayout>
						
</Grid>

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:

xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"

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.

<Label Text="{Binding ViewCount, StringFormat='{0:N0}'}" Style="{StaticResource HandleLabel}" />

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!

kphillpotts

Kym Phillpotts

Geek, Parent, Human, Senior Content Developer at Microsoft. Co-curator of http://weeklyxamarin.com and twitch streaming live coding at http://twitch.tv/kymphillpotts.

Read More