C# for beginners [WPF] 3. XAML

today everybody Mick Dingle here again with another WPA tutorial this time we are having a look at sam'l now specifically we're having a look at what it is how you use it how you add things to it and then finally a quick example to wrap it all up at the very end in the previous two videos I really think that I just gave you a very broad stroke of WPF and GUI programs in general so this video this is the first skill video that I want to focus on a concept and give you a fair bit of detail out of it while still trying to stick the 10 minutes of course but that's just what I'm going for in this particular one now having a look around this interface you probably or visual studio interface not just my little blank program you may have noticed that enamel is plastered everywhere if you don't really know my videos channel is spelt XAML and stands for extensible application markup language they didn't take the e for the word extensible they took the X because the X is just cooler and it sounds like XML if you've never heard of it don't worry about it if you have I'm sure that hit a little bit of a bone for you so extensible application markup language is a fancy way of saying a language you can use to write your interface as opposed to drag-and-drop and coloring it in okay so I personally prefer to design all my interfaces just purely in sam'l these days because I'm so used to using things like HTML that it's just become second nature to me now if you've used HTML or XML in the past this is going to be an absolute breeze for you ok and some of the basics you won't even have to be told but in there saying that I actually don't like my interface for studio setup this way I prefer this to be the minority of my interface this designer section up here and down here I prefer the sam'l to be the majority now I could easily click and drag right here on my mouse is to make this bigger but I prefer to click on this button which swaps the tool around so examples at the top and the majority and then my designers down the bottom in the minority okay and I'll generally speaking zoom out a little bit just so I can see the majority of my interface at once so what I tend to do is I'll write my code up here exam and the the effects are pretty much immediate on the interface down here and I'll just use this as a little bit of a check up to see if my buttons and all that are looking good there's enough space and the colors are all good but in saying all that let's just get right into Zam or finally sam'l is based around what you call tags and every time you draw a tag it's looking for a control to draw to the screen so similar to the thing I've already highlighted one for you and that's great all right every window you create comes with all this built in and that includes a grid so when you open a bracket like this put a word inside it and then close the bracket you created a tag okay and I like to call these diamonds so if you enclose something in a diamond we call it a tag you also notice that it's got a little partner down the bottom if you haven't figured that out already but this is the opening tag to say this at the beginning of a grid and this is the closing tag or the end of a grid and it's the only difference really is that forward slash at the beginning of the tag that's the same as HTML and you see we window he starts up here and in fact that's the end of the opening tag and then he closes down the bottom of here now what are all these red things inside the window tag well these are called properties now I'm not going to talk about any of these just know that they are incredibly important to actually create your sam'l interface so don't touch them unless you really know what you're doing down here you see we've got three properties title height and width they're only separated by space which is really handy and you see in quotes who have put values to denote what the properties are you are now actually the properties you see here match the properties on the right so if I change this to what doing you see first of all down the bottom it's updated in the title bar automatically for me and on the right it's already updated over there as well so you are more than welcome to change your properties up here example or over here on the right ok it makes absolutely no difference where you change them now I can even change the height to make it a bit shorter you see it just shrunk a limit there and I can make the width a bit longer if I feel okay and it automatically updates down the bottom if I make it stuff up like forgetting a quote like that you'll see we get error messages just like we do in code now it's really important as always read the error message and try to figure it out it always look at the one at the top before you look at the one at the bottom okay just giving you a little heads up there now if you ever see this let me just click down here for a moment if you get this error message do not from error message do not freak out okay it just means you've got an issue in your zamel that you need to go and fix quickly alright and if I put this in you'll notice straight away it comes back it's pretty snappy okay I have got a powerful computer but it is fairly snapping all right these are the basic tags and these are the basic objects or controls that are given to you when you're writing it so to write your own ones I'm going to leave grid here I don't want to get rid of him now explain why in a moment but I'm going to make this a little bit taller again and a little bit shorter maybe not shorter skinnier and then let's add some buttons to it so for example I'm just going to open a bracket for a tag type in button with a capital B if I can spell tonight close that tag and you see it's created a button but it's taken up the whole space of the grid okay and we'll get to the issue about that soon but let's put some words on the button so that's the content property to put words on buttons so in here so just before I close the tag capital C for content equals and notice it puts the quotes there automatically I absolutely love that you can just put something like press me and there's my button and simple as that so I actually find it much simpler to write a button than it is to click drag select the property over here to type in the content I find it easier just to open a tag type button content equals press me it makes my life a lot easier I personally think now sometimes you'll see in buttons let me just take this I'm going to cut that get rid of content you'll see people make objects like this and you'll see it made absolutely no difference to how the button looks and that's because what I had before is essentially the exact same thing as well right now we're not got a tag opening and in between the opening and closing tag I've got something I'm setting the content of that control okay so theoretically this button is actually setting the content of this grid okay and this crib is setting the content for this window okay so that's just really important to look at in that sense now what I'm going to quickly going to do I'm going to change this grid I'm going to get rid of him so I'm going to backspace him and watch the closing tag because he dissipates as I get rid of the opening one as well I'm gonna put in a stack Pass I like stack panels okay and what they do is they stack vertically or horizontally by default it's vertically so the more controls I add that if I can spell at all they get stacked vertically on top of each other in the exact order in which you write them okay so I can do that for any object I can make a text block and just go welcome to the mammal tutorial and there it is in the middle and let's say I want to get the text in the middle I can change the text alignment property set that to center and you see now the words of smack bang in the center of my screen and then I can use let's get a text box in there because why not this is my text text not test all right in so forth and so forth so that's how a stackpanel the haze and that's why I got rid of the grid okay reason being is if this guy was a grid I just get the last object I was created that takes up the whole space so that's just one giant text box at the moment the Creator is designed to split into rows and columns and we're going to do at the end I'm gonna go back to stack panel for a moment okay so from this point it's pretty straightforward so let's add in just one more let's do a list box okay now when we add content to a list box we're actually adding items what I personally like to do I like to put list boxes on multiple lines like so and inside when I set the content you can go this box item and just like my last video I had Apple as my first one this box item banana so rather than going through that massive arduous interface that we went through to add all those list box on did I find actually quite slow I can quickly add items to all this box just by doing this right it's very very simple so when I hit start just like before all these objects were get back in behave as they should these are buttons this is a text box this is a list box okay everything looks really squished and ugly and that's because stack panels take up as little space as I possibly can that's their default behavior now let's say for example I want to start naming these things because if I want to add code to a button that I have to name it first so that's what it gives away what I'm going to do next I'm going to add some code to press me button so the way to add a name you can either type it over here if you want but we're focusing on zamel so I'm going to put space we're going to put a little X put a colon and there's the name property so if I put equals type in button press me like so okay and then to add code using zamel is really simple I love this when you press space type click there's the lightning bolt indicate that it's an event put equals and you get this new event handler and it already tells you here what's going to happen it's going to bind an event to a newly created method call button press me underscore click just like what we did when we went to the lightning bolt over here and we double clicked in the Kliq box okay so zamel is doing all of that hard work for us so I'm going to double click on here all right you see it generates that if I want to go to the code you simply have to right click and go ghosts definition and there's the shortcut so f12 and back room the code so let's do a quick message box okay so hopefully this is not too bad so far all right sam'l is really really handy in my opinion it's just such a good thing to program in all right so let's face this out a little bit it's already starting to look a little bit ugly okay that's not too bad the last thing we'll introduce before I do a quick little example using the grid okay is this idea of comments in general unfortunately you don't use forward slashes in the saml you'd use a HTML comment and that B is your open a tag exclamation point and they already telling me what I'm going to do is double - okay a single line comment looks like this and you just put your comment here comments go in here multi-line comments let's say I want to get rid of my text block and my text box open up a comment like you just did and then close it with a double hyphen and the closing of the breakout tag just like that that's a multi-line comment for you there alright so that's pretty straightforward you've got a single line and a multi-line or good to go so on that note I'm going to delete all of these tags so if you want to copy any of this just pause the video and have a go but we're going to use a grid and we're going to organize our controls into a nice little nice ish looking form it's not going to look very pretty but it'll look better than this back panel so the first step here now is I'm going to change that panel back to a grid like so and then what we're going to do is we're going to set up our grid to accept the number of columns in a number of rows so the way we start setting that up is you open up a tag you type grid and you put a dot after it and you put column definition okay and I like to press empty here so I've got multiple lines to write my column definitions so this is just a subsection of grid or sub tag I should say of grid where we can specify how many columns we're going to have on our form now what I'm going to do I'm just going to keep it really simple we're going to have some text boxes where you can enter your first name your last name let's say what else can we put there the agenda will put some radio buttons in there to make things a little bit more complicated and they'll have a big button at the bottom that's just okay so what I need I need at least two columns for that one on the side for the labels that say first names last name and a lot and then the text boxes on the right so let's put in two columns and the way you do that open a bracket type column definition for your tag and then what I'm going to do is show you a new way of closing attacks rather than having a separate closing tag you can actually end it in a single line and the way you do that is put the forward slash at the end okay what this is this is a single line tag or a single tag that opens and closes itself all in one okay the reason I do that is because there's nothing that goes inside a column definition there's no content to it so I can open and close it straight away now I want two columns so I'm going to put two of them in notice here it's already splits my form into half alright so now we need to come underneath the column definitions sub tag and let's do the sub tag for row definition okay let's see if we're going to remember I said first name last name gender and then a button so I need at least four rows so same thing as before but just change the name row definition and then do a quick close and I want four of them and here we go let's just have a quick look at the designer and I'll flick back in a sec there's my form all right not an absurd perfect I am going to change a few things about this but I want to start inserting my late or not able sorry text blocks and my text boxes and my button in this first before we do anything so swap back if you need to copy that down pause and let's do so but let's start inserting our text blocks to start with so come underneath the road F initial make sure you're separating those I prefer to put in comments at this point okay like so and you can just put start of text block I'm going to do all the text blocks first in that first column let's open a tag type text block okay I don't need to give it a name thankfully and let's start with just first name like so and you'll see it appears over here wrong over there okay pretty straightforward yeah let's put in another text block or last name okay if you can see down the bottom it's already causing a problem they've both appeared in the same spot in my grid they haven't appeared in the next row down there in the right column but not the correct row so what I'm going to do now is set some properties to the text blocks technically I don't have doing this one but I will all right to specify what row and what column that they should appear in so the way you do that put a space just before you close the tank and put grid dot row put an equals and the first row this one here is number zero and then we do column grid column equals zero all right dad did bugger all because you already was in that spot but I don't know I like to be a bit more thorough okay I'm going to do the same thing for the second one red dot row now he's in the second row so that means he gets a one and then the first column like so so now he's in the correct spot so let's do another text blocks for the gender the grid row equals to grid column equals zero and then we go gender I'll put a colon just for good measure and already you can see text blocks set up there in the right spot and the great thing about using a grid is when I resize my grid let's go back the actual controls resize as well and this is awesome for keeping your program looking nice when people are fiddling around the Desai's of it okay or maximizing it or whatever like that notice the words don't get any bigger as the form gets bigger that's something you would have to take care of but it's at least a little bit nicer allowing you to drag your form around if I want using a grid and all I did was drag controls on like I did in the first two videos this wouldn't occur alright you wouldn't get your objects moving around and scaling with your whole window anyway so that's the text locks let's get the text boxes in there we only have two of them so comments stars of text boxes now the reason I put comments at the top is to just separate fuse am a little bit and it's just easier to read so first text box is going to go in the first row so 0 but the second column 1 all right close the box you can see they highlight that entire section it won't look like it's got much in there but there is actually a text box there now I'm going to cheat and I'm going to copy and paste this once bang put a text box in the next book not column next row now I should have a text box next to first name and last name deber okay as I said it wasn't going to look pretty but it's functional and it actually is a lot better than the stack panel the last thing I have to do I have to get my radio buttons for the gender so start of radio button so let's just open up a tag radio button ok grid dot throw equals and let's put him in Row 3 first number 2 3 columns pickles one and the first one we'll just put female there he is I'm going to copy and paste this and put this one as male now there's a bit of a problem how the heck can we put both these radio buttons in the same box without them stuffing up like that ok the easiest life is that we've already used it is a stack panel so you can actually put a stack panel within a grid ok because I'm going to get the male and female to sit on top of each other ok that's going to really bad don't care get a move on so I'm going to start a stack panel here ok close it off straight away I'm going to move these radio buttons to the content of the stack panel like so the biggest problem you got now is that we can't specify the grid in the column of the radio button we're going to specify the grid and the row or so the row and the column of the stack panel instead so when we cut this get rid of this one pasted in there and there we go we've got a male and female sitting together nicely in that little section there pressing play and you can see it behaving okay again resizing actually works pretty well with this kind of stuff all right one last thing to go and then we're actually gonna play around with a formatting a little bit before I finish up this video okay I've gone way over my 10 minutes I can tell all right we need a big button so one last comment I don't really need it but start of the big ass button why not so button let's do the grid row equals what's hey is 0 1 2 3 good column we're going to start them in the 0 now that might be a bit confusing because I'm just going to put okay really we don't want the button just sitting here I wanted it across the entire bottom of the form so what I'm going to do there is I'm going to use a column span another property up here grid dot column span equals 2 so I'm indicate I want to go across 2 columns and you can do the same thing for rows as well if you ever want to start it up and I've got my little form going on here now let's clean this up a little bit so the only things I really want to change about this first of all I want to get these text blocks over here they shouldn't be taking up such a large column that's way too much space so those text blocks okay I still want these guys to take up the rest of the space zone ok that's going to be pretty easy too pretty easy to do ok and the last thing is we might make the button take a look at more height all right and we'll leave it at that so let's have a quick look up at the top we're going to go back up to our column definitions to start with so over here this is actually what's controlling the the width of the column okay so Renee considers one Asterix and you call that a one-star and you can see one start over here the way star system works quite interesting I think basically Microsoft counts up all your stance okay so there are two stars in there and then it looks at how many stars that you have for each column so for example this has got one star one out of two so 1 over 2 is 1/2 so it gives you half full okay and then this one over here 1 over 2 is 1/2 but they both get half before to show you how that actually works if I go with equals 2 star you see I now get 2/3 of the form because we add these up to 2 plus 1 is 3 and then this gets 2/3 and this gets 1/3 okay and then I can do the same thing I can go right up there set H star and you can see it's getting 89 but the form and that's getting one not of the form and that's how the stars work it's pretty decent system stars are really great too when you want flexible forms because everything shuffles around as a percentage okay because it only gives you a nice of that section this looks really bad so let's give it a set value because these text blocks here aren't really going anywhere they're not moving so I'm gonna get rid of the H done and let's try 100 it's pretty bang on actually yeah I might leave that press play you can see that this guy now we've got a nice short column I keep saying short skinny all right and when I resize though because it's the set value text blocks don't move but this one because it's using a star it's going to take up the rest of the room for me okay so it's very handy but if I shrink the form too much okay I can't but if you shoot the phone too much you will lose that column because they're going to set one next to it that's pretty good that's the columns are really good I think at that point now let's use the star system a little bit to our advantage for this okay button down here so the ok buttons living in this current row down the bottom so we're going to change it all right let's just give it to start and have a look at that is it any good probably a little bit too big okay don't know how I can say that when the rest of the film looks so butt ugly but it's probably too big let's go 1.5 and this is where things get a little bit weird because you can use fractions in the star system and that looks a little bit better than 2 all right so on that note that's actually exactly what I will leave this video and in the next video we're going to have a look at sampling styles so if you want to start dialing up all your buttons and your text boxes to look the same that's what you're going to use in general style but anyway thank you very much for watching everybody you know how to like subscribe and comment I'm sure you've done it plenty of times for do it for me as well but I'm going to see you in the next video thanks for watching

Channel: Nicholas Dingle

Views: 8,590

Keywords: C#, C# Language, Programming, Programming Language, Tutorial, Programming Tutorial, Microsoft, Visual Studio, VS 2017, C# 2017, C# Basics, Programming Basics, C# for beginners, Unity3d, Windows Applications, WPF Applications, WPF Apps, GUI Program, GUI App, GUI Application, XAML, eXtensible Application Markup Language, Tag, HTML, XML

Id: UGVphzfuV1g

Length: 24min 49sec (1489 seconds)

Published: Wed Mar 22 2017