Creating a UI by using XAML Designer
The XAML Designer in Visual Studio 2012 provides a visual interface to help you design Windows Store apps built using XAML, WPF, and Silverlight apps. You can create user interfaces for your apps by dragging controls from the Toolbox and setting properties in the Properties window. You can also edit XAML directly in XAML view.
The workspace in XAML Designer in Visual Studio consists of several visual interface elements. These include the artboard, Toolbox, Device window, Document Outline window, Solution Explorer, Properties window, and XAML editor. To open the XAML Designer, right-click a XAML page in Solution Explorer and select View Designer.
XAML Designer provides a XAML view and a synchronized Design view of your app's rendered XAML markup. With a XAML document open in Visual Studio, you can switch between Design view and XAML view by using the Design and XAML tabs. In Design view, the window containing the artboard is the active window and you can use it as a primary work surface. You can use it to visually design a page in your app by adding or drawing elements, and then by modifying them. For more info, see Working with elements in XAML Designer. This illustration shows the artboard in Design view.
You can use the Swap Panes button to switch which window appears on top: either the artboard or the XAML Editor.
These features are available in the artboard:
In Design view, additional artboard commands are available in the lower left area of the screen, as shown here:
These commands are available on this toolbar:
In XAML view, the window containing the XAML editor is the active window, and the XAML editor is your primary authoring tool. The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. XAML view includes IntelliSense, automatic formatting, syntax highlighting, and tag navigation. This illustration shows XAML view:
The Document Outline window in XAML Designer helps you perform these tasks:
-
View the hierarchical structure of all elements on the artboard.
-
Select elements so that you can modify them (move them around in the hierarchy, modify them on the artboard, set their properties in the Properties window, and so on). For more info, see Working with elements in XAML Designer
-
Create and modify templates for elements that are controls.
-
Use the context menu for selected elements. The same menu is also available for selected elements in the artboard.
The options available in the Document Outline window include:
The Properties window enables you to set property values on controls. Here's what it looks like:
There are various options at the top of the Properties window. You can change the name of the currently selected element by using the Name box. In the upper-left corner, there's an icon that represents the currently selected element. To arrange the properties by category or alphabetically, click Category, Name, or Source in the Arrange by list. To see the list of events for a control, click the Events button, which displays a lightning bolt symbol. To search for a property, start to type the name of the property in the Search box. The Properties window displays the properties that match your search as you type. Some properties allow you to set advanced properties by selecting a down arrow button. For more info on using properties and handling events, see Quickstart: adding controls and handling events
To the right of each property value is a property marker that appears as a box symbol. The appearance of the property marker indicates whether there's a data binding or a resource applied to the property. For example, a white box symbol indicates a default value, a black box symbol typically indicates that a local resource has been applied, and an orange box typically indicates a data binding has been applied. When you click the property marker, you can navigate to the definition of a style, open the data binding builder, or open the resource picker.
