Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Expression Blend is a premier tool for editing your UI. It contains a powerful visual designer. The designer is so good that the next version of Visual Studio will include the same designer. I'm inside Expression Blend. If you're following along with the Exercise Files you're going to want to open the ExampleSilverlightApp solution. This has a number of files. I would like to add a new file to this project. To do that, I'll go to my File Menu and choose New Item. I'm going to create what's called a Silverlight UserControl and I'm going to call this one ExampleControl.
When I'm done, Expression Blend loads this blank designer. If you look over on the left-hand side of the screen you'll see this Objects and Timeline section, which contains my UserControl and all of my UI. Currently, there's only one element in there called the LayoutRoot. I'm going to change that by going to my Toolbox and adding items. For instance, I can add this Rectangle. Click and hold to see an example of the other items here. I'll choose Rectangle, and then I'll come over to my artboard and draw in the surface.
You can see some sizing handles. You can see the dimension handles showing up there, so I can see the size as I'm drawing it. If I want to snap that to a grid, I can go to the bottom of my screen and click here to turn on the Snap Grid so I can see it. And then if there's a green dot in these two buttons, that means I currently have snapping enabled. So I can turn that off by clicking once. I'm turning it back on. So this first one is called snapping to gridlines and the second one is snapping to snaplines.
To move this rectangle on the artboard I need a Selection tool, and there are two to choose from. They are over here; Selection and Direct Selection. I need a couple controls to work with. So let's click here, touch the Delete button to remove it, and let me show you how to add a couple of buttons. I'm going to go back to my Toolbox, scroll down to the bottom, this is the Button icon. Again, click and hold to see more controls in that area. Choose the Button and drag a couple of buttons. Notice that when I'm working with multiple items you get red snaplines to show when you're lined up with another element.
Again, I want to manipulate these, so my choices are letter V for Selection or letter A for Direct Selection. So let's try that. Here's the letter A, and I'm going to click on this button. While I'm in Direct Selection I can move it around on the screen and move it to new locations. When I press the V key, I go to the Selection mode and I now have other handles. I've got a margin selector here, this little chain link, that's a margin selector. I've got several white dots now arranged around the edge.
This allows me to size the button. Move it to a new location, make it taller or shorter and so on. There are a couple of other things I can do. I'm hitting the Delete key to get rid of those guys. If I want to manipulate the transformations of this control, I can use some hidden dots. Watch what happens when I hover my mouse over the edge of this, that's the sizing handle, but if I move a few pixels off the edge, see how it changes to a rounded arrow. Now, when I grab this and move my mouse, I'm rotating it.
I'm rotating it around the center point. It's hard to see, but in the very center of this button is a white dot, and if I click on that, I can drag that white dot to a new location on the screen. Now, I'm going to rotate, this time it's rotating around that new location. This allows me to make really nice shapes. Let me show you how you do that. I'm going to Delete this Button and I'm going to draw a circle on the artboard. To do that I'm going to go over to the Toolbox, click on the Rectangle button and hold. That shows me the other two shapes allowed.
I'm going to select the Ellipse shape, and when I draw now I'm getting an ellipse. If I hold down the Shift key while I'm dragging, I get a perfect circle. So let's make a flower. I'm going to shrink this down, go over and choose a Color from my Properties panel. It's got some nice colors here, we'll come back and look at this in a second. I'll make this a kind of a red color, like so. I need to select my ellipse first to do this, so we'll try that again. There we go, and then I'm going to drag this white center point over here to this area.
And then I'm going to Copy this, Ctrl+C for Copy and Ctrl+V to Paste. Now I've got two of those ellipses. So watch what I can do. Click here again; Ctrl+C, Ctrl+V, and now they both share this common center point, so now when I rotate this, I'm rotating around that center point. I can constrain this as I move it around. So this lets me great circles or shapes very quickly. Ctrl+Copy, Ctrl+C, Ctrl+V. Here's another one and so on.
I'd like to change these three circles to have different flavors of orange. There's a couple of ways I could do that. I can click on this first one and go over here and dial-in a color by dragging around on my Color Editor. I'll show you more in the color chapter. There's also a really handy feature called the Hue Factor, and I can do a Ctrl+Z to undo that color I just selected. You notice right now I have a Red, Green, and Blue over here. There is other color scales available. If I click and I hold, I now can move from Red, Green, Blue, to Hue, Lightness and Saturation, or Hue, Saturation, and Brightness.
So I'm going to click here, and now when I move this slider I'm changing the Lightness value of that. They all retain the same Hue, but a different Lightness factor. That's a light version of the ellipse and here is a darker version of the ellipse. If I want to work with other elements on the Toolbox, there are a number of sections here. If you come over and click, for instance, on this Pen section, you'll see there's a number of controls in there. If you want to add other controls that don't show up on these pre-designed palette, you go down to this section called the Assets pane and click here and now you can see all of the other available controls.
The nice thing about Expression Blend is it has built-in search, so I can come up here and type in like the letters acc and that shrinks my list of available controls down to only the ones that start with the letter acc, or I should say that only contain the letter acc. Now, I'm going to here and you see that, that added it as my Custom Tool palette down here. Now, take that and drag it over here on my designer surface. So that's how you customize the Tool palette. There are lots of other palettes available in Expression Blend. There's an Assets palette, this is where your pictures and shaders and other items show up, custom Shapes.
You've got custom States, and over on this side you've got design time Data, Resources section for styles and templates, and the entire Properties panel. There's lots of details inside Expression Blend. This is just a short overview of the Blend features. Look for more details later in the course.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105523 Viewers
56 Video lessons · 117178 Viewers
71 Video lessons · 86413 Viewers
131 Video lessons · 41310 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.