Share via

Editing XAML

  • Article

While you can use any text editor to edit an Extensible Application Markup Language (XAML) document, there are advantages to using Blend for Visual Studio 2012:

  • In Blend, you can easily build and run your XAML document (F5) to see the results of your changes.

  • Blend updates syntax errors in the Results pane when you save the file or when you switch between views (Design view and Code view).

  • In Code view, XAML elements are color-coded for easy identification. You can also use the Find feature to locate specific text, or use the GoTo feature to navigate to a specific line.

  • In Design view, you can design your application visually and let Blend generate the XAML for you. You can also use the View Source feature to quickly navigate to the XAML for any object in your document.

Note

We recommend that you have previous experience working with XAML before you begin to edit XAML documents in a text editor or in Code view in Blend. Editing XAML code directly may result in parsing errors in your application that you will have to fix before Blend can correctly display your documents on the artboard in Design view or before you can build and run the application.

With this caution in mind, working between Design view and Code view can be an effective method for learning the basics of XAML.

Note

You can also edit XAML documents in Microsoft Visual Studio 2012, which includes the same features as the Code view in Blend.

Editing XAML by using Code view in Blend

You can use Code view in Blend to make changes to the XAML in your Blend projects. Access Code view by clicking the Code tab on the right side of the artboard in the Blend workspace. Changes that you make in Code view are automatically updated in Design view.

Code view tab (with the Design view tab hidden)

9c6c58bb-f156-4394-a4e2-dc30bfcb7369

In Code view, you can type in the code for new elements, or you can select existing code and then cut or copy from it or paste into it, just as you would in a word processing program. The following image shows text selected in Code view.

Text selected in Code view.

200569f5-655e-43de-bd34-f0799678fec1

In addition to the normal Clipboard tasks that you can perform in Code view, you can also go to specific lines in the XAML or find and replace text, by using the GoTo, Find, Find Next, and Replace commands on the Edit menu. For more information, see Find and replace and Go to a specific line in this User Guide.

For the syntax of individual controls, see the Control Library topic on MSDN, or search for XAML elements and attributes in the Class Library reference on MSDN.

Editing XAML by using Design view in Blend

When you work in Design view, Blend generates XAML for you. In Design view, you can add new objects from the Tools panel, bind data to them, style them, animate them, configure them to respond to user actions, and so on, and Blend will continue to update the XAML code for each part of your design.

Access Design view by selecting the Design tab on the right side of the artboard in the Blend workspace. Changes that you make in Design view are automatically updated in Code view.

The following image shows Blend in Design view on the left and in Code view on the right. In this image, a Rectangle has been added to the document in Design view, and Blend has generated the XAML for the rectangle in Code view.

The connection between Design view and XAML view

b5f7566b-7d9a-4cff-a898-53b96c3bba7c

When you work in Design view, you can quickly view the XAML for a specific object by right-clicking the object on the artboard or in the Objects and Timeline panel, and then clicking View Source. This will automatically switch you to Code view and will highlight the XAML code for the selected object.

For more information about creating your application in Design view in Blend, see Arranging objects, Drawing objects, Inserting 3D objects, and other related topics in this User Guide.