Xamarin.Forms Visual

With Xamarin.Forms 3.6 Xamarin/Microsoft is shipping a new feature, Visual. Visual was earlier a part of the Xamarin.Forms 4.0 release, but now it was included in the Xamarin.Forms 3.6 release.

Material design

Visual was created with the idea to make it easy for developers to implement one common user experience for both iOS and Android. The Xamarin.Forms 3.6 release is delivered with one Visual, "Material". "Material" is a Visual that makes it easier for developers to implement Material Design.

Additional NuGet package

To use Visual with Material Design there is an additional NuGet package we need to install, and it is Xamarin.Forms.Visual.Material.

iOS

What happen when installing Xamarin.Forms.Visual.Material is that we got the renderers for Material Design and also Xamarin.iOS.MaterialComponents is installed. Xamarin.iOS.MaterialComponents contained C# bindings to the library that Google has created for developers that want to use Material Design on iOS.

Android

Because of that we already have Material Desing components on Android we will only get optimized renderers for use with Visual.

To use Visual with Material Design there are some requirements:

  • Target Android Framework needs to be v9.0 or greater.
  • Minimum Android version has to be greater than 5.0 (API 21). Material Design was introduced in 5.0.
  • The MainActivity has to have FormsAppCompatActivity as base class.
  • All Android support layers needs to be of version 28 or greater.

Using Visual

Visual can be used on an individual element, or on page-level. If we set it on page-level it will affect all elements that support the Visual that we selected.

Visual on a Entry:

Visual on a ContentPage:


...
iOS
Android

Create a Visual

It is pretty easy to create a new Visual, but it can take some time because we have to create renderers for each control and platform. But if we have a design that we want to use cross-platform and for multiple apps, it can be a good idea to package our own Visual.

The first thing we need to do is to create a class that implements the IVisual interface.

public class LeetVisual : IVisual
{
     public LeetVisual()
     {
     }
}

When we have done that we need to create renderers for each element that we want to support our own Visual. The key part to getting it to work is that we will add which Visual(s) the renderer is for in the ExportRendererAttribute. The code below will make all Frames on the iOS app to have green as the BackgroundColor. The code for the rest of the renderers for both iOS and Android can be found in the GitHub repository for this sample application.

[assembly: ExportRenderer(typeof(Xamarin.Forms.Frame), typeof(LeetFrameRenderer), new[] { typeof(VisualDemo.LeetVisual) })]
namespace VisualDemo.iOS.Renderers
{
    public class LeetFrameRenderer : FrameRenderer
    {
        public LeetFrameRenderer()
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            Element.BackgroundColor = Color.FromHex("#80C565");
        }
    }
}

When we have created the Visual and all the renderers we can use our own Visual by specifying the name of it in the UI-Code. We can use only Leet (as named in this sample) or LeetVisual as the value for Material.
iOS
Android

Code

The full code for this sample application can be found on GitHub, https://github.com/dhindrik/VisualDemo

Read more

Here are some links if you want to read more about Visual:

  3/10/2019 - 9:06 PM
  Xamarin, Xamarin.Forms,