Share via

Import XAML that is exported from Expression Design

  • Article

You can save your Microsoft Expression Design artwork as a XAML file that you can use in Blend for Visual Studio 2012. This is useful if you want to use the artwork in animations, convert the artwork into user interface (UI) elements such as a background image, and so on.

Tip

For more information on exporting art from Expression Design, see "Exporting XAML files" in the Expression Design User Guide.

Note

This topic references Blend and Expression Design.

To export art from Expression Design

  1. Open an art file in Expression Design. (You can open Expression Design Samples from the Help menu.)

  2. If you want to export slices, select the Slice tool from the Tools panel, draw a rectangle around the area of your artwork that you want to export, and then, under Edit Slice in the Properties panel, set the slice properties (such as the Name). For more information about slices, see the "Create and export slices" topic in the Expression Design User Guide.

  3. Click Export on the File menu. The Export dialog box appears.

  4. Under Items to Export, select one of the following:

    • Whole document   Exports all the art in the document.

    • Selected objects   Exports only those items selected on the artboard.

    • Slices   Exports only the slices that you made. You can optionally change the properties for each slice that is displayed.

  5. Next to Format, select one of the following options:

    • XAML Silverlight Canvas   Select this option if you are exporting the whole document or selected objects as a single XAML Silverlight canvas document.

    • PNG, JPEG, or XAML Silverlight Canvas   If you are exporting slices, select one of these options for each slice. You can set the Format property for multiple slices by using the Shift key to select multiple slices before you set the Format property.

      You can then select the XAML Silverlight Canvas container from the list next to Container name, and type a name for your XAML Silverlight canvas document in the Container name text box. If you do not select a container, each slice will be exported in a separate file according to its Format property.

    • XAML WPF Resource Dictionary   Select this option if you are exporting the whole document or selected objects. You can then set the Group by property to export one resource per layer (Layers), one resource per top-level object (Objects), or one resource for the whole document or selected objects (Document). For example, if each layer in your document represents a button in a future Blend project, select Layers.

    • XAML WPF Drawing Brush   If you are exporting slices, select this option for each slice. You can set the Format property for multiple slices by using the Shift key to select multiple slices before you set the Format property.

      Note

      You can create a drawing brush resource for each slice in Expression Design. For example, you could export a slice in PNG format, and export the PNG file in a XAML WPF resource dictionary container. The PNG file is exported in a subfolder in the same directory as your exported resource dictionary file, and the PNG file is referenced as an image brush resource instead of as a drawing brush resource. You can use image brush resources to paint objects in an Blend project just like drawing brush resources.

      You can then select the XAML WPF Resource Dictionary container from the list next to Container name, and type a name for your resource dictionary in the Container name text box. If you do not select a container, each slice will be exported as a brush resource in its own individual resource dictionary.

    • XAML WPF Canvas   Select this option if you are exporting the whole document or selected objects as a single XAML WPF canvas document.

    • PNG, JPEG, GIF, TIFF, BMP, or XAML WPF Canvas   If you are exporting slices, select one of these options for each slice. You can set the Format property for multiple slices by using the Shift key to select multiple slices before you set the Format property.

      You can then select the XAML WPF Canvas container from the list next to Container name, and type a name for your XAML WPF canvas document in the Container name text box. If you do not select a container, each slice will be exported in a separate file according to its Format property.

  6. Set other properties that you prefer, such as making the Text objects editable after they are imported into Blend. For more information about the properties in this dialog box, see the "XAML" topic in the Microsoft Expression Design User Guide.

  7. At the bottom of the dialog box, next to Location, type the path of the folder where you want the file exported. Also set the following options:

    • If you decided to export the Whole document or Selected objects, then also enter a name for your file.

    • If you decided to export Slices, then you can optionally select a layout panel to contain all the objects.

  8. Click Export All to export your file (or files).

To import the art into Blend

  1. In an open project in Blend, click Add Existing Item on the Project menu.

  2. In the Add Existing Item dialog box, browse to your exported XAML file (or files), select it, and then click Open.

    Note

    Only an exported XAML Silverlight Canvas can be imported into a Silverlight project.

    The file is added in the Projects panel. If you exported any of your art as a XAML WPF Drawing Brush, it will also appear in the Resources panel.

  3. Do one of the following to add the imported assets to the artboard:

    • If you selected the XAML Silverlight Canvas option, you can add to the document or copy and paste objects into another XAML document.

    • If you selected the XAML WPF Drawing Brush option, apply the resources to brush properties of the objects in your project. For example, you can drag a DrawingBrush resource onto to a TextBlock object and set it as the Background property.

      496874e2-379b-428a-a9bb-7264dc496036

      For more information about how to apply resources, see Apply or remove a resource.

      Tip

      Make sure that the names of your imported drawing brush resources differ from resources elsewhere in your Blend project. You can rename resource objects in the Resources panel by right-clicking the name and then selecting Rename.

    • If you selected the XAML WPF Canvas option, you can add to the document, use the document as the startup page for your application (see Set a starting document for your project), or to copy and paste objects into another XAML document. You can also open this file in Design view in Blend, right-click any object or objects, and then make a button or a user control (see Create a user control from existing objects).