Windows 10: Optimizing your XAML app for performance (10 by 10)

Brink · Oct 6, 2015

Over the past few weeks, we’ve highlighted a number of compelling new platform capabilities in our Windows 10 by 10 development series that you can implement in your Windows 10 apps to provide a better experience to your users. One of the important things to always take into consideration is app performance. Here are some tips to improve app performance in Windows 10 apps.

1. Recompile your apps for Windows 10

The first thing to be aware of is that a lot of performance work has been done in Windows 10 to improve apps that are simply recompiled for Windows 10. To illustrate, take a look at this comparison for a few apps that showcases the improvements by simply recompiling:

Memory usage Start up time
For more guidance on how to move from Windows Runtime 8.x to UWP, check out the MSDN documentation.

2. Use the Visual Studio profiler to measure and track performance

At the core of performance optimization of Windows 10 apps is the Visual Studio Profiler. To use the profiler, go to Debug Profiler Start Diagnostic Tools Without Debugging… from the Visual Studio 2015 menu or simply hit Alt+F2.

The profiler will give you valuable information regarding your UWP app’s performance with these five tools:

Application Timeline

Examine where time is spent in your app. Useful for:

Correlating user actions with application activity so you can filter to applicable time ranges for trouble spots

Troubleshooting timing issues like low frame rate

CPU Usage

See where the CPU is spending time executing your code. Useful when the CPU is the performance bottleneck

GPU Usage

Examine GPU usage in your DirectX app. Useful to determine whether the CPU or GPU is the performance bottleneck

Memory Usage

Investigate app memory to find issues such as memory leaks

Network

Examine information about each network operation in your app, including HTTP request and response headers, payloads, cookies, timing data and more

These tools will capture traces in their respective areas to help you analyze your app’s performance. With the exception of Memory Usage, the tools can be combined to capture data simultaneously, which can then be correlated over multiple areas of interest.

In the above example, you can see the diagnostic traces captured on the Application Timeline, including CPU and GPU usage. At the top, there’s UI thread utilization, which provide colored bar charts that relate to the stages of XAML drawing (parsing, layout and render), I/O performance and the app code execution. At the bottom of the screen, the exact events that occur and associated durations are shown. With this, you can quickly see what is causing slowdowns in your app and identify areas for further investigation. For example, a lot of long orange Layout executions might indicate drawing a lot of items on screen, which may point to virtualization not being applied (read on for further details on virtualization).

Doing a memory analysis will provide us with a good idea of how much memory the app is using over time. This can indicate memory leaks (if memory keeps increasing over time without decreasing) or give us pointers on where to optimize for memory usage by using smaller images for example (read on for further details on image and text optimization).

To learn more about the new profiling tool in Visual Studio 2015, read the in depth blog post by the WPF team.

3. List UI Virtualization

A common app scenario is displaying a list of items for users to browse a collection. These lists can grow very large, which can lead to poor performance. By default, the ListView and GridView controls support UI virtualization of the elements in the list. In short, UI virtualization means that only the items that are visible on screen, plus a small window of adjacent items, are created graphically. The process of expanding a DataTemplate and assigning it values from the data list is called realization. Schematically, virtualization looks like this:

Source: ListView basics and virtualization concepts (Alain Zanchetta)

Additionally, UI virtualization also ensures that realized items are recycled when users scroll in the list. This means that the created elements are reused, populated with new data, and then displayed again. This saves the cost of having to destroy and recreate the visual elements, which greatly improves performance.

As mentioned, UI virtualization is generally something you don’t have to worry about, as it’s enabled in the controls you’ll generally use for displaying lists: ListView and GridView. Make sure you keep these two things in mind when using ListView and GridView, which can cause UI virtualization to break:

When you place either of these panels inside of a ScrollViewer. A ScrollViewer’s behavior tells its child elements to not worry about their height and to take as much space as they need. This will result in the ListView/GridView being completely expanded which breaks the UI virtualization behavior, as all items will be realized.

The layout behavior of ListView/GridView can be changed by changing the ItemsPanel Template. The items panel is responsible for the UI Virtualization, so when swapping or modifying that panel, make sure you use panels that support virtualization, such as VirtualizingStackPanel and ItemsWrapGrid, so the list will maintain its UI virtualization behavior.

For more details take a look at the “ListView and GridView data virtualization” documentation on MSDN.

4. Image rendering optimization

Images can be a large contributor to your app’s memory usage. While it’s often easy to pack high resolution images with your app, or download high resolution images from the web for usage in the app, it can result in poor performance (from both a memory and network perspective). The best way to improve this is to supply images in multiple resolutions and sizes, optimized for the various parts of your app. For example, a list should probably use a small/low resolution image, while a full-bleed background image requires a large/high resolution one.

For customers supplying a stream to the BitmapImage (or BitmapSource), be sure to use the SetSourceAsync method rather than the SetSource method. As its name implies, SetSourceAsync does its decoding asynchronously on background threads, rather than blocking the UI thread, and will save you valuable CPU time.

Decoding your images to an optimal size is also very important for performance. In previous versions of Windows, images were decoded to their natural size, which might not match the actual size on screen, and use extra memory and CPU. This problem was previously addressed by using the DecodePixelWidth/DecodePixelHeight properties to specify the size to decode the image to. Starting with the Spring update of Windows 8.1, this is no longer necessary in most scenarios. Windows will now automatically compute the render size of the image and decode the image to that size. Note that if you are creating your images and calling SetSourceAsync on them before they are added to the XAML tree, this optimization does not apply and using the DecodePixelWidth/DecodePixelHeight properties is a good idea.

5. Ensure your text is on the fast path

With Windows 10, text rendering has also been optimized out-of-the-box, to render up to 50% faster than before. This behavior can be affected by certain properties on a TextBlock, however. To debug this, use the DebugSettings.IsTextPerformanceVisualizationEnabled debug setting in your app. Text that has optimization applied will show up in green:

Keep in mind that this overrides the color of the text, so any text that you have defined as being green may appear as a false positive. The XAML for the above example looks like this:

1
2
3
4
5
6 <TextBlock Style="{StaticResource ScenarioDescriptionTextStyle}" TextWrapping="Wrap" Margin="0,0,0,10" Text="For any text, it [...] snap to.)" />
<TextBlock Style="{StaticResource ScenarioDescriptionTextStyle}" TextWrapping="Wrap" Margin="0,0,0,10">
<Run>
Both word and selection segments are language-specific [...] used.
</Run>
</TextBlock>

As you can see, placing the text in a child Run block instead of directly in the Text property breaks the text rendering optimization behavior. This is true for all inlines including <Hyperlink/>, <Bold/>, <Underline/>, <Italic/>, <LineBreak/>, <Span/>, <Run/>. Some other properties that cause this to happen are:

CharacterSpacing

LineStackingStrategy=”BaselineToBaseline/MaxHeight” if LineHeight is not 0

IsTextSelectionEnabled=”True”

Typography attached properties

TextTrimming=”Clip”, which has special bidirectional text behavior

For more on TextBlock performance, head on over to the documentation on MSDN.

6. Reduce the size of the Visual Tree

The size of the visual tree in XAML will directly affect both the startup time of the application and its memory usage. Let’s take a look at how we can optimize our app by making sure we don’t create anything in the Visual Tree that we don’t yet need to render.

The easiest way to see your element count is with the Live Visual Tree window in Visual Studio 2015.

The number to the right of each element is the number of children that element contains.

A common pattern when building Windows apps is MVVM (Model-View-ViewModel), and a very common practice is to use a “Boolean to Visibility” converter to show/hide elements based on properties in the ViewModel. If you’re not familiar with this pattern, this basically allows us to toggle the visibility of items on the page by simply setting a property on it’s associated “controller” class.

While setting the Visibility of elements to Collapsed certainly hides the element from the view, it doesn’t prevent the item from actually being realized. This means that we still spend time in the Layout phase and thus slow down the start-up of our app. As a general rule of thumb, think of every 1000 elements being created in the tree as adding 1 second to your app’s start up time. This may sound like a large number, but a list of items that has a reasonably complex DataTemplate can quickly add up to a multiple of that.

New in Windows 10 is the x*BiggrineferLoadStrategy attribute, which you can use to lazily realize elements when they are first needed. This saves our visual tree from being populated with items that are Collapsed to begin with and we can use these ways to realize them:

Call FindName with the name that was defined on the element

Call GetTemplateChild with the name that was defined on the element

In a VisualState, use a Setter or Storyboard animation that is targeting the deferred element

Target the deferred element in any Storyboard

Use a binding that targets the deferred element

Going over the places in your XAML where you have a Visibility of Collapsed defined is usually a good strategy to consider places where x*BiggrineferLoadStrategy can be useful.

7. Data binding optimization

Another thing heavily used when writing XAML apps is data binding. Data binding provides an incredibly powerful and productive way of writing code, especially when combined with the MVVM pattern mentioned earlier. Data binding has been greatly improved with Windows 10 and the way it works has been revamped. Using the new {x:Bind} markup extension for data binding results in compile time code generation for data binding purposes.

1
2
3 <DataTemplate x:Key="VacationsListViewItemTemplateOptimized" x*BiggrinataType="local:IItem">
<TextBlock x:Name="titleTextBlock" Text="{x:Bind Title}" />
</DataTemplate>

The two changes in data binding markup you’ll need are displayed above. First of all, you need to specify an x*BiggrinataType attribute, as the code generation results in strongly typed code. Secondly, use the new {x:Bind} markup extension to do the binding versus the previous {Binding} markup. This also results in code that’s better debuggable, as the data binding code is now in the .g.cs file associated with your XAML page. Be aware that the data context is automatically set to the page itself, so all properties on the page can be bound against.

There are many more improvements made with the new {x:Bind} markup extension, so take a look at the x:Bind sample on GitHub to dive into things like xhase, which you can use to specify the order of realization of elements in a DataTemplate when panning lists.

Wrapping up

We hope this article provides you with background and practical guidance on how to approach optimizing your app’s performance. Head on over to DVLUP to take the “Use Visual Studio Profiler to keep your app running at peak performance” quiz to show off your knowledge of XAML performance optimization and claim some coveted points and XP. As usual, there are additional resources listed below and reach out to @WindowsDev on Twitter using #Win10x10 to chime in on the topic.

Resources

Build 2015: Debugging Performance Issues Using Visual Studio 2015

Build 2015: XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAML

Build 2015: Data Binding: Boost Your Apps’ Performance Through New Enhancements to XAML Data Binding

GitHub: x:Bind sample

GitHub: x*BiggrineferLoadStrategy sample

Click to expand...

Source: Optimizing your XAML app for performance (10 by 10) | Building Apps for Windows

:)

calebnp · Oct 6, 2015

Decrease the font size in XAML apps

I am used to the default font size of UI elements from Windows 7 and the current size in desktop apps in Windows 10. Thus, the fonts in XAML apps is way too big and takes up most of my screen on my smaller laptop screen.

How can I decrease the font size in these apps?

All I can seem to find are ways to change the font size on desktop apps or to increase the font size in XAML apps.

HaroldTx · Oct 6, 2015

Windows 10 driver optimizer

Hi Connie,

Thanks for posting your query on Microsoft Community.

As per your query, I like to inform you that; Driver optimizer is a build in features of Windows Operating system. One of the best ways you can improve your PC's performance is by optimizing the drive.

To know about Driver optimizer, refer to the below link:

http://windows.microsoft.com/en-US/windows-8/improve-performance-optimizing-hard-drive

Note: Applies to Windows 10 as well.

Hope it helps, reply to us with the status of your issue. We will be happy to assist you.
Click to expand...

The original poster asked about the pop ups that are for a download of "Windows
Driver Optimizer" app. Your answer was for the drive optimizer, not Driver Optimizer. Along with the original poster, I want to know if the Driver Optimizer a legitimate app?

Windows 10: Optimizing your XAML app for performance (10 by 10)

Optimizing your XAML app for performance (10 by 10)

Optimizing your XAML app for performance (10 by 10)

Optimizing your XAML app for performance (10 by 10) - Similar Threads - Optimizing XAML app

Turn On or Off Optimize App Window Sizing in Your Phone on Windows 10

Optimize and boost Windows 10 performance

SSD optimization, ect performance ...

best ways to optimize your windows 10 pc

Optimize my computer's performance

How to Optimize computer performance

Optimize Performance of Windows 10

Monitor your app’s performance with the Dev Center Windows 10 app

Touch Optimized Office Apps for Windows 10