Sent to you by Sparkie via Google Reader:
This is the fourth entry in a series of articles intended to teach developers how to use Expression Design. You can find the previous articles here:
- Expression Design for Developers part 1 – First Impressions
- Expression Design for Developers part 2 – A Quick Tour
- Expression Design for Developers part 3 – Editing Your Art
In the previous installments we covered the basics of Expression Design, learned how to draw, and even added some nice Effects to our art. If you've been following along so far, though, you may begin to wonder about the Developer part of the series title. Certainly the entry level nature of the series does apply to developers, who are presumed to have little or no design experience. So far, however, we haven't seen anything that would really prompt a WPF developer (or designer for that matter) to use Design over Blend for these tasks. Today's article will, hopefully, fill in that void.
Layers
Blend has very functional graphic design capabilities, including path manipulation and Effects (with Blend 3), but at its core it is still an application design tool. As such, it is missing some typical graphic design software features. First and foremost is the lack of Layers. I find layers to be an invaluable tool for organizing my art. It's also great to logically group things together, which means you can do thigns like mass selection and toggle visibility. For WPF developers, though, it ties in to another great feature: XAML Export. I'll get into this later, but using layers adds some cool functionality when it comes time to move your art to Blend.
Working with the Layers panel
Open Design and let's get started. If you look at this image from part 2 you'll see the Layers panel is located at the bottom right of the window:
Create a new project: the size doesn't really matter, just make it big enough to give you some breathing room. Before you begin drawing anything, check out the Layer panel and see what's been added. You should see a Layer cleverly called "Layer 1″ and outlined in Red. The outline means that this is the currently selected layer, and since this is the only layer we have it makes sense that it is selected. To see some stuff in action, let's go ahead and add some art. We are going to create several buttons, so let's start with a Delete button:
Using the techiques from the previous articles, I've created art for a custom Delete button. I've expanded the Layer (click the white arrow next to the Layer name) and you can see I have two elements to my drawing. You'll also see I renamed the Layer to "DeleteButtonImage", which I did by double clicking the Layer name and editing it. This will become important when we export to XAML, so name your layers well. You can do the same thing for the element names if you wish, a practice I would definitely recommend once your art becomes more complex. Trying to find a particular element can be tricky otherwise.
You'll notice each element has an eyeball and a lock. The eyeball is a visibility toggle, which allows you to hide elements and focus on a particular element or a particular aspect of a layer. It also lets you easily experiement with different options. The lock will lock the element so it cannot be accidently edited. It can be pretty easy to lose track of which item is selected and before you know it you've changed the wrong element! In our example above, you'll also see that the "12 points" element has an "fx" label: this indicates that this element has an Effect applied to it, in this case a Drop Shadow.
The layer itself also has the eyeball and lock features. Next to them is a box, which when clicked will select the entire layer, at which time the box will fill with the Layer color (Red above). The Layer colors are a way of visually distinguishing between multiple layers. You can control the color assigned to a layer as you'll see in the next section.
At the bottom of the Layers Panel are three buttons: the one on the left is the Layer Options button which we'll cover in the next section. The two on the right are the "New Layer" and the "Delete Layer" buttons. They are pretty self explanatory, but it is worth noting that you cannot delete a layer when it is the only layer on the artboard, so at this stage the button should be disabled.
Layer Options
There are several options for controlling the Layers Panel. Click on the Layer options button at the lower left corner of the Layers Panel. Doing so reveals a context menu where you can Create a New Layer, Duplicate a Layer, Delete a Layer (when enabled), and change the Layer and Thumbnail Options. Explore these a little and you'll find that they are all pretty straight forward. For now, click on "Duplicate Layer", which will create a copy of the DeleteButtonImage we just drew. One annoying aspect of this feature is that it also copied the layer color: click on either layer and you'll see they are both the same. If you create a new layer otherwise, it will be assigned a different color. To correct this, select the newly copied layer and go back to Layer Options -> Layer Color… and assign it a new color. Now that layer and it's objects will use the new color.
Using Multiple Layers
One way to make use of multiple layers is to have them, well, layered on top of one another. You would do this with a more complex example to better organize and manipulate the image. This is of course an optional approach since you can have all your art in a single layer, but I like the flexibility discussed above.
For XAML export, though, we use multiple layers to represent multiple XAML Elements. In our case, we are creating background images for a series of buttons, so each layer will represent each seperate image. I want them all to have the same size, shape, and background gradient, so I am going to use the DeleteButtonImage Copy we just created to serve as my template for future buttons. First, I want to rename the new layer to "ButtonTemplate". Next, I want to select the "X" art and delete it by selecting it and pressing the delete key.
All should look well right now, but it really isn't: I want to be able to see all my buttons at once, but it appears I can only see the selected Layer. In reality, I can only see the TOP layer: when we used the Duplicate Layer function the new layer was positioned immediately over the old layer and so all I can see is the topmost layer. Let's move the DeleteButtonImage layer so we can see both side by side. Click the box on the DeleteButtonImage layer to the left of the eyeball: this should select the entire layer. Now grab it on the artboard and move it to the side, which should reposition the entire contents of the layer. You may need to zoom out to get all the layers visible.
It's good to mention at this point that you can also rearrange things in the Layers Panel by dragging and dropping them in the Tree. This would not have addressed our particular concern because all it would have done was adjust the Z-Index, but this can come in handy for moving items and layers frontwards and backwards on the artboard.
If you've been playing along, you should now have something like this:
We need two more buttons, an Add button and a Copy/Add button. I'll start by copying the template 2 more times, renaming my new layers, fixing their colors, and moving them so I can see them all on the artboard at once:
Now I'll add some art to the Add and CopyAdd button layers:
I used the same techniques from before to create the art, but as you can probably guess I copied the Add art and reused it to create the CopyAdd art. One easy way to copy an element in Design is to hold down the Alt key and drag the element: this will create a copy of the element and drop it where you let off the mouse. Be careful though: in this case, if you copy it over to the blank template for the CopyAdd button it will appear to be part of the button when in fact it is not! Looking at the Layers Panel will show you that the newly created element is still within the AddButtonImage layer! To correct this, in the Layers Panel drag it from its new home and drop it in the CopyAddButtonImage layer. If you drop it below the "4 points" element it will be behind the background, so be sure to drop it above. And don't worry if you miss, you can do this as often as you like.
Export to XAML
Now that we have some useful art in well named layers, let's export them to XAML so we can use them in Blend. In this case, we do not want to export the ButtonTemplate, so first go to the Layers Panel and click the eyeball on that layer to toggle its visibility off. Go to File -> Export: this will popup the Export window. On the right hand side, change the Format type to XAML WPF Resource Dictionary:
Leave the Group By selection as "Layers" and change the Live Effects option to "Convert to XAML Effects". Change the file name and location to whatever you want them to be and press Export All. Your XAML file is now created and ready to go. If you open the file in a text editor, you will see that each layer was converted to a DrawingBrush resource with the same name as the Layer which is why we want to use good names for our layers.
That was pretty simple, wasn't it? Now let's put them in action!
Consuming the Resources in Blend
Open Blend and create a new project. On the Project Tab, right-click the Project and add an existing item: navigate to the XAML file we exported from Design and add it to your project. If you go to the Resources Tab now, you should see the XAML file listed. Expanding it should show the three background images we created. Now drop three buttons onto your artboard. I made them squares since my art is square.
Create a Template
There are two easy ways to make the images the backgrounds for our buttons. The first way, and my preference, is to create a new template and make the image the Background of its Grid property:
- Right-click the button (or use the Breadcrumb trail above the artboard).
- Select "Edit Control Parts (Template)" -> Create New.
- Name the ControlTemplate appropriately.
- The Template will contain only an empty Grid. Drag the Image from the Resources Tab and drop it onto the Grid: select "Background" from the popup menu. (You can also use the Brush Resources button on the Grid's Background property and select the Image that way.)
Set the Button Background directly
Alternatively, you can use step 4 from above and drag the image directly from the Resources Tab to the Button and set its Background property to the Image. Try both ways on the buttons we've created and run the application to see the differences.
I Recommend Templates
The Template approach appears to be more work: you'll notice that you no longer have any of the typical button behaviors for IsMouseOver, IsPressed, etc. You will need to implement these yourself. This is easy enough to do, but beyond the scope of this article. The good news is that you have complete control over the effects, so I would definitely prefer this method.
Setting the Background image of the Button is faster and easier, but leaves several things to be desired: first is the word "Button" in the center of the art. Second is that the default IsMouseOver and IsPressed behaviors are still present, which means we lose our image in these states. In order to take care of these issues, we are still going to edit templates, and I find starting from scratch much better than trying to work within the default Button template.
Here is what our application looks like with all three buttons applied:
Conclusion
I hope you can see how well Design and Blend can perform as a team. If I was creating a suite of applications, I could now easily get a standard look and feel to all my buttons. I also now have one place to maintain them: my Design file.
I hope you've enjoyed this series. Time and schedule permitting, I hope to cover more advanced drawing techniques in a future article. If you have any questions or would like to see anything else covered, please leave your suggestions in the comments below.
Things you can do from here:
- Subscribe to Developing For .NET using Google Reader
- Get started using Google Reader to easily keep up with all your favorite sites
No comments:
Post a Comment