Optimizing NoesisGUI Performance

This section is intended as a reference for ways to improve the performance of NoesisGUI.

Rendering Performance


For optimizing graphics performance XamlPlayer has a Statistics panel that can be toggled with F2.



NoesisGUI implements a very fast antialising algorithm that can be used instead of GPU full-scene antialiasing. To use it you have to activate the PPA (per-primitive algorithm) algorithm in the renderer. PPA implements antialiasing by extruding the contours of the triangles smoothing them. The paths are slightly altered though.

Opacity Groups

Whenever possible element's Opacity property must be avoided because it can cause the use of offscreen surfaces. The number of offscreen surfaces used is indicated in the stats panel by the counter RT_Changes.

For example, in the following XAML:

    xmlns:x="" Background="Aqua" Width="500" Height="500">
   <Rectangle Fill="#FFFF0000" Width="100" Height="100" Opacity="0.50"/>
    <Rectangle Fill="#80FF0000" Width="100" Height="100"/>

Although the aspect of both rectangles is the same, the first one is being rendered to an offscreen texture and later being copied to the main surface. It is very important not using this kind of opacity when there is only a single node (like in this example). In these cases is better transferring the alpha to the brush, like shown in the second example. We could detect and optimize this case in the future but it is better not relying on it.

When you use a Brush to set the Fill or Stroke of an element, it is better to set the Brush.Opacity value rather than the setting the element's Opacity property.


In XamlPlayer, the Overdraw debug mode (CTRL + O) displays opacities in red color.


As a general rule, the minimal number of paths must be used. If you can collapse several paths in the same one, it will improve render performance because the number of drawcalls (batches) sent to the GPU is minimized. Do this whenever your content allows it. Even if you don't do it, NoesisGUI is able to optimize the number of batches by following these rules:

  • Solid color brushes always batch. Solid color is the fastest brush. Use it whenever possible.
  • Linear brushes batch if they are using the same ramp.
  • Radial gradients only batch is using the same parameters (radius and focus).
  • Image brushes batch if the images are in the same texture (atlas).

The statistics panel display the percentage of triangles for each kind of brush. You can also activate the Batching debug mode (CTRL + B) in XamlPllayer to visually display each batch with a different color.

Share Resources

Use dictionaries to share resources whenever possible. This is an important factor to reduce memory but it is also important to increase rendering performance because it allow us to improve batching. Using resources in Blend is very easy, you only have to click on the white dot of the resource and select "Convert to New Resource...".


        <GradientStopCollection x:Key="grad">
            <GradientStop Offset="0" Color="Red"/>
            <GradientStop Offset="1" Color="Yellow"/>
        <Rectangle Width="200" Height="100" Margin="10">
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" GradientStops="{StaticResource grad}"/>
        <Rectangle Width="200" Height="100" Margin="10">
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0" GradientStops="{StaticResource grad}"/>

Loading times

Using several resource dictionaries to organize styles and resources is a good practice. But keep in mind that every time you reference a resource dictionary in a xaml, the dictionary is loaded and all its resources created again. Therefore it is recommended to include those dictionaries, if they are used along your whole application, in the global Theme, so they are loaded only once and are always accessible.

© 2017 Noesis Technologies