Custom Rendering Tutorial

github Tutorial Data

Most of the controls in NoesisGUI are composed of multiple elements internally. It is the preferred method to create controls by combining existing elements, but it might be overkill in some cases. Large number of elements in a visual tree can cause the main element to become very heavy and consume more memory, thereby causing performance issues.

There is a solution to this problem and it involves letting the element take control of the rendering of its content. You simply override the OnRender method and draw into its DrawingContext parameter. It is a memory efficient way of building a composite element. It also simplifies the visual tree of the element and makes it lighter.

DrawingContext is a lightweight class which can be used to render rectangles, lines, text or any arbitrary geometric shapes.

Arkanoid example

In our collection of examples you can find an implementation of the popular Arkanoid game using a single element with custom rendering.

<Window x:Class="CustomRender.MainWindow"
  Title="NoesisGUI - CustomRender"

  <local:Game Width="800" Height="600"/>


Game is a FrameworkElement derived class that overrides its OnRender method. OnRender receives an object of type DrawingContext as an argument which contains useful methods to draw text and shapes. In this example we use DrawRectangle to render each block of the game.

void Game::OnRender(DrawingContext* context) override
    // Draw background
    context->DrawRectangle(Brushes::Black(), nullptr, Rect(0, 0, Width, Height));

    // Draw ball
    context->DrawRectangle(Brushes::LightSkyBlue(), nullptr, Rect(x0, y0, x1, y1));

    // ...


Although the API exposed by DrawingContext seems to be immediate it is still retained as the render commands are stored internally and later used by the render thread. The content is not being drawn immediately to the screen.

Table of Contents

© 2017 Noesis Technologies