Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There's one thing you can say about UX designers is that they love to play around with the boundaries of UI. Just look at all the changes in the simple button control over the last ten years. There have been flat buttons, pressable buttons, gel buttons and round buttons, and even pastel buttons. They are all clickable and they all initiate an action, but they look different. Silverlight adds something called the control template, which formalizes this process. In Silverlight, every control has a default template, which is supplied by the control author, but you are not limited to this template.
You can design your own, then instruct Silverlight to use your new template whenever it renders the control. This is more powerful than styles, as a style can only supply new property values, not new UI. For this demonstration I'm going to use Expression Blend and I'm going to be editing a button control template. I thought I would show you a few samples first. I'm inside a project called UsingControlTemplates, and I've opened up a page called Samplebutton2.xaml. Here you can see that I have a button which has a style called buttonStyle1, and it has some normal button properties, normal click procedures, and so on.
When I run the application by pressing F5, and looking at the button, however, it looks vastly different than a standard button. It's a nice circular button with reflections. It has a storyboard that's changing the colors and rotating around the screen as I move my mouse into the button. Here's an example of a progress bar or two. Here's a progress bar with a new look to it. The second progress bar has an angled edge. I'm going to open this CreatebuttonTemplate.xaml file and start editing these.
Now, here's the key thing I want you to know about buttons before I start: they are content controls. Again, if you look at the XAML, here is a button that has content. There is an image inside this button. This button has content of a text which gets turned into a text block at runtime. That's going to be important as we build up our template. Switch back to my designer. I'm going to start by clicking on this button and replacing the default template with my own template. There's a number of ways to do that in Blend.
I can right-click on the control and choose Edit Template, I can go to the Object menu and choose Edit Template, and there's also a mini toolbar at the top of the screen right here to choose Edit Template. All three of these work. I'll choose to Edit and then create an empty template. I'll call mine Orbbutton and then click OK. And I've lost all visual design, because there is no UI at the moment for this button. I'm editing the template. You can see that by looking up here in Blend. If I hover over this area, you see that I'm editing the button template.
If I want to go back to see what it looks like with the template applied, I can click on the Scope Up button. It's an invisible button at the moment, but now of course I can move it to a new location. I'm doing designer things. When it's time to go back and edit the template, I click on this item. Now I'm editing the template. I'm going to create a circular button, so I'll start by grabbing an Ellipse and drawing it in the boundaries of my template. And I'll scroll down here and change the Margins to 0 on my ellipse so it fills up the entire button surface.
And then I'm going to fill it with a gradient fill. I'm going to go up to the Fill property, choose Gradient Brush, then select the Radial gradient brush. I'm feeling purple today, so I'll choose the purple color. And then for the center color I'll choose purple, but a lighter color purple. That looks good. Next, I'll go to the Stroke property, set my StrokeThickness to 4 pixels, and then I'm going to apply a Linear gradient brush to the border.
Again, I go to Gradient Brush, and what I'm going to do here is apply four gradient stops. In the center of my gradients, I'm going to have two stops close together and these are going to be a dark black color, or dark gray, like so. And then I'll make the two outside gradients a lighter color gray, like that. What I'm trying to do is get some sort of edge along this border that makes it look like it's got some physics to it.
I've got a radial gradient the center and a linear gradient around the edge. Let's scope out and see what my button looks like. It looks good, except it's not showing the content. You might remember a few minutes ago there was some text on this button. Silverlight provides something called the ContentPresenter that you use inside templates. You place the ContentPresenter inside your template and then that is the location inside your template where whatever child content is rendered. I'll show you how to add one. I'll go down here to my Assets pane, I'll search for Content, select ContentPresenter, and then I'm going to double- click on the ContentPresenter. Hm, I made a mistake.
I was not in the template when I was editing this, so I'll Ctrl+Z to undo, select my button, and drill down into my template. If you look over here in this side, you can see I'm editing my template. Here it says button Template, and here it says Template. Try this again. Select my grid, double-click on the ContentPresenter. That's better. Next, I'll remove any margins, and then I'll center the ContentPresenter by clicking on these two buttons here. So you see how it's picking up the child content? Now, if I did everything correct, I can apply this template to these other buttons, and they'll look like this, and they'll have the correct children content.
Let's see if this works. We'll scope out, click on the Cancel button, choose the correct selector, and now click on this button. And then I'll come over to my Property panel and type in "template," and I'll select the Template here, click on the property peg, and choose Local Resource > Orbbutton. Nice, that worked! Let's see if it works with this picture as child content. Select this button, pick Template, and then choose the same resource.
And that looks great! If I had to name my favorite Silverlight feature, I would be hard-pressed, but I can say this without reservation: control templates make my top five list.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98223 Viewers
61 Video lessons · 85535 Viewers
71 Video lessons · 69488 Viewers
56 Video lessons · 101826 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.
Your file was successfully uploaded.