XAML WPF - Styles Part 1, Window Resources

what's going on guys Tosca here and in this video we are going to talk about using Windows resources to define styles in your window in a window of your WPF application but before I get started I do want to mention my school semester just started so my output of videos may not be as rapid as it once was but I do want to try and stay on top of it because I actually enjoy making these but I just want to throw that forewarning out there anyways so now to get started we're going to talk about like I said doing Windows resources to define styles to be reused in our window now the resources essentially is an object that holds certain style information or templates that we can then later use in the saml of our window or user control or page so we can first do a window resources tag inside of our first window here and then this is essentially where we will predefined sounds like a dictionary which will actually talk about a little later so it's like a dictionary of styles or templates and what we're first going to do is I'm going to show you how to create base styles extended styles and key specific styles so first thing is we're going to create a base style so I'll do a little comment here we'll say I will do it with buttons so say based button style and what a base style is going to be is essentially anything that is a button will and is in our window will by default have this specific style and we'll begin a style with case opening style tag now we need to define a target type and the target type is essentially a control that this style is going to be targeted to and in our case it will be a button and then while I'm opening and closing tags of that X the window here so now inside this style is where we're going to set properties and we step properties using the setter tag and we use the property property in the setter tag and this is where we can access things like the background the foreground or pretty much anything when you go over to the properties window of a control you can access here so we'll say we are setting the property background and we will call these value property and we can set that to a brush color because background can accept a brush so we have that and we can mimic what we just did here and also set the foreground and we can set that value to expect white but what we're going to do now is create a little stack panel because we don't want everything showing up in the grid here and we're going to simply create a button so as normal to button and we'll call it a button and now you'll notice right off the bat our base button is actually going to inherit this style that we created for it and we didn't have to define it within the tags of the button or set any properties of the button it's just naturally because it is within the window it is going to inherit from this style now what we can also do is we can do something called a I'll call a special button style and this is where we'll create a specific style I think you would set it here one style and this is where we're going to do a specific style that we can then reference in a buttons tag unlike we have here we can reference it to a key and it will know to use this specific tile for that specific button so like above will open with a style we must skill use the target type which is button and in this case if you remember when we name our controls we can give it a key and in this case we'll call it special style so whenever we want to use this this is the key phrase we will use and like above and actually I'll just copy let's copy paste here too these videos can get a little long so now we have our background and our foreground and in this case we're going to invert so we'll have a white background with a black or brown a black not back a black foreground so if we go down here to our stack panel we can create a button and we'll call it a special button and off the bat as you may suspect it's going to be the base style and we'll define a specific style here by accessing the style property in our button and we will do the curly braces and static resource and this is where it'll obtain the resources in our window and we'll see here we have special style which we gave a key to notice now we don't see our base and that's because of course we didn't give it a key so we'll say static resource special style and you'll see it immediately change up here in the designer and if it doesn't sometimes you have to just rebuild the project or sometimes even it's stubborn enough to where I have to close the main window and reopen it and let it refresh a bit but usually rebuilding should be ok and so now we have our special style button here let me yeah I'll stay zoomed in and I'll just break this down a bit so there's our base button and our special button so moving forward now we can also if we wanted to create another style but we wanted it to be the same as our base style and wanted to just maybe add in a few other properties maybe some buttons we'll have we don't actually have to create a new style and copy and duplicate pretty much what we did up here we can actually base off of our another style so that's where we'll go to our style and we'll do obviously target type 'button and this is where we will use something called based on to the based on property and will access the static resource and then we'll have to do our curly braces again because now we're going to go to our X name space and we're going to get to the type and the type is where we will obviously define the type of it is which is a button and then we can give it a key and we'll call it ascended base style I should probably fix the caps there so I will and then we will go down here so now we are basing this off of our target type button and normally we could do static resource and do special style but since our base style doesn't have a key we can actually just reference it to type button which will just get the base button of our window and then inside of this we can create a new setter tag and we'll say property and we'll say we can increase the font size and give it a value of let's say 24 so now we have an extended base style and if we go down here and we create a new button and we can give it a style and static resource we can see our expanded base style and then we'll say extended space style and now you'll notice in our extended base style we didn't define the background or the foreground but because we use based on and did X type 'button it's going to get the base button of our resources now we can also do this for our special button and doing this does not require us to have X type so now we will create comma and this special style and we will create again a style target site button if you based on and now instead of using type we'll do static resource special style and we obviously will need to give it a key and we'll call it extended special what do we name it and style and we'll have our opening closing tags and then like we did above we can access the setter tag and will be property and we'll change the font size again and I'll make this one maybe a little extra big so now we have an extended special style and like we did over here we can do button style static resource extended special style and let's give it a name of extended special style and you'll see just like our extended base it will inherit from whatever we have it based on so it will get those properties from our style above as well as in addition to our new properties that we set here and we're going to pretty much regurgitate everything we learned here as we move forward to using application resources or creating resource dictionaries but so all this is really specific the only thing more specific about this video is the fact that we're using a window resources which is inside of our window so if you're using a user control you would maybe do user control resources or if you're using a page you would do page resources and so forth I think you might get the idea so that's it really for this video um leave comments if you have any questions I'm going to be doing more on style so if you feel like I didn't really if you click this video and feel like I didn't cover exactly what you wanted to see keep looking because I'm going to break this up into multiple parts with that being said I hope you enjoyed I hope I didn't forget anything like I said I'm in school now so I don't want to like rush through these videos but I also want to keep putting some out there so yeah so Oh pretty much those are my excuses so I hope you enjoyed video again like subscribe comment or don't you know if you didn't like it and I don't know why you still listen to me blather on but yeah so see you guys

Channel: ToskersCorner

Views: 25,906

Keywords: Programming, tutorials, C#, .Net, learn C#, C# tutorials, WPF tutorials, programming for beginners, visual studio, microsoft, code, coding, xaml, styles, wpf styles, window resources, xaml styles, basedon, based on, extended style, custom wpf styles, item templates, style triggers, style tag, setter tag, style property, custom wpf button, custom wpf control, beginner xaml, xaml for beginners, learn wpf styles, how to use wpf styles, Resource dictionary, tutorial, window.resources

Id: ll21-t0QD2M

Length: 11min 53sec (713 seconds)

Published: Sun Jan 29 2017