Xamarin Forms Visual: Unifying User Experience

Xamarin Forms Visual: Unifying User Experience

A while ago, Xamarin.Forms Visual was introduced. With Visual, you are able to bundle styles and behavior for your app. For example, you can define a style for your buttons only once, and use it throughout your entire app. This was already possible with Custom Renderers, but this was not very flexible. If you wanted to apply the styles only on a few Elements, this was pretty complex to achieve.

How it works

A Visual (such as Visual.Material) can easily be installed by adding a NuGet package. This immediatly shows a great power of Visual. Just by adding a NuGet package (and a few lines of code), you'll get new styles and behavior for all (supported) Elements! You can apply these styles on different levels of your UI hierarchy. If you apply Visual to the highest level (App), it will automatically style all it's children according to the Visual. To take it even a step further, you can also add multiple Visuals to your app.

A Visual package such as Visual.Material, basically consists of a set of Custom Renderers that are linked to the Visual. If a Xamarin.Forms Element (or it's parent) has a Visual attribute, it will look for a renderer for that specific Element (which is linked to that Visual). If no renderer can be found, it will fall back on the default renderer.

Visual.Material

The first Visual package on NuGet is: Visual.Material. As the name suggests, this package is based on the Material style from Google. This package contains styling and behavior for all kinds of Elements (such as Button, Label, Frame, etc.). By adding this Visual to your code, you can easily apply Material style to your Elements. Elements will then have the Material look & feel on all (supported) platforms.

So, how can I use this fancy stuff?

  1. Install the Visual NuGet package into your Forms, Android and iOS project.
  2. Initialize Visual package.

On iOS:

// Add this line to your AppDelegate
global::Xamarin.Forms.FormsMaterial.Init();

On Android:

// Add this line to your MainActivity
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
  1. Add the attribute to the controls where you want the apply the Visual to:
Visual="Material"

Note: The Visual will also be applied to all child elements (if you don't add a Visual attribute to those elements). If you want to give a try, you can use my example from GitHub to experiment with.

Done! Wait, that's all? Yep, that's all!

How to create a Visual

If there is no Visual out there that suits your needs, you can also create your own Visual. This comes with the benefit that it's easy to re-use in other projects.

To create your own Visual, you basically need to implement Custom Renderers for all the Elements you want to support and then link them to your Visual. Let's have a closer look:

  1. First, you'll need to define your Visual. You can do this by creating a class that implements the IVisual interface:
public class AwesomeVisual : IVisual
{

}
  1. So now you have your own Visual, but it doesn't have any custom styling yet. To add styling you'll need to create a Custom Renderer for all Elements that you want to style differently. In order to link these Renderers with your Visual, you need to reference the Visual class. For a Button this might be something like:
[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(AwesomeButtonRenderer), new[] { typeof(FormsVisual.Styles.AwesomeVisual) })]
  1. After creating your Renderers, your Visual is done. You can now package up this Renderers and Share them with other project or start using it in your own apps:
Visual="AwesomeVisual"

For more details, you can find the sample project on my example from GitHub.

Customizing an existing Visual

If there's already a Visual out there that's a close fit to your needs, you can customize this Visual instead creating it all by your self. The customization can be done on the Visual Renderers, not on the Visual class itself.

This approach is almost equal to creating your own Visual. First you'll need to create a Visual class, then you'll need to create the Custom Renderers. Instead of inheriting from the default Renderer, your Renderer needs to inherit from the Visual Renderer.

What's next?

The new Visual feature shipped with Visual.Material, but probably more visuals will become available on short notice. During the session "Fluent Design System: the journey to cross-platform" at Microsoft Build, Peter Jahn, Chingusa Sansen and Phil Evans mentioned that they're working on AppFabric Visual for Xamarin Forms. This Visual will be an implementation for Fluent design on Xamarin.Forms. Besides the Visual, more controls like Calendar and People picker will be provided. A great way to build apps in a Microsoft Office style!

Additional resources

  • If you want to know more about customizing an existing Visual, Lachlan Gordon has written a great blog post on this topic! He also wrote an extensive post on how to package and publish your Visual. Thanks, Lachlan!

  • Another great resource is the source code from Visual.Material. At the time of writing, Visual is implemented for iOS, Android and Tizen.

Bas de Cort

About Bas de Cort

Bas is a software developer from The Netherlands with a great passion for mobile and innovative technology. This blog will mostly cover mobile technology, especially Xamarin.

Comments