Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Web programmers figured out a long time ago that it doesn't make sense to set the same property values repeatedly on an element. That's why we have CSS style sheets on most web pages today. Silverlight, while not a web page technology, suffers from the same issues. Writing the same property settings on multiple elements is tedious and makes change management harder. In this screenshot, I have two elements with exactly the same properties set on each individual text box. When client changes their mind and picks orange instead of the yellow foreground, we have to search out every text box in this application and determine if it needs to change.
Silverlight provides styles to alleviate this problem. A style is a collection of property settings. Any value that can be set on a property can be set in the style. This also can contain property setters. They can contain animation and storyboards. They could also contain control templates. Here is an example of the inline style. I have a button. On line 24, I am defining the Style property, and then I am instantiating a style inside of that, and setting two properties. The first Setter is changing the font family to Consolas, and the second Setter is changing the foreground to yellow.
It's more common to put your resources inside a resource dictionary like I'm showing in this slide. Here I have a style defined at the top, with the Key DataEntryTextBox. At the bottom of my screen, I'm using that style for this text box, so all the settings that are defined in the style will be applied to this text box. There are two types of styles: explicit styles and Implicit styles. In an explicit style, I provide a key in the style definition. Then I use the key in the markup extension. With an implicit style, I provide a type name in the style definition, TargetType = TextBlock.
Then I omit the key. Silverlight applies the implicit style to any element of the type name I specified. For this demonstration, I'm using Expression Blend and a project called UsingStyles. I'm going to start by drawing three buttons on the artboard, click on my toolbox, and draw three buttons. I will press V be to select my selector, I will choose this first button, and then I'll go to the Object menu and choose Edit Style.
I am going to start by creating an edit of the copy of the existing style. And I will go ahead and leave it at the default name, buttonStyle1, and then click OK. Let's go look at the XAML that was just created on my behalf. Here's my UserControl resources section, here's my style, and it copied all the Property settings from the underlying control, the button class in this case. There are many lines of XAML here. I am currently editing the style.
Expression Blend has this little icon at the top to signify whether I'm editing the button on the designer or whether I am editing the style. Here I'm editing style. When I click over here, I'm editing the button. Style > Button. When I'm editing the style, I go to my Property pane and any changes I apply here are applied to the style, not the individual control. For my example, I am going to change the font size to 18 points, and then I am going to scope out--click here to scope up it's sometimes called.
Next, I will apply the style to these other two buttons, so I will select button number two and I will go over to my Property pane and I will look for the word style. Here it is. I will click here, and I will go to the Property pick and choose to use a LocalResource called buttonStyle1, and then I will do the same for this other button. When I want to change the style, I can scope down into the style. In this example I am going to choose a new typeface called Arial Black.
And notice what happened. When I change the style on the initial button, it affects the other two buttons. With styles, you will never have to define your property attributes one element at a time; instead, you centralize the setting in an easy-to-apply location.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101810 Viewers
61 Video lessons · 88565 Viewers
71 Video lessons · 72380 Viewers
56 Video lessons · 104085 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.