Designing and Developing ASP.NET 4 Web Apps (Exam 70-519) Tutorials
Page Consistency / Skins Example
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Designing and Developing ASP.NET 4 Web Apps (Exam 70-519) / Page Consistency / Skins Example)
Now let's take a look at a Skin Example and I'm going to show you how to create some Skins and how to work with them and what I want to show you first is the way that we're going to work with Skins, one of the main complaints you'll hear out there is that you don't have Intellisense with them. Let me move this back up here, get it out of our way. What I want to show you is how to turn on Intellisense for Skins. Okay. If you'll go to Tools, Options and if you just see these, come down here and click on Show All Settings because we want to go into Text Editor and we want to go into File Extension. Now see the little drop-down here? We want to change this to User Control Editor, we want to set an extension of Skin and we want to add that right here and then say OK. Alright. Now, now we want to add a Skin file. Now from this point on, you'll be taken care of in Visual Studio. Now I'm using this in Visual Web Developer, depending on Service Packs and so forth, you may not have to do this anymore, but if you're not getting Intellisense in your Skins Editor, then you need to work with this. So here's what we want to do, Skins as you know, are going to change colors and looks of our Web Server Controls. So I'm going to drag a button onto my page here and when we run that of course, it's going to come up gray and we don't want that, we want that background to be red. Okay. But we want all the button backgrounds to be red and so what I'm going to do is, come in here and if I go to Web.Config I can see that we are using the Black Theme right now. Okay. So I'm going to close Web.Config and I'm going to right-click on the Black Theme and Add a New Item and I will add a Skin file and I'll just call it Skin file and leave it as Skin file and notice it added it in. Now it also opened it and notice there's a bunch of stuff here and I am just going to delete all that out. So I've deleted all that out and what I want to do now, is put a Tag in here that I want to use to color this button. The easiest way to do that is just to go copy the Button Information here, so I'm going to copy it, go back into my Skin file and just paste it. Alright. Now since I turned that Intellisense on, notice that I can get Intellisense in here now and I could have used that but to get the Intellisense it also kind of messes with the error reporting. And if you see squigglies here, don't worry about them. Okay. But we can't have an ID in here, so I'm just going to take that ID off but I'm going to set like Back Color, notice I'm going to set Back Color equal to and I said red. Right. And so there is my Tag. Now this is the equivalent of a CSS Tag. Notice it doesn't look like it, it looks like the actual Tag for a button but this is in my Skin file and so I will execute this now. Run without debugging and you will notice that when it comes up, my button is now red. Now every button I add to my project now because it is a button. Okay. Will be red. So let's go back out to the Default ASPX, go back out to Design and I'm going to drag another button right here. You notice it's already showing up red and when I run this and look at it, it's going to be both of them red. Well, what happens if I don't want them all red? If I want this bottom one say, to be blue. Well I can use a SkinID for that. So let's go look at SkinID. I'm going to just copy this, then I'm going to paste it right here and instead of having the ButtonID here I'm going to do SkinID and if I backup and hit Space, it'll help me here. SkinID equals and I'll just call it VTC to make it easy to remember. Okay. And so SkinID VTC, it's throwing me an error, don't worry about that, it's because we turned on Intellisense and it's a little clunky, but I need to go here to that particular button and so there it is. And I'm going to come out here and I'm going to put a SkinID on it as well and that needs to equal, wait, hang on a minute, I fat fingered it, equal VTC and now you will notice that I'm going to get, I'm not going to get two different colors because, right here, on this one, I've still got red. It just occurred to me, hope I didn't confuse you, but I have to change it out there in the Skin file. So I've got a SkinID, if it has VTC then we want the Back Color to be blue and if it doesn't have the SkinID, if it's just Default, then every other button on the site's going to be red. So now we will run that, sorry to jump around like that, but that's just kind of the life in the development world. Right. And so now notice, now, I have a red and a blue. So that's how I can use Skins to color my Controls and that's pretty neat because I can globally turn everybody red, then a SkinID for blue. And I could have called that SkinID blue button or green button or red button or whatever. Notice I can put as many of these out here as I want to. Now if I wanted to change any of my labels or anything else, I can do that as well here just by putting the ASP.Label Tag in a new line here. That's a very simple example of Skins, there's all kind of debates out there about whether you could just create classes, you could do CSS Class on the Controls, right out here in the code and then call them with CSS. Don't want to get into that here, Themes and Skins, also notice the Skin file, went into the same folder as the CSS. It went into that main Black Theme file folder but Themes and Skins are a Microsoft thing and you can bet they're going to test on them. Alright. So that's a quick look at Skins.
Tutorial Information
| Course: | Designing and Developing ASP.NET 4 Web Apps (Exam 70-519) |
| Author: | Mark Long |
| SKU: | 34292 |
| ISBN: | 978-1-61866-029-9 |
| Release Date: | 2011-12-31 |
| Duration: | 8.5 hrs / 108 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
