A style is a collection of property values that can be applied to an element. Styles allow you to define a common set of formatting attributes and apply them throughout your application UI.
- [Instructor] A style is a collection of property values that can be applied to an element. The WPS style system acts in a similar way to the role the cascading style sheets play in HTML markup. Styles allow you to define a common set of formatting attributes and apply them throughout your application UI. For this example, I'm working in this file, Styles1Page.xaml, and you can see, by looking over here in the designer, that I have three ellipses across the top, that all look similar, and then I have two rectangles that look similar.
We'll start by looking at this first ellipse. Here on line 37 and 38, I define the location of this ellipse within the canvas, I said its left and its top property. Then on line 39 and 40, I set its width and height, and the rest of the attributes are setting its fill color, its stroke color, and its stroke thickness. You'll look at the other two ellipses, and they look identical, but you look at the .xaml, and all I'm specifying on line 44 through 46 and line 47 through 49, is the position of the two other ellipses.
The other properties, like the fill, are not being set directly in .xaml, but you can tell by looking at the designer, that all three of these ellipses look the same. That implies that either I'm using the default values for the ellipse, or I'm using a style. I can tell you right now, it's not the default, because the default fill color is not blue. This means I have to define a style somewhere in my application, and the way you do that in .xaml is by creating a resource dictionary, and within the resource dictionary, adding a style class.
In WPF, resource dictionaries are typically located in a property called "Resources." So here you can see I've got on line 11, Page.Resources. So this page class, in fact all framework elements have a Resources property, that means I can define resources at the Page level, or at the Canvas level, or any other child element within this page. I can also define styles at the Application level. Typically, what you do, is you define your styles in a shared location, just typically a parent element or at the Application level, that way the style can apply to a broad range of elements, and that way you can have consistency across your application.
Let's see how I define this. We'll start by looking at this section right here. So inside my resources dictionary, I created an instance of the Style class, and then I said the style is going to target ellipses. Now, because I'm doing this at the Page level, the way you can think of this is this style's going to apply to all ellipses that are within this page element, this page element and all of its children elements. Next, on line 20, 21 and 22, I set the values for this style.
Now the way you set them down here in a normal element, is you say something like fill= and then the value, when you're using a style, you use a setter to do that, so I say the setter's property name is "Fill," and the value is "LightSteelBlue." One of the really nice features about Visual Studio is that it uses auto-complete when it knows the type, so up here I specified this is a TargetType="Ellipse", that means Visual Studio knows that this property has to be one of the properties that's on the Ellipse class, so if I erase this, type in a new value here, you'll see it's showing me a list of all of the available properties.
Now once it knows I'm working with the Fill property, then it can give me a list of the available values over here, so here's a list of all the colors that are available for Fill. You see I changed it here, I changed it in the style, so these two ellipses change, but this one didn't, and of course that's because, I still got hard-coded in the ellipse, the original value, so I'll go down here and erase those, and now all three of the ellipses are picking up the style. For the eagle-eyed people in the audience, you'll probably notice that I only set three properties here, but originally I had five properties that I set, so let me show you another feature of styles, which is this idea of sharable, or style inheritance.
I knew that the stroke was going to be the same on the ellipses and on the rectangles, so I wanted to just write that once instead of putting it in two separate styles, so what I did, is I created another style up here, on line 12, and I want this to apply to the ellipse and to the rectangle, so first thing I do is I give it a key, every item that you put in a resource dictionary has to have a key, so here I'm explicitly setting the key on line 12.
You might've noticed that I didn't specify a key here on line 18 and 19, that's because WPF will implicitly create a key based on the TargetType, but you do have to have a key. So here I'm explicitly creating a key, and then here's the thing now. Remember that I'm sharing this style across two separate types, so in order for me to set the property, I have to specify a common base class that's shared across both of the shapes, in this case I've picked the Shape base class, so I can say "Shape.Stroke," and "Shape.StrokeThickness." Then once I've done that, then the values are set the same way that you do down here.
And finally, I go back to line 18, and I say, this style is BasedOn this style, and the way you do that in .xaml is you use what's called a StaticResource, this says look up a resource that has the key ShapeConstants, get its values from there, and put them in this Style too. So now, I can go to my ShapeConstants, and I can set this to 15, and you'll see that all of the stroke thicknesses for all five of my elements change.
You probably figured this out, but if I go look at the style for the rectangle, it's very similar to the style for the ellipse. You can call these implicit styles, in other words, I didn't have to do anything special down here in my canvas to say that this ellipse is using a style, because, it's implicit because I said up here, that this targets all the ellipses. Those work well, but there'll be times when you want to specify a style as a general style, but then you want to override that.
So to make that happen, you can use something called an explicit style. So I'll show you on the Styles #2, how that works. In this example, I went to the Page.Resources, and I created two styles, I gave them both a key, an explicit key, and then when it comes time to use the key, I come down here to this text block, and I say, look up the styling declared in the resource dictionary, look up the StaticResource with the identifier BigAndBold, so that's applied to this text block, and for the next text block, I say use the style SmallPrint.
Then for the third text blocks, I go back to the BigAndBold, and then for the fourth one, I go back to SmallPrint. So I'm explicitly specifying the values, if I go in here and I remove the style, it's going to go back to the default style, since I haven't defined a global style at the application level, it doesn't pick up any of the information over in the other page, because it doesn't know about them. To review, styles allow you to define a common set of formatting attributes, and apply them throughout your application UI.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family