XAML WPF drawing brush and resource dictionary

Expression Studio 2.0 Other Versions

1 out of 1 rated this helpful - Rate this topic You can save Microsoft Expression Design artwork as a drawing brush resource in a XAML Windows Presentation Foundation (WPF) resource dictionary that you can import into a Microsoft Expression Blend 2 project. You can use a drawing brush resource in an Expression Blend 2 project to paint any object. For example, you could create artwork for the appearance of a button in Expression Design, export the artwork as a brush resource in a resource dictionary, import the resource dictionary into Expression Blend 2, and then apply the brush resource to the Background property of a Button control, or apply it to the Fill property of a Rectangle. Additionally, you can export one or many slices of your artwork as individual XAML brush resources in a XAML WPF resource dictionary. Resource dictionaries are useful because they can contain all the resources that make up the unique look of your application in one file. You can add a resource dictionary to any WPF project in Expression Blend 2, and then apply the brush resources in the resource dictionary to the brush properties of any object in the project. Note: Colors in your exported XAML code are based on RGB and are not color managed. If you use a custom color monitor profile, the colors you see in Expression Design may differ from those displayed in your final XAML-editing software. Exporting your artwork as brush resources

To export art as brush resources in a XAML WPF resource dictionary

1. On the File menu, click Export. The Export dialog box displays your artwork in a preview window. 2. Under Items to Export, select one of the following options:

Whole document Select this option to automatically export all the artwork in your Expression Design document as brush resources in a resource dictionary. o Selected objects Select this option to export only those objects that you selected before you opened the Export dialog box. o Slices Select this option to export slices of your artwork, in multiple output files and formats. Slices are configured before you open the Export dialog box. The preview window changes to display each slice individually so that you can select different export settings for each. You can also use the Slice contents drop-down box to show or hide objects in the slice. For more information, see Slices. 3. In the Export dialog box, in the Format list, select one of the following: o 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 toplevel 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 Expression Blend 2 project, select Layers. o 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: Expression Design does not assume that you want to create a drawing brush resource for each slice. 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 a Expression Blend 2 project just like drawing brush resources. You can then select the XAML WPF Resource Dictionary container from the list next to Container name, and enter 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. 4. Adjust the following settings for brush resources under Live effects: Note: If you are exporting slices as brush resources, you must set these properties on each slice.
o

Rasterize all Select this option to rasterize (convert into bitmapped images) any live effects that are applied to your artwork. This option helps maintain the appearance of your artwork as much as it can. o Convert to XAML effects Select this option to convert any live effects to XAML-supported effects. Live effects that are not supported in XAML are rasterized. 5. Next to File name, enter a name for your resource dictionary. Note: The File name field is not present if you are exporting slices because the names of the slices are used as the file names for the exported brush resources. 6. Next to Location, browse to or enter the path for the location where you want the output file to be saved. 7. Click Export All to export the file or files. If you are exporting slices and you want to export only some of them, you can select multiple slices in the preview window (hold the SHIFT key), click the drop-down arrow next to Export All, and then click Export Selected Slice(s). Alternatively, if you want to save any changes that you made to the export properties for individual slices without actually exporting the slices, click the drop-down arrow next to Export All and select Save Settings and Close. Your resource dictionary is exported to the path that you specified in the Location property, together with any supporting artwork in a subfolder named <resource_name>_files. When you add the resource dictionary to a Expression Blend 2 project, Expression Blend automatically imports the <resource_name>_files folder also. The Export dialog box set to export each layer in an Expression Design document as a drawing brush resource in a XAML WPF resource dictionary

The Export dialog box set to export the slices in an Expression Design document as drawing brush resources in a XAML WPF resource dictionary

Importing your resource dictionary into an Expression Blend project

To import your resource dictionary into an Expression Blend project

1. In an open WPF project in Expression Blend 2, click Add Existing Item on the Project menu. 2. In the Add Existing Item dialog box, browse to your exported XAML WPF resource dictionary file, select it, and then click Open. The file is added under Files in the Project panel. If the resource dictionary includes exported image files in a <resource_name>_files folder, that folder is imported also. All the drawing brush

resources are displayed in the Resources panel, under the name of the resource dictionary. 3. Do one of the following to use an imported brush resource: o In the Resources panel, expand the name of your resource dictionary, and then drag a resource onto the artboard of an open document. A pop-up menu appears, which gives you the option to apply the resource as a brush property on an existing object on the artboard, or to create a new object (for example, a Rectangle), and apply the brush resource to the object's Fill property. You can also copy a drawing brush to the canvas to modify it in Expression Blend 2.

Under Objects and Timeline, select an object, and then, under Brushes in the Properties panel, click the Brush resources tab, and then select the name of the brush resource that you want to apply from the list that appears.

Under Objects and Timeline, select an object, and then, under Brushes in the Properties panel, click the Advanced property options button next to a brush property, click Local Resource, and then select the name of the brush resource that you want to apply.

4. For more information about how to apply resources, see the "Apply or remove a resource" topic in the Expression Blend 2 User Guide.

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