Visual design compared to writing XAML and code

Editing XAML markup or code can be a complex task to those who do design work. Microsoft Expression Blend was designed for creative people. You can create complete Windows Presentation Foundation (WPF)–based or Microsoft Silverlight-based applications in Design view in Expression 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.

Expression 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, Expression 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 Expression 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 Expression Blend project, you can use it just as you use the controls that come with Expression Blend.

  For an example of a custom control that is contained in a .cs file, see Try it: Create a custom control with custom properties.

  Tip

  When you add source code files that contain custom controls to an Expression 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 Expression 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 Expression Blend, the file will most likely open in Notepad. Code files will open in the Expression Blend text editor, but you can optionally open the files in Microsoft Visual Studio 2008, if it is installed.

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

• Open a Visual Studio 2008 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 Try it: Create a custom control with custom properties.

• Edit code files. If you double-click a code file in the Projects panel of Expression 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 Expression Blend without using code?

• Design the look (UI) of your application by adding and transforming elements 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 shapes and paths

  • Arranging objects

  • Setting colors, brushes, and masks

• Animate elements 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 element.

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

• 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 Adding behaviors to objects.

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

  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 brush or color resource.

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

  For examples, see Create a control from existing objects and Convert a 2D image into 3D.

• Bind a property of an element to the value that is contained in another property. This is useful in many ways such as making the width of an element 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 element 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.

  For a list of events, see the links in Controls, properties, and events reference.

• 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 Try it: Create a custom control with custom properties.

• 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 Expression Blend.

  For an example, see Try it: Display data from a sample SQL database.

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

  For an example, see Try it: Convert data from one type to another.

What can you do only in Visual Studio 2008?

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

  Tip

  You can have the same project file open in Expression Blend and in Visual Studio 2008 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 Expression Blend applications in Visual Studio 2008.

How does Expression Blend help you add code?

• Expression 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 Expression 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.

• Expression 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.

  Tip

  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 Expression Blend application, you can use one of the resources listed at Learning and community resources. These include links to discussion forums, tutorials, and other resources.