How to measure UI Rendering time and FPS for Windows Store Apps (C# / XAML)

To measure performance for Windows Store Apps, if you have no experience before, I would recommend you to look at this session first: http://channel9.msdn.com/Events/Build/2012/4-103. He will explain the concepts to capture Windows Store Apps performance tips.

In short, XAML Operations are broken down into frames, and follows these 3 main steps:

1. Parsing: parse XAML for any objects

2. Layout: put objects, and determine their layout

3. Rendering: draw visible objects

To capture UI rendering time easier, think about the followings things:
1. Scenario: understand and know which parts that want to trace. Try to break down into atomic parts, it will be more clear for design scenario steps.

2. Steps of the trace scenario: it will notice us where our trace begins or ends in the trace file.

3. If in the same scenario contains sub parts such as loading items then scrolling down to the last items, try to make a self-marker (known by yourself) to separate sub tasks clearly.
4. When draw objects don't have to be re-draw, Frame will not be produced. Mouse interaction will produce frames only it trigger events on specific objects such as mouse over on objects then that object will have hover animation (re-draw frames).

Here is a command to capture UI Frame behavior:

@if %_echo%!==! echo off

set UserOptions=-BufferSize 1024 -MinBuffers 32 -MaxBuffers 32 -Buffering
set KernelOptions=-BufferSize 1024 -MinBuffers 64 -MaxBuffers 64 -Buffering

xperf -start xaml_user -on "Microsoft-Windows-XAML::5"+perftrack %UserOptions%
xperf -on base+cswitch %KernelOptions%

xperf -m BeginTrace
echo Event listeners started, run desired scenario then press any key
pause
xperf -m EndTrace

echo stopping xaml_kernel...
xperf -flush -f xaml_kernel.etl
xperf -stop

echo stopping xaml_user...
xperf -flush xaml_user -f xaml_user.etl
xperf -stop xaml_user

echo merging to xaml_merged.etl...
xperf -merge xaml_user.etl xaml_kernel.etl xaml_merged.etl

The command you see is a xperf command to capture XAML behavior which we can use it to monitor UI Frame Rendering time.

Now, let's see the real example. I will use Kona project in codeplex to demonstrate how to trace UI Rendering time and FPS. You can install and follow the example scenario I given.

Example Scenario: Capture UI rendering time of Bikes Category page, then scroll to the right and left

Steps:

1. Click at the header Bikes category
    

2. Waiting for all items are loaded into the page
3. Scroll page to the right using mouse wheel
    

4. Scroll page to the left using mouse wheel

Open trace file using WPA (Windows Performance Analyzer)

1. On the left side select System Activity, then there are more items expanded.
2. Select Generics events, an analysis tab will be shown.

3. Select Provider Name Microsoft-Windows-XAML.
4. Select Task Names that related to the scenario e.g. Frame, PointerDown, PointerUp, PointerLeave, PointerUpdate, PointerWheel.

5. Right click, and select filter selection.

Analyze trace file

1. We know that scenario start from the first click at Bikes category header, and page will be navigated after mouse is up then we do long wait for UI rendering. So, we know immediately when it starts and stops.
    

2. Zoom in, and we know that page is rendered after XAML is parsed. So, the Frame interval followed ParseXaml is the UI rendering frames for drawing objects on the screen (Duration 1.1 seconds).
    

3. The next sub part is after we do long wait and begin-end using mouse wheel. We can easily look at where PointerWheel start and stop that is the interval for scrolling items to right and left. To measure scrolling, it is difficult to measure in term of finding the longest gap between frames or longest interval because of UI thread will not produce frames when no re-draw objects (need to scroll mouse wheel accurately and continuously), which lead to calculate using FPS instead.

Calculate FPS UI Thread

1. In some scenarios, they don't create or load any objects just move or animate around the page. In order to measure it and detect UI glitch in overall using FPS (frames per second) is may be a good choice.
2. From scrolling, zoom in to that part. And open Frame tab to see how many frames in that time range.
    

3. There are 300 frames during 6.77 seconds, so the scrolling FPS is 44.3.

In conclusion, I still don't know the best way to trace UI glitch or at least find out the root problem if it is glitched yet (to know it is glitched because of what). However, based on the link I gave above, we can adjust the number of elements shown on the screen and remove overdraw elements or animations to improve application performance.

Last but not least, information in this post, I have tried by myself and no guarantee that this is right or wrong. Please read and consider by yourself.