Copying/Exporting XAML from Expression Design to Expression Blend


Expression Design and Expression Blend are from same family of Expression studio,we can work on both for designing our applications, the only difference between them is , in Blend we have all Silverlight/WPF/WP 7 controls but in Expression design we don’t see any controls, but we can create our layout, it contains plenty of options to design our application’s layout.Expression Design is same as Adobe Illustrator including short cut keys.

As i said before we can design our application’s design  by using Expression design, also we can export our design to many formats like

  • XAML Silverlight 3 canvas: Select this option if you want to paste objects that can be animated or manipulated interactively in Silverlight 3 project or Windows Presentation Foundation (WPF) project in Expression Blend.
  • XAML WPF Resource dictionary: Select this option if you want to paste your objects as a collection of resources that you want to use as a resource dictionary in a WPF project in Expression Blend. Resource dictionaries are a collection of custom files or styles that comprise the different design elements of your application. You can add a resource dictionary to any WPF project in Expression Blend, and then apply the brush resources in the resource dictionary to the brush properties of any object in the project.
  • XAML Silverlight 4/WPF canvas: Select this option if you want to paste your objects as a collection of resources that you want to use as a resource dictionary in a WPF project in Expression Blend. Resource dictionaries are a collection of custom files or styles that comprise the different design elements of your application. You can add a resource dictionary to any WPF project in Expression Blend, and then apply the brush resources in the resource dictionary to the brush properties of any object in the project.
  • PNG
  • JPEG
  • GIF
  • TIFF
  • BMP
  • WDP(HD Photo)
  • PSD
  • PDF

In this Article i am going to explain how to Exporting or copy XAML Silverlight 3 canvas and how to add them in Expression Blend.

For this article purpose i have created a sample cloud design in Expression Design.

Design View

Now we will see how we can copy or export xaml to Expression Blend, well there are two ways, i am going to explain both ways.

Copy XAML:

to copy first select the object which you want to use in Blend, and then go to Edit menu > Select  Copy XAML

Copy Xaml from Edit menu

now we have a copy of selected object in our clip board, now open Expression blend and open the page on where you want to use this object, select Edit menu and select Paste or press Ctr+V to paste on your Art board.

Paste Option

Object on Blends's Art board

Export XAML:

to Export XAMl first select the object which you want to use in Blend, and then go to File menu > Select  Export option, Short cut key : Ctr+E,

Export Option

then a popup window opens. there will be many options (don’t worry about the options, i have explained about the options at end of this article) in that popup.

Popup

Go to the Export Properties and select format Combobox, in the available items from combo box select XAML Silverlight 3 Canvas and give the name if you want and change the location of file where you want to save, and then press Export all button.

Explanation of  options available on Export Popup Window:

  • Group by This option only appears if you choose the XAML WPF Resource Dictionary format. You can choose from three options: Document, Layers, and Objects. Each option dictates how the objects in the resource dictionary will be grouped once you paste the copied object into Blend.

Here are the other options that you can adjust:

  • Always name objects Select this option to give a default name to unnamed objects. The name appears in the XAML code.
  • Place grouped objects in a XAML layout container Select to wrap each grouped object in your Expression Design document in a separate canvas layout panel.

The Text options determine how text in your objects will be handled. These options do not appear if you choose the XAML WPF Resource Dictionary format.

  • Editable TextBlock Select this option to keep the text as individual, editable characters, even if the appearance of the text may change. Note that, as the message reads, you may lose some formatting in the conversion to XAML. Also, some fonts are not supported. For a complete list of the supported and unsupported text attributes, see the XAML text support topic in Help.
  • Paths Select this option to convert each character to outlines. You will not be able to edit the text.

Text Options

The Live effects options determine how Design handles the effects that you’ve applied to your objects.

  • Rasterize all Select this option to rasterize your live effects. If you clear this check box, some objects might be exported as solid lines or fills.
  • Convert to XAML effects Exports only those live effects currently supported by XAML code. As you can see in the below graphic, only Drop Shadow and Gaussian Blur will convert to XAML.

Live Effects

That’s all there is to it. Thanks for reading this article.

Advertisements

2 thoughts on “Copying/Exporting XAML from Expression Design to Expression Blend

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s