Home > Import XAML that is exported from Expression Design

Import XAML that is exported from Expression Design

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

1. In Expression Design, point to Export on the File menu. The Export dialog box appears.
2. Next to Save as type, select XAML (*.xaml). Select a location, enter a name for for your file, and then click Save. The Export XAML dialog box appears.
3. Expand the Document format category and choose from the following two options that export files for use in Expression Blend:
   • Canvas   Select this type to create objects that can be animated or manipulated interactively in Expression Blend. If your artwork includes TextBlocks that you want to remain editable in Expression Blend, select the Export editable TextBlocks sub-option.
   • Resource dictionary   Select this type to treat the content as a collection of reusable assets (these can also be animated when inserted into your project). When the Resource dictionary type is selected, two additional options become available:
     • Group by   You can choose from three methods of grouping assets into resources. Select the Document grouping to generate a single resource for the entire document. Select the Layers grouping to generate a resource for each layer in the document. Select the Objects grouping to generate a resource for each object in the document.
     • Path output type   You can choose from two types of output for paths. Select the Drawing brush type to create resources that can be used inside XAML wherever a Brush type can be used, for example, when setting the Background of an object. Select the Drawing image type to create resource that must be wrapped inside an Image but is faster to render.
4. Expand the Effects dropdown box and choose from the following options:
   • Rasterize live effects   Expression Design can rasterize (turn into bitmapped images) soft-edged fills, embossed objects, objects with a paper texture, transparent gradients, Live Effects, and image strokes. This helps maintain the appearance of your artwork as much as possible. However, if you turn off one or more of the options in this dialog box, some objects will be exported as solid lines or fills.
   • Vectorize image strokes   If you have chosen not to rasterize image strokes, these strokes will be vectorized into overlapping solid fill objects for the export. Small vectorization levels will simplify the exported image stroke. Increasing the vectorization level will add more detail to the exported image stroke.
   • Text   When your artwork contains text, you have two export options to choose from to maintain certain aspects of that text. You can either export the text as flattened paths or as editable TextBlocks.
5. Preview your file:
   • The Graphics tab lets you see how the exported content will be rendered. It contains various tools and options to pan and zoom the exported content.
   • The XAML tab lets you inspect the markup of the exported XAML file.
6. Click Export to start the exporting process.
   For more information about the Export XAML dialog box, see the topic "XAML" in the Expression Design User Guide.
7. In Expression Blend, add the exported file as a new item in the desired project. For instructions, see  Add, link to, or remove an item from a project.
8. You can now use your exported artwork in Expression Blend.
   • If you selected the Canvas export option, you can open the XAML file as a document on the artboard.
   • If you selected the Resource Dictionary option, you apply your new art resources from the Resources panel to items on the artboard. For example, a Drawing Image resource can be dragged onto to an Image control and set as the Source property. A Drawing Brush resource can be selected as the Background brush of a Rectangle or Button.

     Make sure that resources in one file do not use the same key name as resources in another file. You can rename resource objects in the Resources panel by clicking the name, and then clicking it again until the name field becomes editable.

   For suggestions about what you can do with your objects, see topics such as Apply or remove a resource, Make an object into a button, and Create a simple animation.