Visual design compared to writing XAML and code

Editing XAML markup or code can be a complex task to those who do design work. Blend for Visual Studio 2012 was designed for creative people. You can create complete Windows Presentation Foundation (WPF)–based or Microsoft Silverlight-based applications in Design view in Blend. You can import art assets and XAML that have been exported from Microsoft Expression Design, and import Silverlight encoding templates that were generated by Microsoft Expression Encoder.

Blend was also designed to accommodate team development. Software teams often consist of designers who work on the user interface (UI) and programmers who work on the code that runs behind the UI. For this reason, Blend includes features for generating minimal code that can be handed off to developers, and features that allow you to hook into existing code such as event handlers or custom controls that can be used like existing controls.

What project tasks can you perform in Blend?

• Create a solution that contains a project for a WPF-based application (.exe), a Silverlight-based application (.exe), a Silverlight-based application with an accompanying website, or a library of controls (.dll).

• Add a new Extensible Application Markup Language (XAML) file (and corresponding code-behind file) to create a top-level window in your application, a user control, a navigable page in your application, or a resource dictionary that can contain reusable styles, control templates, brush resources, and more.

• Add existing files to your project or link to existing files, such as image, XML, video, audio, license, XAML, or code files.

• Add references to existing custom controls that are contained in .dll files. Custom controls can also be contained in existing source code files (.vb or .cs). After you add a custom control to your Blend project, you can use it just as you use the controls that come with Blend.

  For an example of a custom control that is contained in a .cs file, see Creating custom controls.

  Dica
  When you add source code files that contain custom controls to an Blend project, you must build the project before you can see the controls in the Controls category of the Assets panel.

• Add a new project to a solution. You can add or link to existing projects in an Blend WPF project.

• Open any file that is in your project. XAML files open on the artboard for editing, image files can be inserted in the active document, and sound and video files open in an animation timeline. Code-behind files open on the artboard in a text editor. All files can open in an external editor that is mapped to the file type. For example, if you double-click an .xml file in the Projects panel of Blend, the file will most likely open in Notepad. Code files will open in the Blend text editor, but you can optionally open the files in Microsoft Visual Studio 2012, if it is installed.

  For more information, see Modify a code-behind file.

• Open a Visual Studio 2010 project or solution for a WPF or Silverlight application and create the UI.

• Debug your application by building (Ctrl+Shift+B) or running (F5) it, and resolve any error messages that you might receive, in the Results panel.

• Add code files for custom classes that you can instantiate in your application.

  For an example, see Creating custom controls.

• Edit code files. If you double-click a code file in the Projects panel of Blend, the file will open on the artboard in a text editor that includes find-and-replace functionality and IntelliSense.

  For more information, see Modify a code-behind file.

What can you create in Blend without using code?

• Design the look (UI) of your application by adding and transforming objects from the Toolbox, and styling them by using brushes and other properties in the Properties panel.

  For more information, see the following topics:

  • Choosing and using interactive controls

  • Drawing objects

  • Arranging objects

  • Displaying data

• Animate objects in your application.

  For more information, see Animating objects.

• Modify the timelines of video or audio files in your project, after you add them to the artboard.

  For more information, see Inserting images and art and Inserting audio and video.

• Trigger animation timelines, audio files, and video files from user actions, such as clicking a button or moving the pointer over an object.

  For more information, see Control media using triggers in a timeline.

• Add interactivity to your application by using the behaviors that are available in the Assets panel. Behaviors are generic pieces of packaged code that can be dragged onto any object and then fine-tuned by changing their properties.

  For more information, see Working with behaviors.

• Create and design custom user controls. A user control is a project type that you can create in Blend. User controls can be used just like custom controls that are developed in Visual Studio 2012.

  For an example, see Create an empty user control and Create a user control from existing objects.

• Customize the look of an existing control and then apply the resulting style template to other controls of the same type. You can also add animation to a control template.

  For examples, see the topics that are listed in Styling tips for WPF Simple Styles and Styling tips for common Silverlight controls.

• Create other reusable resources, such as brush resources, by clicking the name of a property in the Properties panel and then clicking Convert to New Resource.

  For an example, see Create a resource.

• Convert objects to buttons and brush resources, or convert images to 3D objects, by using the options on the Tools menu.

  For examples, see Import 3D content and Convert a 2D image into 3D.

• Bind a property of an object to the value that is contained in another property. This is useful in many ways such as making the width of an object correspond to a slider bar.

  For an example, see Bind an object to user input or to other internal values.

• Bind a property of an object to a data source, such as an XML file (WPF only) or a common language runtime (CLR) object, or sample data that you can generate by using the tools in the Data panel.

  For more information, see Displaying data.

What can you do only in code?

• Define more complicated behavior in event handlers when a user interacts with the UI elements of your application. You can program event handlers to respond to key-presses, mouse actions, and so on. This differs from event triggers for animations and media. For example, event handlers let you use mathematical equations to program the behavior of your application.

  For an example, see Create a new event handler method.

• Customize the behavior of existing controls, or create new custom controls.

  For an example of a custom control that is based on the WPF Button control, see Creating custom controls.

• Load data, such as Microsoft SQL Server data, into a data table and convert it to a CLR data object that you can use in Blend.

• Create a value converter to add custom logic to a data binding. This is useful if you want to bind a property of one object to a property of an incompatible data type.

What can you do only in Visual Studio?

• Debug your application by stepping through it line by line, when the application is running.

  Dica
  You can have the same project file open in Blend and in Visual Studio 2012 at the same time, on the same computer. When you save a change to a file in one system, you will get a notification when you switch to the other system, asking if you want to reload the file.

  For more information, see Debug Blend applications in Visual Studio.

How does Blend help you add code?

• Blend optionally creates a corresponding code-behind file for any XAML file that you create by using the Add New Item wizard. If you double-click a code file in the Projects panel of Blend, the file will open on the artboard in a text editor that includes find-and-replace functionality and IntelliSense.

  For more information, see Working with XAML.

• Blend generates code for an empty event handler method when you double-click an event in the Events view  of the Properties panel.

  For more information, see Writing code that will respond to events.

  Dica
  If more than one person has to work on the same project at the same time, we recommend that you use a source control system such as Microsoft Team Foundation. A source control system maintains a central repository for project files that you can check out and edit locally on your computer. For more information, see Working with Team Foundation source control.

Where can I get help writing code?

If you need help writing code for your Blend application, you can use one of the resources listed at the official Blend blog BlendInsider. These include links to discussion forums, tutorials, and other resources.