Analyze UI responsiveness in Store apps (XAML)

Use the XAML UI Responsiveness profiler for Store apps to find and fix performance issues related to XAML processing and rendering. Long startup and navigation times, uneven panning and scrolling, and lags in processing user input are some of the issues that the tool can help you analyze.

Contents

Identify scenarios with user marks

Collect UI responsiveness data for your app

Collect UI responsiveness data for an installed app

Analyze UI Responsiveness data

Optimize XAML responsiveness

Identify scenarios with user marks

You can add user marks to your profiling data to help identify areas in the timeline ruler.

The mark appears as an orange triangle in the timeline at the time the method executed. The message and the time are displayed as a tooltip when you hover over the mark. If two or more user marks are close together, the marks are merged and the tooltip data is combined. You can zoom in on the timeline to separate the marks.

To add a user mark to C#, Visual Basic, C++ code, first create a Windows.Foundation.Diagnostics LoggingChannel object. Then insert calls to LoggingChannel.LogMessage methods at the points in your code that you want to mark. Use LoggingLevel.Information in the calls.

When the method executes, a user mark is added to the profiling data along with a message.

See the Windows SDK Sample LoggingSession Sample for examples.

Collect UI responsiveness data for your app

You can profile the responsiveness of your app on the Visual Studio device, the Visual Studio simulator or emulators, or on a remote device. See Run Store apps from Visual Studio. Here are the basic steps:

1. Choose where you want to run the app from the drop-down list next to the Start Debugging button on the debugger Standard toolbar.

   

2. When you are profiling on a tablet or PC that is not the same as the Visual Studio computer, configure your project for remote profiling. See Run Windows Store apps on a remote machine from Visual Studio

3. On the Debug menu, choose Performance and Diagnostics.

   

4. Choose XAML UI Responsiveness and then choose Start.

   Note

   When you start the XAML UI Responsiveness profiler, you might see a User Account Control window requesting your permission to run VsEtwCollector.exe. Choose Yes.

5. Run your app to collect data.

   Tip

   Run the app directly on the device. The application performance observed on the simulator or through a remote desktop connection might not be indicative of the actual performance on the device.

6. To stop profiling, switch back to Visual Studio (Alt + Tab) and choose Stop collection on the Performance and Diagnostics page.

   

   Visual Studio analyzes the collected data and displays the results.

   

Collect UI responsiveness data for an installed app

The XAML UI Responsiveness profiler can only be run on Window Store 8.1 apps that are launched from a Visual Studio solution or are installed from the Windows store. When a solution is open in Visual Studio, the default target is the Startup Project. You can profile XAML Responsiveness for an installed app on the local or on a remote device without an open solution.

To target an installed app:

1. Choose Change Target and then choose Installed App.

   

2. Remote profiling. To run the XAML responsiveness profiler on a remote device, the Visual Studio Remote Tools must be installed and running on the device. See Run Windows Store apps on a remote machine from Visual Studio.

   On the Select Installed App Package dialog box, choose Remote Machine and then specify the remote device.

   

3. From the App packages installed for current session list, choose the target app.

   

4. Choose XAML UI Responsiveness on the Performance and Diagnostics page.

5. Choose Start to begin profiling.

To stop profiling, switch back to Visual Studio (Alt + Tab) and choose Stop collection on the Diagnostic hub page.

Analyze UI Responsiveness data

Diagnostic session timeline**|UI Thread utilization|Visual throughput (FPS)|Parsing view|**Hot Elements view

After you have collected the profiling data, you can use these steps to start your analysis:

1. Examine the information in the UI thread utilization and Visual throughput (FPS) graphs and then use the timeline navigation bars to select a time range that you want to analyze.

2. Using the information in the UI thread utilization or Visual throughput (FPS) graphs, examine the details in the Parsing or Hot Elements views to discover possible causes for any apparent lack of responsiveness.

Diagnostic session timeline

The ruler at the top of the Performance and Diagnostics page shows the timeline for profiled information. This timeline applies to both the UI thread utilization graph and the Visual throughput graph. You can narrow the scope of the report by dragging the navigation bars on the timeline to select a segment of the timeline.

The timeline also displays any user marks that you have inserted, and the app's activation lifecycle events.

UI thread utilization

The UI thread utilization (%) graph displays the relative amount of time spent on the UI thread for these categories:

Visual throughput (FPS)

The Visual throughput (FPS) line graph shows the frames per second (FPS) on the UI and composition thread for the app. The values are what you would see in the chrome of an app when EnableFrameRateCounter is enabled.

Parsing view

The Parsing view contains a horizontal bar chart of the XAML files that are loaded and processed in the selected portion of the timeline. The children of a XAML file node are files that are included by the node file. Nodes are listed in the order that they were loaded. The details pain displays these values for a selected file.

Inclusive and exclusive values

Hot Elements view

The Hot Elements view contains a horizontal bar graph that represents all the elements that participate in layout during the selected portion on the timeline. The elements are grouped by their template and sorted in descending order by the time they took for layout.

The children of an element node are the elements that are contained by the element of the parent node. Child nodes are also ordered by their layout time. The details view displays name and timing values for a selected element.

Optimize XAML responsiveness

One of the best places to look for information about optimizing the performance of your app are topics in Performance best practices for Windows Store apps using C++, C#, and Visual Basic.

Here are some ideas about optimizing XAML performance:

Optimize startup and page navigation

You can speed up your app’s startup and page navigation by carefully examining the XAML, resource, and data files that your pages load. Your app can appear slow if the XAML files create or reference a large number of UI elements that are not needed when the page first loads, if resource files are loaded that reference templates and styles that are not applicable to the current page, or if the same XAML or resource file is loaded more than once. For techniques to address these issues, see one of these topics:

• Optimize loading XAML (Windows Store apps using C#/VB/C++ and XAML)

• Minimize startup time (Windows Store apps using C#/VB/C++ and XAML)

• Access the file system efficiently (Windows Store apps using C#/VB/C++ and XAML)

Optimize panning and scrolling

Panning and scrolling performance issues can be caused by not using a virtualizing container, templates that are large and complex, or inefficient algorithms in custom per-frame callback methods. For techniques to address these issues, see one of these topics:

• Load, store, and display large sets of data efficiently (Windows Store apps using C#/VB/C++ and XAML)

• Make animations smooth (Windows Store apps using C#/VB/C++ and XAML)

Optimize input responsiveness

For techniques to address these issues, see Keep the UI thread responsive (Windows Store apps using C#/VB/C++ and XAML)