Editing source code (Blend for Visual Studio)

  • Article

While you can use any text editor to edit a source code document, there are advantages to using Blend for Visual Studio 2012:

  • In Blend, you can easily build and run your project (F5 or Ctrl+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, source code elements are color-coded for easy identification. You can also use the Find feature to locate specific text, or use the Go To feature to navigate to a specific line.

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

Tip

Right click on an object and click View Source to view source on an object.

Note

We recommend that you have previous experience working with source code before you begin to edit source code documents in a text editor or in Code view in Blend. Editing XAML 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 source code.

Note

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

Editing source code in Design view

When you work in Design view, Blend generates source code 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 source code for each part of your design.

You 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 source code for the rectangle in Code view.

The connection between Design view and Code view

JJ155149.b5f7566b-7d9a-4cff-a898-53b96c3bba7c(en-us,VS.110).png

When you work in Design view, you can quickly view the source code for a specific object by right-clicking the object on the artboard or in the Objects and Timeline panel for XAML-based projects, or in the Live DOM panel for Windows Store built using HTML, and then clicking View Source. This will automatically switch you to Code view and will highlight the source code for the selected object.

For more information about creating your application in Design view in Blend, see Arranging objects (XAML), Drawing objects (Blend for Visual Studio), and other related topics in this User Guide.

Editing source code in Code view

You can use Code view in Blend to make changes to the source code in your Blend projects. You can 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

JJ155149.9c6c58bb-f156-4394-a4e2-dc30bfcb7369(en-us,VS.110).png

In Code view, you can type 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.

JJ155149.200569f5-655e-43de-bd34-f0799678fec1(en-us,VS.110).png

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

To edit a source code file

  1. On the right side of the artboard, click Code JJ155149.d62c8271-e5e5-4bfd-8aba-9f6f8f5b7a3d(en-us,VS.110).png to switch to Code view, or click Split JJ155149.5b79e600-984e-4f44-b8cd-6c1522832ad4(en-us,VS.110).png tab to see both views.

  2. Make changes to the source code.

    If the syntax of your XAML has errors, they will be displayed in the Results panel underneath the artboard. You must resolve any errors before you can view your changes in Design view. For more information, see Handling errors in code (Blend for Visual Studio).

  3. Click Design JJ155149.32be2832-9f81-4617-97e6-a4a3988a136c(en-us,VS.110).png to switch to Design view to see your changes reflected on the artboard.

    Tip

    We recommend that you have previous experience working with your project type source code before you begin to modify your Blend projects in Code view. Editing source code directly may create parsing errors in your application that you will have to fix before Blend can correctly display your documents on the artboard in Design view.

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

Customize Code view

You can also customize Code view with regard to Font and Size properties, and whether tab stops or spaces are used at the beginning of each line.

To customize Code view

  1. On the Tools menu, select Options, and then select Code editor in the list of components.

  2. Next to Show settings for, select one of the available code editors from the list:

    • XAML editor

    • HTML editor

    • CSS editor

    • JavaScript editor

    • Other code editors editor

  3. To change the Font and Size properties using the associated drop-down boxes.

  4. To change the size of the indent that is inserted when you press the Tab key, enter the indent value next to Tab size.

  5. Choose between Insert spaces or Keep tabs, as desired.