Styling UI/UX (Day 11)

Xamarin Forms has an interesting challenge here. Have one UI that looks native and acts native on all platforms. Its a tough call but one that was answered rather well, with a few exceptions.

Rendering

It works well but honestly the FontSize has to be my biggest issue here. Why did it have to render differently on the different platforms. Xamarin Forms is its own control set, hence the font’s should have been adjusted to look the same size on each platform.

Stylesheets

Well they aren’t exactly called Stylesheets they are Resources but those familiar with web programming will know what I am referring to. You want a separate file that defines the styles for controls and views in a central location.

Unfortunately there are no such things as MergedDictionaries in Xamarin Forms but let me know if that ever changes. Instead you have two locations to store your styles in your ResourceDictionaries.

  • App.xaml
  • YourPage.xaml
  • My Stylesheet solution

Note: The default template when creating a Xamarin Forms app only puts an App.cs. Create a new App.xaml.cs, make sure you put in InitializeComponent() in the constructor and copy your App.cs methods and properties across. Delete the old App.cs. Now you have a nice XAML. You can look at my old Styling post or the example projects App.xaml.

Global Resources

In your new App.xaml you can add a resource dictionary and add styles. These are StaticResources and you can call upon them anywhere in your app.

Page Resources

Page resources are exactly the same as above but at the local page level. Just change Application to ContentPage and put it at the top of your page xaml file.

Stylesheet Solution

Because we don’t have merged dictionaries, in the example app I created something similar. We just have to merge the dictionaries ourselves but if you have a lot of styles it helps split out the styles into different pages.

  1. Create a folder called Styles
  2. Add a new Xaml Page
  3. Add resources as per the page resources above
  4. In the page you want to apply the page to make sure it inherits from BasePage
  5. Add the full namespace to the StyleSheet property e.g. LoginPage

 

And just to show an excerpt of what is happening. In the base page:

Note: If you use a style using this method however, you must use DynamicResource not StaticResource when referencing the style.

**Update**: As of Xamarin Forms 2.1.0 we now have Control Templates. These may suit your styling needs better than the Stylesheet Solution.

Keep Native Consistency

Keep consistency to the native experience. Controls and functions how native users would expect. Try not to override one platforms way of doing things on to another platform.

For example in Windows Phone you don’t have a swipe out menu, you have an application bar as the menu. Don’t create a swipe out menu for Windows Phone, just accept its different and use the ApplicationBar. The MasterDetailPage showcases this by having a popup from the Toolbar for the Master page and on Android and iOS it is swipe from the left.

Make it similar but embrace the differences in each platform.

<< Local Storage (Day 10) || Performance And Reliability (Day 12) >>

14 Days To Building An Enteprise Quality Xamarin Forms App

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts