rendering-performance.md

Home > How to increase rendering performance?

---

How to increase rendering performance?

Background information

Every class inheriting from UIElement contains a property CacheMode. To quote Microsoft's documentation:

Set the CacheMode property when you need to increase performance for content that is time consuming to render. For more information, see BitmapCache.

The default value is null as to not use any form of caching. This makes the controls sharp and crisp.

Setting UIElement.CacheMode

An example how to set a CacheMode:

<!-- This should decrease rendering time -->

<ToggleButton>
    <ToggleButton.CacheMode>
        <BitmapCache 
            EnableClearType="True"
            RenderAtScale="1"
            SnapsToDevicePixels="True" />
    </ToggleButton.CacheMode>
</ToggleButton>

Increase the RenderAtScale value, will sharpen the control, but it will also make it more pixelized when drawn smaller.

Note

The default value of UIElement.CacheMode is null.

Advanced: setting ShadowAssist.CacheMode

Material Design in XAML toolkit also provides you with an attached property ShadowAssist.CacheMode. This attached property is used in places where a simple CacheMode property would not suffice. This could be in situations where the property should be inherited, as UIElement.CacheMode does not support property inheritance.

This attached property is set through binding on a CacheMode property under the parent control.

An example of this property being used:

<!-- Found inside MaterialDesignTheme.ToggleButton.xaml -->

<AdornerDecorator CacheMode="{Binding RelativeSource={RelativeSource Self}, Path=(wpf:ShadowAssist.CacheMode)}">
    <Ellipse x:Name="Thumb" ... />
</AdornerDecorator>

Note

The default value of ShadowAssist.CacheMode is null.

Example

With CacheMode set	Without CacheMode set

Further reading

Some interesting articles with more in-depth information:

• Property value inheritance (WPF .NET)
• UIElement.CacheMode Property