XAML Debugging

XAML debugging can be quite challenging, especially when it comes to layouting of nested dynamic controls in combination with data binding. Fortunately Microsoft provides a set of tools that can be used in combination with UBIK^®.

Prerequisites

• Installed UBIK^® WinX or UBIK^® UWP App
• Microsoft Visual Studio 2015 or higher

Introduction

Microsoft introduced some new UI debugging tools with Visual Studio 2015 that allow live exploring of rendered XAML content and even modifying values at runtime. The good thing about this technology is that it is actually independent of the Apps source code, so it can be used in conjunction with any XAML-based App that is installed on the machine. The tools provided are

• In-App Selection
• Live Visual Tree
• Live Property Explorer

Setting it up

Since XAML content is rendered at runtime, there's no need to have the original code available in order to use those tools. Just follow the steps below to enable the tools:

1. Launch the UBIK^® App
2. Open Visual Studio 2015 and create a new, blank project or use an existing XAML Test Project you already have
   • For debugging UBIK WinX (Versions < 3) create a blank Windows 8.1 App project
   • For debugging UBIK UWP (Version 3 and above) create a blank Windows Universal project
3. Go to the menu Debug -> Attach to process...
4. Scroll the list and find the process named UBIK.UWP.exe or UBIK.WinX.exe
5. Double-click the process or select it and click Attach

Visual Studio now launches your blank App and attaches the debugger to the UBIK App. As a side effect, it will enable the UI debugging tools in the running UBIK^® App and you can instantly use them to debug the UBIK UI and your XAML templates.