The Converting WMF images to XAML using Graphic Designer posting showed how you could easily convert WMF format files to XAML. In this case, the drawing information in the generated XAML files was contained within a Canvas object. However, Graphic Designer can also create XAML files that are drawing objects, such as a DrawingImage. The drawing object is contained within a ResourceDictionary element, which means it can be used as a resource within the WPF application.
In this posting, we'll look at several ways of using Graphic Designer generated XAML drawings. At the bottom of this posting, you can find an attached Zip file (clipXart03.zip) that contains the following three XAML files: - SkippyImage_1.xaml - SkippyImage_2.xaml - SkippyImage_3.xaml
Exporting to XAML using a DrawingImageTo export your drawing to XAML in Graphic Designer, select Export from the File menu list. Then select XAML Export…
The following dialog displays XAML format options for the image conversion:
Change the Document Format from the default Canvas value to Resource Dictionary. Then, select the Path Output Type as Drawing Image. The final selection, Group By, has three options: - Document All drawing elements are grouped together as one DrawingImage object. - Layers For each layer defined in a Graphic Designer drawing, a separate DrawingImage object is created. For example, if your drawing has two layers, then two DrawingImage objects are created. - Objects A DrawingImage is created for each discrete drawing element. For a complex drawing, this option could easily end up generating hundreds of XAML objects.
In most cases, the Document Format value should be Document, since this option generates the fewest XAML objects.
Referencing the DrawingImageln the SkippyImage_1.xaml file, the DrawingImage is added as a resource to the Canvas object.
<Canvas.Resources> <ResourceDictionary> <DrawingImage x:Key='Skippy'> <!-- Drawing objects --> </DrawingImage> </ResourceDictionary></Canvas.Resources>
Once the drawing object is stored as a resource, it can be used by other UI elements, such as the Image objects in the following lines:
When you set the Height property, the referenced drawing object is automatically scaled in height. The width is also scaled in order to preserve the aspect ratio of the original drawing object. The Source property uses a StaticResource value to reference the x:Key value of the DrawingImage.
The Canvas.Left property allows you to reposition the drawings -- otherwise, the drawings would overlay each other. Notice how multiple Image object can reference the same DrawingImage resource. Using objects as shared resources is a primary reuse mechanism in WPF.
Referencing the DrawingImage as a Button Imageln the SkippyImage_2.xaml file, the DrawingImage is added as a resource to the StackPanel object. This time the drawing object is used as an image for two Button controls:
Notice how the Padding property controls the amount of spacing between the drawing and the border of the Button:
Animating the DrawingImageln the SkippyImage_3.xaml file, the DrawingImage is added as a resource to the StackPanel object. The drawing is referenced by an Image object, which is then animated. The previous posting, Animating XAML Clip Art, explains how the animation is created.
Graphic Designer InfoThe Expression Designers blog provides a lot more info on how to use the Graphic Designer product.
Thanks to my teammate, Mike, for helping me figure out a lot of the issues here!