Visual Studio integration

Note: the information on this page applies to XAML Spy 2. See the XAML Spy 3 version.

XAML Spy includes a set of MSBuild targets for XAML projects. The MSBuild targets contain build instructions adding XAML Spy to the project output and connecting the app automatically to the XAML Spy service. Adding a target to a project is a one-time operation. MSBuild targets exists for all supported XAML platforms (Silverlight, Phone, Store and WPF). 

Enable XAML Spy

The XAML Spy for Visual Studio extension adds XAML Spy features to Visual Studio 2012 and 2013. When installed, a new option Enable XAML Spy appears in the project context menu in the Solution Explorer. Selecting the option enables (or disables) the XAML Spy target import for the selected project.

Alternatively you can enable XAML Spy for multiple projects at once by selecting Manage XAML Spy for Solution in the solution context menu, as is demonstrated in this short video.

See Manually importing the XAML Spy MSBuild target to learn what Enable XAML Spy is doing to your project.

XAML Spy Explorer

Once a XAML project with XAML Spy enabled is launched in debug mode, the app connects to the XAML Spy Service. The XAML Spy Explorer tool window (View > Other Windows > XAML Spy Explorer) displays the connected app. The XAML Spy Explorer provides a real-time view of your running XAML app, with access to the app's package, isolated storage, user interface, and more.

Manually importing the XAML Spy MSBuild target

You can manually import the XAML Spy MSBuild target by following these steps:

  1. Open your XAML project in Visual Studio

  2. Right mouse click the project in the Solution Explorer and select Unload Project.

  3. Right mouse click the project and select Edit [projectname] to open the project in the XML editor.

  4. Scroll all the way down to the end of the file and add the following Import element just before the closing </Project> tag as specified below.

    <Import
      Project="$(XamlSpyInstallPath)MSBuild\FirstFloor.XamlSpy.Silverlight.targets"
      Condition="'$(XamlSpyInstallPath)' != '' and '$(Configuration)' == 'Debug'" />
    <Import
      Project="$(XamlSpyInstallPath)MSBuild\FirstFloor.XamlSpy.WindowsPhone.targets"
      Condition="'$(XamlSpyInstallPath)' != '' and '$(Configuration)' == 'Debug'" />
    <Import
      Project="$(XamlSpyInstallPath)MSBuild\FirstFloor.XamlSpy.WinRT.targets"
      Condition="'$(XamlSpyInstallPath)' != '' and '$(Configuration)' == 'Debug'" />
    <Import
      Project="$(XamlSpyInstallPath)MSBuild\FirstFloor.XamlSpy.WPF.targets"
      Condition="'$(XamlSpyInstallPath)' != '' and '$(Configuration)' == 'Debug'" />

    The element imports the XAML Spy target into your project. The target file is located in the MSBuild subfolder of the XAML Spy installation path.

    The Condition attribute determines whether the import is included when the project is build. Read more about the condition in the Target import condition paragraph.

  5. Save the project file, right mouse click the project in the Solution Explorer and select Reload Project.

  6. Compile the project in Debug mode and run it. The application will connect to the XAML Spy service.

Target import condition

The Condition attribute on the Import element determines whether the target import is included in the build proces or not. The XAML Spy for Visual Studio extension includes the target import with the following default condition:

Condition="'$(XamlSpyInstallPath)' != '' and '$(Configuration)' == 'Debug'"

The condition specifies that the import should take place only when the XamlSpyInstallPath property is not empty and the current configuration is set to Debug. The XamlSpyInstallPath property is empty, when XAML Spy (v1.2 or higher) is not installed. This part of the condition is very useful when multiple developers are working on the same project, but not all have XAML Spy installed. When XAML Spy is not installed, the XamlSpyInstallPath is empty and the import will not be included.

Additionally the project should be build in Debug mode, or else the import is not included. This means that building the project in Release mode automatically excludes XAML Spy. When deploying your app in Release mode, you do not need to worry whether XAML Spy is still referenced. The configuration condition can be changed in the XAML Spy settings, as shown in the following image.

In short; adding the import to the project is a one-time operation. You can safely share your project with developers who don't have XAML Spy installed. Deploy your app in Release mode, and XAML Spy is omitted from the build process.

Target tasks

The XAML Spy build target basically performs two tasks; 1) adding a reference to the XAML Spy library, and 2) decorating all XAML files in the project with metadata. All files in the project that have Build Action set to ApplicationDefinition or Page are decorated with metadata. The metadata is used by XAML Spy to setup the connection with the XAML Spy Service and to provide additional services such as source info for visual elements.

The Build output window in Visual Studio logs the XAML Spy build target activities. The following shows the typical output from building a Windows Store project with the XAML Spy target enabled.

1>------ Rebuild All started: Project: App2, Configuration: Debug Any CPU ------
1>  Added reference to XamlSpy.WinRT45
1>  Decorating App.xaml
1>  Decorating Common\StandardStyles.xaml
1>  Decorating MainPage.xaml
1>  App2 -> C:\Projects\Lab\App2\App2\bin\Debug\App2.exe
========== Rebuild All: 1 succeeded, 0 failed, 0 skipped ==========