image
Sep 13, 2018

Xamarin Forms: Performance matters with Compression and Fast Renderers


Layout Compression as well as Fast Renderers are developed in an attempt to improve the page rendering performance by creating fewer objects in the visual tree of a page.
The performance benefit that this delivers varies depending on the complexity of a page, the version of the operating system being used, and the device on which the application is running. However, the biggest performance gains will be seen on older devices.
We will show both functionality in the products page of a Xamarin Forms app:
Products page

Fast renderer

For now the fast renderer functionality is only available on the Android platform for the controls:
  • Button
  • Image
  • Label
To make use of Fast renderers we have to add the following line in MainActivity.cs, before calling Forms.Init:

Forms.SetFlags("FastRenderers_Experimental");

global::Xamarin.Forms.Forms.Init(this, bundle);

Performance improvements will vary for each application, depending upon the complexity of the layout. In the following two picture we can see how it influences the flattening of the visual tree, using the Hierarchy Viewer.

Products ListView Without using Forms.SetFlags("FastRenderers_Experimental")

Visual tree without fast renderers

Products ListView Without using Forms.SetFlags("FastRenderers_Experimental")

Visual tree with fast renderers

As you can see in the ListView object, each list view item reduced with one level because of fast renderer for Label and Image, being used in each listview item

Frame with Sort and Filter without using Forms.SetFlags("FastRenderers_Experimental")

Frame

Frame with Sort and Filter with using Forms.SetFlags("FastRenderers_Experimental")

Frame with labels and images
Also here a reduction of one level per Label, Image or button.

Layout compression

Layout compression, which is available for iOS as well as Android platforms, aims to flatten the view nesting by removing specified layouts from the visual tree, which can improve page-rendering performance. The performance benefit that's delivered varies depending on the complexity of a page, the version of the operating system being used, and the device on which the application is running. However, the biggest performance gains will be seen on older devices. To enable layout compression set the CompressedLayout.IsHeadless property to True for each layout class.

<StackLayout CompressedLayout.IsHeadless="true">

  ...

</StackLayout>

Note: Since layout compression removes a layout from the visual tree, it's not suitable for layouts that have a visual appearance, or that obtain touch input. Therefore, layouts that set VisualElement properties (such as BackgroundColor, IsVisible, Rotation, Scale, TranslationX and TranslationY or that accept gestures, are not candidates for layout compression.

Without using Layout compression

Products page

Without layout compression

Products page in Hierarchy Viewer

Products page in Hierarchy Viewer without layout compression

Products page in Hierarchy Viewer with layout compression

Products page in Hierarchy Viewer with layout compression As you can see we reduced number of visual objects in the page.
About us

Milèstre is a digital development agency based in Maastricht and operating all over the world. Since 2003 we build software solutions together with established companies and great startups. During the years we have developed a process that enables us to transform ideas into meaningful, intelligent and designfull experiences for mobile and web. A process where strategy, design, development and user experience are playing an important rol.

 

Contact us

Milestre BV
Ambyerstraat Zuid 82
6225 AJ Maastricht
Netherlands

Tel: +31(0)43 - 4070780
Email: info@milestre.nl
Recent Posts

Sep 13, 2018

Xamarin Forms: Performance matters with Compression and Fast Renderers


Layout Compression as well as Fast Renderers are developed in an attempt to improve the page rendering performance by creating fewer objects in the visual tree of a page.
The performance benefit that this delivers varies depending on the complexity of a page, the version of the operating system being used, and the device on which the application is running. However, the biggest performance gains will be seen on older devices.
We will show both functionality in the products page of a Xamarin Forms app:
Products page

Fast renderer

For now the fast renderer functionality is only available on the Android platform for the controls:
  • Button
  • Image
  • Label
To make use of Fast renderers we have to add the following line in MainActivity.cs, before calling Forms.Init:

Forms.SetFlags("FastRenderers_Experimental");

global::Xamarin.Forms.Forms.Init(this, bundle);

Performance improvements will vary for each application, depending upon the complexity of the layout. In the following two picture we can see how it influences the flattening of the visual tree, using the Hierarchy Viewer.

Products ListView Without using Forms.SetFlags("FastRenderers_Experimental")

Visual tree without fast renderers

Products ListView Without using Forms.SetFlags("FastRenderers_Experimental")

Visual tree with fast renderers

As you can see in the ListView object, each list view item reduced with one level because of fast renderer for Label and Image, being used in each listview item

Frame with Sort and Filter without using Forms.SetFlags("FastRenderers_Experimental")

Frame

Frame with Sort and Filter with using Forms.SetFlags("FastRenderers_Experimental")

Frame with labels and images
Also here a reduction of one level per Label, Image or button.

Layout compression

Layout compression, which is available for iOS as well as Android platforms, aims to flatten the view nesting by removing specified layouts from the visual tree, which can improve page-rendering performance. The performance benefit that's delivered varies depending on the complexity of a page, the version of the operating system being used, and the device on which the application is running. However, the biggest performance gains will be seen on older devices. To enable layout compression set the CompressedLayout.IsHeadless property to True for each layout class.

<StackLayout CompressedLayout.IsHeadless="true">

  ...

</StackLayout>

Note: Since layout compression removes a layout from the visual tree, it's not suitable for layouts that have a visual appearance, or that obtain touch input. Therefore, layouts that set VisualElement properties (such as BackgroundColor, IsVisible, Rotation, Scale, TranslationX and TranslationY or that accept gestures, are not candidates for layout compression.

Without using Layout compression

Products page

Without layout compression

Products page in Hierarchy Viewer

Products page in Hierarchy Viewer without layout compression

Products page in Hierarchy Viewer with layout compression

Products page in Hierarchy Viewer with layout compression As you can see we reduced number of visual objects in the page.
© Copyright 2022 - Milestre BV
Top