XAML Editor Improvements

Many important development platforms are based on the XAML markup language, including Windows Presentation Foundation, Windows Store apps, and Windows Phone apps. XAML therefore plays a key role for thousands of developers. In addition, despite the availability of specialized design tools, writing, editing, and adjusting XAML code manually is a very common task. Because of this, Microsoft is still investing to improve the XAML code editor in Visual Studio; version 2015 brings new goodies that you will definitely love, especially if you need to edit parts of the user interface.

Peek Definition in the XAML Code Editor

Do you remember Peek Definition? I talked about this amazing feature in my book Visual Studio 2013 Succinctly, describing how you can show and edit pieces of C# or Visual Basic code inside an interactive popup window which appears in the context of your code. Visual Studio 2015 takes an important step further by bringing Peek Definition to the XAML code editor.

Note: In this chapter, I will mention several concepts related to XAML, such as resource dictionaries, styles, and control templates. I assume you are familiar with those concepts and with XAML in general. If you are not, refer to the MSDN documentation

This is an important addition, because it makes it easier to edit styles, control templates, and data templates that reside in external resource dictionaries from the context of their usage. To understand how the XAML code editor can help you save time, create a new WPF project. Of course the techniques described in this chapter work fine with other environments, such as Windows Store apps and Windows Phone apps, not just WPF. When the new project is ready, add a new resource dictionary. You already learned in Chapter 2 how to add resource dictionaries to a WPF project, so I will not describe this again. Suppose you want to provide a custom control template for the Button control. The following code demonstrates how to define a control template that represents buttons with an ellipse, and where each state (normal, mouse over, pressed) is intercepted with a Trigger and represented by a different gradient background, via LinearGradientBrush objects.

Before you can use resources from a dictionary, you must tell the application what dictionaries you will use and where they are located. This is accomplished in the App.xaml (or Application.xaml in other project types) file, more specifically you use a collection called ResourceDictionary.MergedDictionaries that collects required dictionaries.

You can now use resources provided by the resource dictionary in your user interface elements. For example, in the main window of your project you can draw a button and apply the custom ButtonStyle1 like this.

Tip: IntelliSense will help you assign an appropriate resource according to the UI element you are working on. For example, if you have styles for buttons and for text boxes, IntelliSense will show only styles for buttons. This has been introduced in Visual Studio 2013 and is particularly useful when you have dozen styles or templates.

The result of this assignment is immediately visible on the designer, where an elliptical colored button appears. You can now right-click on the ButtonStyle1 identifier and select Peek Definition from the popup menu. Figure 39 shows how the code editor appears at this point.

39. Peek Definition in the XAML code editor.

As you can see, a convenient popup editor appears and allows you to edit the control template within the context of its usage. The popup is interactive, which means that you can change the code directly, without the need for opening an external window that points to the specified file. The designer immediately reflects changes you make in the Peek Definition’s window. When you are done, you can simply close the popup the usual way. This feature works in the XAML editor exactly as it does for C# and Visual Basic. You can also invoke Peek Definition against managed code. For example, if you have a Click event handler for your button, right-clicking the event handler’s name in the XAML editor and selecting Peek Definition will cause Visual Studio to open the peek window on the C#/VB code for the event handler.

Additional Considerations for Peek Definition In XAML

Peek Definition doesn’t work with just resource dictionaries; it also works with styles and templates you define elsewhere in your solution. It allows you to quickly edit styles, control templates, data templates, and any other element definable as a resource. This feature becomes very helpful with real world applications where you might have dozen dictionaries and resources, with many of them stored inside external libraries. Without a doubt, it helps to save time because it avoids the need of searching for the resource definition, opening the resource inside an external editor window, making your changes, and then going back to the resource context of usage.

Chapter Summary

Since it’s common to edit XAML code manually, Visual Studio 2015 brings Peek Definition into the XAML code editor. This feature enables developers to edit styles, control templates, data templates, and any other kind of resource directly from the context of usage, with edits immediately reflected on the designer surface.