Code editing and Visual Studio 2008 interoperability

Editing 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-based or Microsoft Silverlight 1.0-based applications in Design view in Expression Blend. Also in Windows Presentation Foundation projects, you can create style resources that you can reuse in other Expression Blend projects. Additionally, you can import art assets and XAML that have been exported from Microsoft Expression Design 2, and import Silverlight 1.0 that were generated by Microsoft Expression Encoder 2.

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 project for a Windows Presentation Foundation-based application (.exe) or a user control (.dll), both of which can make the most of the features of the Windows Presentation Foundation (WPF) by default.

• Create a project for a Silverlight 1.0-based application.

• 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 (WPF and Silverlight 2 only). 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 WPF control.

  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 User Controls tab of the Asset Library in the Toolbox.

• Add a new project to a solution (WPF and Silverlight 2 only). You can add or link to existing projects in an Expression Blend 2 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. JavaScript code-behind files in Silverlight 1.0 projects open on the artboard in a JavaScript 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 under Files in the Project panel of Expression Blend, the file will most likely open in Notepad. Code files will open in Microsoft Visual Studio 2008, if it is installed. For more information, see Edit a code-behind file.

• Open a Visual Studio 2008 project or solution for a WPF application, Silverlight 1.0 site, or Silverlight 2 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.

Back to top

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 Controls, Drawing shapes and paths, Layout, and Appearance.

• Animate elements in your application. For more information, see Animation.

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

• 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 Triggers and user interactivity (WPF only) and Event handling and user interactivity (WPF and Silverlight 2 only).

• Create and design custom user controls (WPF and Silverlight 2 only). 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 Try it: Create a WPF user control and Create a 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 (WPF and Silverlight 2 only). You can also add animation to a control template. For examples, see the topics that are listed in Simple styles.

• 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 (WPF and Silverlight 2 only). 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 (WPF only). For examples, see Make an object into a button and Convert a 2D image into 3D.

• Bind a property of an element to the value that is contained in another property (WPF only). This is useful in many ways such as making the width of an element correspond to a slider bar. For an example, see Try it: Create and apply a value converter.

• Bind a property of an element to a data source, such as an XML file (WPF only) or a common language runtime (CLR) object (WPF and Silverlight 2 only). For an example of how to use an XML data source, see Try it: Create an RSS news reader.

• Add code files for custom classes that you can instantiate in your application. For an example, see Try it: Create a custom WPF control and Create a button that controls a storyboard in a Silverlight application.

Back to top

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. For a list of events, see WPF events quick reference. This differs from event triggers for animations, media, and video. 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.

  Note

  All user interaction in a Silverlight 1.0 application is accomplished by using JavaScript event handlers. For an example, see Create a button that controls a storyboard in a Silverlight application.

• 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 WPF control.

• Load data (WPF and Silverlight 2 only), 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: Create a CLR object data source.

• Create a value converter (WPF and Silverlight 2 only) 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: Create and apply a value converter.

Back to top

What can you do only in Visual Studio 2008?

• Debug your application by stepping through it line by line, when the application is running. For more information, see Debug Expression Blend applications in Visual Studio 2008.

• Edit code files. If you double-click a code file in the Projects panel of Expression Blend, the file will open in Visual Studio 2008 if it is installed. For more information, see Edit a code-behind file.

  Tip

  If you want to change a code file, it is more useful to open your project in Visual Studio 2008 than to open just the code file. When you open a project in Visual Studio 2008, you can use the IntelliSense feature that offers to complete some words as you type them. For example, create a new project in Expression Blend 2, save it, and then open the project in Visual Studio 2008. Open the Window1.xaml.cs file, position your cursor at the start of the blank line after this.InitializeComponent();, and then type LayoutRoot. A drop-down list that appears shows you all the things that you could type on this line. If you add a period after LayoutRoot, the list changes to display all the available properties and methods of the LayoutRoot element in your Window1.xaml file.

• Add a reference to a project file or a COM API that contains WPF controls. Expression Blend honors references to a project file (such as a .csproj file) and treats it the same as references to .dll or .exe files.

Back to top

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 in Visual Studio 2008 if it is installed. For more information, see Edit 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 (WPF and Silverlight 2 only).

  Note

  When you create a Silverlight 1.0 project, Expression Blend 2 generates an example MouseLeftButtonDown event handler method in the Page.xaml.js file. For an example of how to modify that event handler method, see Create a button that controls a storyboard in a Silverlight application.

  Expression Blend copies the initial code for the method to the Clipboard. If you have Visual Studio 2008 installed, Expression Blend will automatically open your project in Visual Studio 2008 and paste the method into your code-behind file. Otherwise, you can manually open the file and paste in the code. You can then add programming logic inside the event handler method, or send the code file to whoever will add the programming logic. For more information, see Event handling and user interactivity.

  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.

  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 Visual SourceSafe. A source control system maintains a central repository for project files that you can check out and edit locally on your computer. You can prevent other people from checking out files when you are modifying them, or you can configure some source control systems to merge changes that are made by more than one person to the same file. Visual SourceSafe is integrated with Visual Studio so that you can check out a file by opening it in Visual Studio. For more information, see the Visual SourceSafe section of MSDN.

Back to top

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 a link to the newsgroup discussion. For help with writing JavaScript in Silverlight 1.0 projects, see the Silverlight Learning Center. Also see Learning and community resources.

Back to top