🔥 C# GUI Tutorial using WPF | XAML | - Windows Presentation Foundation

what's up youtube this is dennis panyuta for tutorials.eu in this video you are going to learn wpf so the windows presentation foundation framework that allows you to build beautiful uis with c-sharp and xaml okay so you're going to learn how to build a ui from scratch how the different controls work such as buttons images and so forth how the panels work such as for stack panels grids and so forth how you can basically design your application and structure very easily using xaml but also how to use code behind to achieve that as well so you're going to basically learn how to use your c sharp skills in order to build and beautiful ui that you can then actually interact with it's a lot more interesting than just having a console application so if you want to finally build a cool application that you can actually interact with and see buttons and all of that then this is definitely the right video for you or if you want to just improve your wpf skills and want to maybe get a career in this field then this is also the right video so this is a course that you get for free pretty long course you're going to learn a lot of stuff and this is just the first third of the complete course that we have built so there is an entire course that awaits you and if you want to get that course then check out the link in the description below there you will get it with a huge discount and if you don't know c sharp yet and you want to still learn wpf then i would recommend to check out my c sharp master class or my c shop videos first okay all right so let's get started all right welcome so what we're going to build in this video is going to be our first little wpf project okay so let's go ahead and create a new project and here i'm going to search for wpf and you can see that there are two options that are wpf apps and i'm going to use the net framework okay so let's select that and now give it a name so i'm going to call this one wpf hello world and you can then select where you want to store this project as well as the solution name i'm going to leave the default here and then you can select the framework so the version of the dot net framework that you want to use for this in my case the latest version is 4.7.2 which is not going to make much of a difference even in newer versions at least not for the examples that we have in this video as well as for the next few videos either okay so once you're done with that click on create to create a new wpf project and what you will be met with is this designer here in the main window.example file okay so you're in directly in the designer where you can now go ahead and create your own designs you could use the toolbox here okay where you can just drag elements into your design or into your main window in this case you can add labels images and all those kind of things but doing that is not a good practice because now you have this ui where you have a certain margin and yeah this basically is creating the code for you here in the bottom so you have the button as well as the label and this might work if you want to quickly build something but if you want to build a sophisticated ui it's really better to just do it using xaml directly so what i'm going to do here is i'm going to get rid of those two lines that were created for me and i'm going to look at what i have so i have this window with a bunch of namespaces and i have an extra presentation where i talk about what this x class what these namespaces and so forth mean in more depth okay what's important is that this x class here says okay so inside of your project wpf hello world which is the name of my project the dot main window file will be the class that i'm going to use so we have this main window file and then i have this main window called behind that's going to be the c-sharp class that will be used for this project okay so here you can see that your project has a title which says main window here at the top so you could change that to hello world window for example this will then change the title of your window if you run your application you will see that basically it creates this window for you where it says hello world window at the top now you can change the height and width of this window for example if you want it to be 300 times 300 pixels it will be this squared shaped window if you run it again you will see that by default it will just take this size of 300 times 300 pixels what you can also see is that you have this minimize into tray button maximize as well as close button okay so they are the default controls that you have directly inside of your window and then we can see we have this grid here in the middle so i'm not gonna go over what a grid is in this video we have an entire video talking just about how to use grids but what i'm going to use here is just going to be a label and i'm going to say hello world in this label okay so just follow along like so inside of the label tag so this is an opening tag and this is a closing tag as this here is the opening tag for the grid and this is the closing tag for the grid you can now see that we have this text saying hello world now let's run our application real quick and then we can see we have our first little application where our text is displayed okay so now of course you can change that you can go ahead and add a button in here like so even though that won't work correctly because we're using a grid and as i said we're going to cover grids in more detail but i'm just going to change that to a stack panel real quick we're going to look over what stack panels are in depth as well but basically the idea behind stack panels is that you stack elements on top of each other or next to each other depending on the settings of that stack panel because we are not changing any settings it will take the default where items are stacked on top of each other so i'm going to add a button here which will say click me and now you can see that we have this hello world text and underneath we have this button saying click me now if i run the application once again then you can see that i have this hello world text and then the click me button which even is interactable with but of course it won't do anything because we didn't implement that and we're going to do that in the next couple of videos we're going to see how to use events to basically do something once we click on buttons how to interact with the application once we hover over an element to change our ui how to create a beautiful ui and how to structure your graphical user interface in general using all different kinds of ui elements such as labels buttons calendars date pickers sliders check boxes radio buttons and so forth so there is a lot that we are going to cover in this course so for now you see you have your first little hello world application and i could move on and explain to you everything that happens here in these files and so forth but we're going to do that in the next couple of videos okay so we're going to look into every single part of our application step by step to understand what these files do to understand what code behind is which is the c sharp file and how we can interact with it how we can use it to create our ui directly while running our application so that means during runtime and not just in the designer before we run the application so there is a lot awaiting you and i'm super excited to teach you all of that but for now one little exercise change the text from hello world to hello and then your name and if you want to you can also change the text that will be displayed in the button while you're at it okay so i hope you paused real quick and changed it so the label will now say hello dennis and this one will say welcome to the course okay and now let's run this and there we are hello dennis welcome to the course all right so i hope you will enjoy this course i'm very excited to teach you everything about wpf that you need to know to build your own applications and to get a career in wpf if you want to and now let's get started quick pause this video is sponsored by one of my courses so you're learning something about wpf in this video and i have a completely sharp master class which teaches you a lot more about sharp if you feel like you need to learn more about shop to understand everything that's going on and then if you want to learn everything you need to know about wpf definitely check out my wpf course it's a 15 hour course which will teach you everything you need to know about wpf building an entire windows store clone using my apps in order to achieve this metro design which is the design language so to speak for the latest windows 10 applications you can find a link in the description down below and there you got a huge discount so don't miss out get one of the courses or both of them now and now let's get back to the video as we are going to use example throughout the course it's really important to understand what examl stands for and xaml is an important part of wpf and we're going to see what example is and well throughout the course we're going to see how to use it efficiently okay so example stands for extensible application markup language so this a is basically the addition to xml if you have ever worked with that and it's microsoft version of xml for coding a graphical user interface so a gui basically the ui buttons that you can see example is an essential part of wpf so of the windows presentation foundation framework and each gui element like a window or a page will consist of a xml file and a code behind file so the code behind file is a c-sharp file that means that we can work with this code behind file the c-sharp file modifying things that we see in the example and basically also building uis using c-sharp entirely we will see how to do both together they create the window or page or user control that we are going to build so the xml file characterizes the graphical user interface with all of its elements and this sharp file on the other hand the code behind file handles all the events and has access to shape and can manipulate the graphical user elements and each line of xml code can be written in the c sharp code as well even though then it would not be easily visible when editing you will only see it once you actually run the application which is of course a disadvantage at itself so writing example is pretty straightforward and each element needs an opening tag and a closing tag so for example we have this opening tag label and then we have the closing tag label so they are the same except for this one slash just after the less than sign okay so you have less than sign keyword greater than sign for the opening tag and less than sign slash keyword greater than sign and opening and closing can also be done in one line if you use it like so where you have the less than sign keyword slash greater than sign in this case it was the label between those two tags you can add the content that you want to put in there and this content can vary depending on the tag that you're using so for a label it can just be a string so it can just be data but can can also be other types of content so you can modify the label with the content that it has so you have the opening tag and the closing tag and then you have the content which says hello in this particular line this can also be written like so where you define the content property so this is a property that you are assigning two labels so label has multiple different properties one of them is in fact content and here we assign hello to the content and as we don't need to do anything inside of the label tags we can also directly close this label tag by using the slash here at the end so here the opening and closing tags are in one line as i just stated so we can also have something called a stack panel which is a panel and there are multiple different panels basically they are containers that can contain multiple items okay so here let's say we have a stack panel and then we have two buttons here and the stack panel tag needs to be closed as well so here the content of the stack panel cannot just be described in a content tag it has to be designed as you can see here so this would create two buttons that are on top of each other inside of a stack panel and as stated the stock panel does not have a content property so you need to design it this way so let's look at a button okay so if we want to modify a button we can change its properties so here for example we are changing the font weight property from the default which is normal to our own definition that we want to use and that is bold so we are going to make the text of the button bold and then we set the font size of the button to 20. so here the font weight and font size are properties of that button and the button can have well it has a bunch of other properties that are there by default but you can override the default values and you can change how the button looks and behaves this way so each element has different kinds of properties most are inherited from content control like the two above others are specific to the control in question and content control is just a different type of control so button is a control that inherits from content control and that's why it has all of its properties but then it can also have individual properties that only the button has for example a complete list of each control and what properties it comes with can be found in the microsoft software developer network because this list can be very very long so it can have like 50 different properties for example and a bunch of events and dependency properties and so forth so i would recommend to check out the documentation if you want to really go deep into all of the different properties but most of the time it will be the same four to five properties that you're going to modify for any given ui element okay so if you want to have more resources on that i would recommend to check out the xml overview and xml syntax in detail so the example overview can be found in the documentation if you want to really dig deep into it it's basically going a little deeper into what i just said and then alternatively the example syntax in detail there you can understand a little more of how the syntax is built in example how enumeration works and so forth but no worries we're going to go through these things not through the file but we're going to use most of the features that you see in this article throughout the course so we're going to go over basically most of the elements that you see here and the ones that we haven't covered is something that you could then for example check out on this page even though most of the things that you will ever need will be covered in this course anyways so only if you have super specific requirements then you would have to really dig deep into these kind of pages but the course will prepare you sufficiently so you would be feel super confident to fully understand what's going on in these files once you're done with the course okay so that's it for this video see you in the next one in this video we're going to check out windows partial classes and some example syntax so that you understand a little better what's going on when you create a new example file and by windows i don't mean the operating system but i actually mean a window of your application okay so let's look at the window so the window class is inside of system windows.window and it's inside of the microsoft software developer network every new wpf project has a window called main window so whenever you create a new project you have that file automatically in there and it's created by default and serves as the root window of your application so basically this is where everything starts so where your application starts from so to speak so the window provides a title bar the maximize button the minimize button as well as the close button and you can see an example here so this is the main window with all of those buttons so you have the title actually there's also the icon here at the top then you have the title and then you have the three buttons as you always have in windows then let's look at some important window properties the window class has many attributes that define the look and behavior of your application and here are a few important ones so the first one is the window state which controls the initial window state available settings would be normal and maximized or minimized so normal is the default setting which is what you should use unless you want your window to start either maximized or minimized by default so whenever the user starts the application it will be whatever you set it up to be then the windows startup location which controls the initial location of your window the default is manual which means that the window will be initially positioned according to the top and left properties of your window and other options are the center owner which will place the window in the center of its owner window and center screen which will place the window in the center of the screen okay so these are the different options that you have here and then the topmost if set to true your window will stay on the top of other windows unless minimized and the default value is full so this is something that you have to be very careful with you can use it but you shouldn't overuse it because this can be super annoying because if your window is constantly on top users might be very unhappy about it so really only use that if it actually makes sense for your application and then size to content decides if the window should resize itself to automatically fit its content and the default is set to manual so the window doesn't automatically resize in that case other options are width and height and width and height and each of them will automatically modify the window size horizontally vertically or both okay so that is something you need to take into consideration when setting up your application and most of the times really makes sense to have an automatically resized application that will basically size based on the size of the contents that is to be displayed in the screen all right so the show in taskbar is set to false your window won't be represented in the windows taskbar useful for non-primary windows or for applications that should minimize to the tray and the default value here is also true all right then we have the icon allows you to define the icon of the window shown in the upper left corner next to the window title as i have discussed earlier and that's essentially it but there is still a lot more to know so if you want to read more about it please check out the microsoft software development network the msdn pages otherwise this would become a 30-minute presentation of me just talking about the different properties of a window and i think it would be super boring so let's skip through it so let's look at the window example file so here you can see the different code that is created for you by default okay so there's a bunch of code that is generated for you and you haven't even typed a single line at that point so let's look at what all of these xml and s stands for and so forth so first of all x class this specifies which cs file to use in this case so in our case mainwindow.xml.cs this file is also created by default when a new project is created so this is the code behind it's a child node of the mainwindow.xml file so the code behind is a child node and why is that well because we're working with partial classes so what is a partial class well it's a class that is only a part of the entire class so to speak so you can see here the partial class that we use here for our main window basically the c sharp code is just a partial class and just a part of the entire file and combined with example it will be the complete file so to speak and typically it's referred to as code behind so i used this name before but basically that's what it's all about and then we have this initialized component at runtime it's combined with example file to make a full window so this is the method that will then combine it basically it will run your example code and we'll display it this combination is performed by the call that we see here this initialize component method then we have this xml and s which stands for xmlnamespace and therefore we need to understand example a little better and before we get into this xmlns so examplenamespace is an extension of the xml namespace okay so xml stands for extensible markup language which is a markup language that defines a set of rules for encoding documents in a format that is both human readable and machine readable that's really the idea behind it okay and the techniques of specifying example namespace rely on the xml namespace syntax you can read more about it in msdn if you really want to dig deep into this because otherwise again this would really make this presentation quite boring i think so therefore this xml namespace defines the namespace in which to resolve xml element names and it is defining the default namespace by which an xml element name should be resolved then let's look at the individual namespaces that we have here so we have this example namespace which stands with this x keyword so is it is a non-default namespace it defines a qualified namespace for example specific elements and if you want an element name to be resolved within the namespace qualify it with x okay so for example label empty space x colon name and this will then resolve the element within the namespace and then looking at this again you see there are two name resolutions in this definition one being the label because it's an unqualified name it will be resolved in the default namespace which is wpf and then you have x colon name where name is qualified with x and will be resolved within the xaml document then let's look at this d d is basically the designer okay so xml ns colon d is allowing us to see the designer and this well basically it provides visual studio with the right tools to display our xml code in a design format without having to build and run the application so basically you can write all of this example code and this designer will try to interpret it for you and display what you have built there so to speak and the designer uses the prefix d to perpetuate the design state so what is perpetuating a design state well suppose the design height and the design width are set so 1 450 pixels the other one 800 pixels this code can often be seen when creating new controls but this is just basically telling wpf designer which height and width to use when displaying the control in the designer this will not have any impact on to your actual application when you run it so on the actual height and width of the window or the control when you run the application because this is only for the designer this is not going to impact it during run time so this really just the height and width for the designer here these parameters are optional and have no effect as i said in the runtime and then you have this mc mc does not stand for molten core for the wow players out there mc stands for markup compatibility and what is markup compatibility well suppose you have a microsoft word 2013 document that employs a feature introduced in only microsoft office 2013. now ideally you want the document to remain interoperable with word 2010 even though word 2010 will not understand the new feature okay so this is often the case so you have the latest version of microsoft office you save the file and you want to make sure that it will be visible on all the versions of word as well even if you use new features so this is the markup compatibility that allows a word 2010 software to open a file created by word 2013 and in wpf mce so this xml namespace leverages a markup compatibility pattern that is not necessarily example specific for example there is some code to be interpreted strictly by the designer so is that confusing well i guess it is but nevertheless you don't really need to know all about these things in order to build wpf applications i think it just makes sense to have a general idea of what these things do if you want to dig deep into this i would recommend to check out the documentation for this okay so let's look at mc ignorable mc ignorable d here for example we'll just say okay the mc should ignore d which means it should ignore design stuff such as the design height and design width so provides example definitions that are ignored by the example processor allows to specify properties used by the designer that are ignored at runtime and this is made possible by mc by markup compatibility now the interesting part will be this local thing and that's really something that we're going to use as well as supposed to xml namespace mcd and ignorable which are considered boilerplate code often ignored and seldom changed the alexa lns local is important in the sense that it defines how other controls defined in this project can be used in this xml file so for example if we want to access items that we have in our project we could just go ahead and use local colon and then the project name and then the folder in which we have our project file that we want to use so for example a user control that we created ourselves and this tells the compiler where to find the my custom control and this is also going to be in fact something that we are going to use okay so that was mind-blowing i believe there was quite a bit of stuff that we went over and this is really the kind of things that i believe makes sense to have heard once and have a certain idea but it's not something which you need to memorize for all of your life it will be fine for you to just use it and we're going to just use these kind of features i just thought it would make sense for a beginner to still have a certain idea of what all of this stuff does because otherwise you have all of this code and you have no idea what it all is for and it might be confusing so that's why we made this video so thanks a lot for your attention and i'm sorry for the long in-depth guide here but i think it it's just good to have it available for you if you were interested all right so see you in the next video in this video we're going to check out the wpf boilerplate code and therefore we first of all need to understand what is border plate code well boilerplate code are lines of code that are duplicated in multiple files or sections with little to no variation if left out the program will no longer compile and what are some examples in wpf and what do they do well let's look at it so here we have the app.config file and creating a new project places an app.config file in the root of the project and it contains this code that you can see here so first of all it defines what kind of xml version is used then it defines the encoding that is used in this case the encoding will be utf-8 which is basically the keys that you have on your keyboard and a couple more letters that can be used for example and characters in general then you have the configuration tag with the startup tag and then the supported runtime version okay so let's look at those in detail so this is where the net runtimes are defined which the application supports so you can change this if you want to run a higher or a lower version of net and the xml version and encoding is also defined here as you saw so the appconfig file is also just an xml file and the goal is to contain the variable configurations of your application so this is something where you can change the version of net as i said it's the main place to store for example the connection string to a database so if you ever want to use the database in your app the app config file would be the place where you define the connection string and the connection details to external services if you ever use those then you have the application settings that you can set up there and it also contains and it also contains other details on how the application should be run and or hosted so let's look at how to set up such a connection string first right click on the reference and add references then select the system.configuration from assemblies and once added we can start adding custom configurations so this is how such a database connection string would look like so you can see here this is where it is this connection string which is defined and you add a default connection string to it for example that's just the name that i'm going to use you could give it a different name then you define the connection string details which are the properties that you see here that are set and then the provider name in this case the provider will be sql okay and then in order to use that connection string here you can access it in for example your main window so you use your configuration manager.connectionstring and then you use that name that you have defined earlier in squaredbrackets in quotation marks and then dot connection string so here it will access this name here and then this connection string okay so basically the connection string also needs to know the user name as well as the password in order to access the database all right so that's it for the app.config file let's now look at the app.xml and c-sharp file so this is the unedited app.example file with the application tag a couple of namespaces as you here see here and then startup uri basically saying which file should be the startup file of our application once we run it and you see the default is main window.example so if you're using different windows and you want to open a different window as your startup uri you would have to define it here so as you see that here this tells the compiler to load the main window as your startup window you can change it to any window you like if you want to so then the app.example defines global resources that may be used and accessed from all over an application so for example the global style depends the brushes and so forth so if you want to define how the style should be for the whole application you can do that here we will make use of them later on in this course and then you can see how all of that is done and will make a lot more sense okay so this was just to give you a little bit of an overview what this file does and what two files do basically and most of the time you don't even touch them only until the point where you for example want to use a database and we're going to see how to use them when we need them okay so that's it for this video see you in the next one in this video i would like to show you how you can use names for your ui elements in order to access them in your c-sharp code meaning in the code behind file okay therefore i'm going to create a button here and i'm going to give it a name okay so let's create that button and it will have a name property of my button okay now this button will also have a text so you can either enter the text directly into the button tag or you can also give it a content property of saying hello world okay so i could have used text as well a text block or something like that but i'm just going to use the hello world text for the content okay now this will be a huge button in our application if we check it it's really a boring bot but i would like to change a couple of properties of that button and only in runtime okay not directly when designing it but only once the application runs i would like to play around with the values here okay so therefore let's go over to our code behind which means you need to open your main window example here in order to get the main window xml cs file to appear and display and now you can click on it or double click and you should get to this window and here you see that we have this partial class which is of type window and it's our main window which is basically going to be a part of our entire class so the example file is so to speak part of the class and this code behind is the other part of the class and then we have a constructor which calls initialize component which basically initializes all of the components that are inside of the window okay basically this grid with the button now what you can do is you can access the button and you can change its properties up and the cool thing is we can do that very easily so i can just go ahead and call my button here or access my field my button you can see it's directly there it's of type button inside of main window and there there is this my button item and this my button of course is the button that we created here so this button here because we gave it a name and now we can actually access this button using that name in our c sharp code now i can go ahead and access all of the properties as well as events and the dependency properties as well so i can access all of that directly from here so let's say i would like to change the font size so once the application runs i want to change the font size of that button to be something like 50. by the way if you want to know what you need to enter for a particular property you can hover over it and visual studio will tell you what this is in terms of type so you can see the font size is a control that is of type double okay so we can get or set the font size using the font size property you can also press ctrl and hold it and then click on font size and this will then open up the definition you can see here that's where the font size is defined it's just a double property inside of the control class okay you can see over here that's the control class so now once we run the application our font size should be significantly larger and you can see now the hello world text is a lot larger okay now i would like you to play around with this and change another property okay so i would like you to change the content of the button once we get into runtime so once we run the application it shouldn't say hello world but it should say hello and then your name okay so i hope you tried it and i hope you didn't do it directly here because that would have been too easy i hope you actually did it in code behind okay so here i'm going to access my button and then get the property that is called content and now this should say something like hello dennis in my case because that's my name okay so you can hover over content and it will tell you that it's of type object well that's unfortunately not really helping us so the cool thing is object is a very flexible type and in this particular case we can use strings and we've seen that because here we assign the string to the content but you can assign other things to a button as well it doesn't have to be of type string so it can handle multiple different types of objects okay now let's run it again and it shouldn't say hello world but it will say hello dennis there we are so we have our hello dennis here i hope you tried it and you were successful with it and that is basically it that is how you can access properties directly in your code and how you can change them so that's it for this video see you in the next one welcome to the controls chapter in this chapter we're going to check out a bunch of different controls and controls allow you to basically display something in your application such as buttons such as buttons labels images text boxes text blocks and so forth and we're going to see how to use all of those and what kind of properties that they have and play around with those properties so that we get a bit of a feeling for what we can actually do with these and how we can adjust these controls and this is going to be quite important because it's the fundament of any application so in any application you're going to need these controls maybe not all of them at all applications but most of them in most of your applications so it really makes sense to really understand what's going on here it's a quite easy start into the whole wpf topic because there will be a lot more complex topics later on so be prepared for that and first of all let's start with the easy stuff in this chapter so see you in the next video in this video i would like to show you the text block control and a couple of inline features that you can play around with in order to format it and we're going to see how to use a text block an example but also adjust it in code behind so using c sharp therefore i'm going to create a new project and i'm going to use the wpf.net framework app and this one will be called text block demo once we start this up you can see that we are inside of a window so our main window example is a window which contains a grid and we have an extra video on grid so if you want to know more about that check that out but let's have a look at a text block specifically so there are different types of controls and we're going to see later on in the course also how to create our own controls but for now let's look at how we can actually create such a text block and define some data in it so for example here i create a text block and this will say hello world for example okay so if we look at our application we could see here at the top left there is this hello world statement and let's make our window a little smaller so that this actually will take any effect so it will have a height of well 50 is probably not enough let's make it 115 times 200 maybe this will be enough for our block here okay so we can see it a little better now it just says hello world there so that's what we can do with our text block we can just display text but we can do a lot more here we can actually play around with formatting so we can use inline formatting in order to change our text up a little bit for example i could make this world statement bold in order to do that i just need to use the bold keyboard and everything that will be inside of the bold tags here will now be bold so you can see now it says hello and world as well as the exclamation mark are bold if you want to make a text italic you can just use something like and hello you and this u if i want to make it italic i'm just going to use the italic keyword and this will be like this okay and u will now be italic let's say you would like to have a line break well in order to create a line break we can just use the line break statement so let me actually put this into a little better of an overview here so here i will use something you can see there are a couple of stars which are the favorited ones or the most common ones for example a line break okay so here i can very quickly just make a line break like this and then have another piece of text just afterwards so for example if i would like to go to google.com as a link what i can do is i can make this an actual link by using the hyperlink keyword so here hyperlink and of course it should say google.com still all right this by itself will of course not work it looks like a link but it actually doesn't do anything if you want to be able to click on it and actually create an effect with it what we need to do is to give it a direction where it needs to go to so we need to specifically state what the navigate uri should be so here you can add a property called navigate uri and you can already see there are a bunch of favorite at once such as command click name and i'm going to use the navigate uri and here i can then define where i want to go so for example http s colon forward slash forward slash www dot and maybe three will be enough google.com okay this will now send me to google even though this will just be the link if i run the application and click on it so here let me click on it and nothing will happen because it doesn't know what it's supposed to do it knows what the link is like and you can even see it behaves like a link but it doesn't do anything on top of that okay so if you want to actually send the user then you need to request a navigate okay so here request navigate which will be an event this will only work if you add an event handler so here you can add a new event handler and it will create this event handler for you however this event handler will now be inside of our code behind so here this is where you would then have to implement the code to actually start a url so we're just going to use the following code in order to actually run this and it will be system diagnostics process start e which is the event arcs that we get so the request navigation event arcs uri absolute uri okay so this is the code that you need to execute if you want to open something in the browser so open the link in the browser now we can run it again and now if you click on google.com in my case it opens up the website so it uses the default browser that you have assigned in my case it's chrome which is why it opened chrome so we are using a system process which starts a url which in this case actually starts an application and gives this application the details where it should go to in this case the browser to which website it should go to all right so that's a little bit something about text blocks now let's actually play around with text blocks a little more and add a couple of properties to text blocks so i'm going to use lorem ipsum code here which is just a text you can let loremepsum.com or io generate lorem ipsum text for you so here well i'm going to agree to select it and here it can generate however many paragraphs you want to have okay so i'm going to copy this code here or this text so to speak and put it in here now this will be quite a long text and if we look at our application let me actually stop the running process you can now see that because we are inside of a grid and we have two text blocks it creates this weird behavior that we have here okay so instead of a grid i'm going to use a stack panel and if you want to know more about stack panels definitely check out my video on stack panels okay so here this text block it you see has a lot of text but it stops at one point so here this text block has a lot of text but you can see it's cut off so it doesn't show everything and therefore you can use properties here that will prevent that so you can use control and space in an empty part of the opening control tag in this case of the text block tag and you can see properties as well as events and so forth that are made available to you and the one that i'm most interested in in this case is going to be the text trimming okay so i can trim this and you can see there are different settings so for example character ellipses we'll just say dot dot dot which means there's a lot more text to come or generally more text to come the alternative is word ellipses which will make a break at the point where the last word that fits into the current window ends and then it says dot dot and you can also use none which is the default value which will basically do nothing okay so that's text trimming and then there is another one called text wrapping and this one will be probably most relevant because here you can wrap which will now wrap the text you can see it doesn't cut it off it wraps it so that it goes to the next line or alternatively you can also use wrap with overflow and what rep with overflow will do is the line break occurs if the line overflows beyond the available block width however a line may overflow beyond the block with if the line breaking algorithm cannot determine a line break opportunity as in the case of a very a long word constraint in a fixed width container with no scrolling allowed okay what does that mean well we can play around with this we can actually test it if we have a word which is super long okay so here you can see this is wrap with overflow so this word here is now way too long and it doesn't fit into the one line so what it does is it just cuts off this word now if we use wrap instead you can see it just makes a break at this word and keeps on going with the word so it goes all the way up to this u here so this is the first line and this here is the second line or it starts in the second line so that's what this text wrapping property does for you now you can of course also play around with text colors and so forth so for example if i want to change the color of a text i can use a foreground here and use any color that i want in this case i'm going to use aqua for example so you can see now the text will be in this aqua color if i want to however change the color of a specific part of a text block i can use something called span okay so if you're familiar with html all of the stuff will sound awfully familiar so what i'm going to do is i'm going to use the span keyword here to make a span tank in which i can now add tanks that i want to design differently so let's say i want to design this set door differently what i can do here is i can change its foreground color to something else so let me change it to let's say black so this set do for example now will be black everything else inside of this text block will take the color and the settings of the text block parent so the span allows you to override specific parts of your text block that are inside of the span tag all right so that's it for this video at least for how to use text blocks directly inside of xaml and in the next video we're going to check out how to make changes to our text block using code behind and that means inside of the actual code here that we're going to use and by the way if you were wondering what this event is and if you don't understand how events work no problem we have extra videos diving deeper into how events work and also what event arcs are and well bubbling events and rooted events and all of the good stuff okay so there's still a lot to come but for now accept it just as something where you can trigger specific actions using events and they will execute a piece of code which is inside of the curly brackets of that event definition alright so that's it for this video see you in the next one quick pause this video is sponsored by one of my courses so you're learning something about wpf in this video and i have a completely sharp master class which teaches you a lot more about sharp if you feel like you need to learn more about shop to understand everything that's going on and then if you want to learn everything you need to know about wpf definitely check out my wpf course it's a 15 hour course which will teach you everything you need to know about wpf building an entire windows store clone using my apps in order to achieve this metro design which is the design language so to speak for the latest windows 10 applications you can find a link in the description down below and there you got a huge discount so don't miss out get one of the courses or both of them now and now let's get back to the video welcome back in the last video we looked at the text block and we looked at it in example meaning inside of the designer so to speak here can however also access its properties and make changes to a text block inside of our code behind which means inside of our c sharp code okay so inside of the main window example file you'll find another file which is the main window example.cs file so this is a partial class and it's our main window which is of type window and you will find that in this class we have a constructor which just initializes the components which basically means that it inflates this ui that we set up here okay so it basically displays the ui that we have set up in xaml now we have another method here which we have set up in the last video where we used an event okay so this is something that i'm going to disregard in this video i'm going to focus on the constructor here on the main window constructor in which i can now go ahead and basically add elements to my text block or edit my text block in runtime or during runtime so while my application is running so what i can do is i can now for example use this text block here and give it a name so that i can access it so let's give it a name and i'm going to call this one my text block now after i have given it a name using x colon name and then equals with the name that i assigned to it here i can now access it directly inside of the code behind of that particular xml file so here i can access my text block and i can change its properties so here for example you can just use a dot and then let visual studio give you some hints on what you could change so i could for example change the foreground color i could change the text itself so i could change the text to something like hello from the cs site okay so this will be now the new text that will be displayed for my text block so only the top text block will be influenced here and let me drag it over so it says hello from the cs side cs standing for c sharp now for reduced complexity i'm going to get rid of this additional text block that i had here okay so this will make our ui a little lighter and we can actually focus on whatever we have in the text block okay so i overwrote whatever i have written here so you can see you can overwrite whatever settings you have defined inside of your xml file using your code behind so you see sharp code i can now of course change up all of the properties that my text block has that i have defined in here so for example well i didn't use a foreground here but i can use a foreground so i could for example change the color to something that i like more so let me stop running the application otherwise we get this warning here constantly and here i would use the brushes and they allow me to use different colors okay so brushes are basically the colors that you would use for text blocks so here i could use a blue color for example all right now if we run this we will see that my text now is blue okay so that is the color settings that you can set up for your text block now what you can also do is instead of using the text block that you have set up here you can create an entire text block even without using any text block that you have in your xml code okay so let's build up a text entirely in code behind so in c sharp and therefore i'm also going to get rid of this event because otherwise my application might crash okay so what you can do is you can directly create a new textbook here okay so i'm going to do that i'm going to create a new text block which will be of type new text block now of course i need to give it a name i'm going to call this my tb okay and now i can access my tb and change its properties an interesting one would be to add text to it so i can either set the text directly like this something like hello world and run this and it will not do anything so in order to make sure that this will be in fact visible i need to make this the content of the current main window so i can just make this my tb the content of this and by this the main window you can click on it you can see the main window will be highlighted which now means that the main window will be getting the content of my tb so it will not even have a stack panel as its content it will directly have my text block as its parent view or its main view so to speak or in this case main control okay so you can see here it says hello world okay we just brought this directly inside of code behind so directly using c sharp and alternatively you can use the inlines property okay so you can add to the inlines property here you don't set the inlines property but you actually add to it so here you can add something like this okay this is added using in lines for example if you run this again then we can see this is added using in lines and i can change the size of the window as you see here and it will cut off so how can we fix that well maybe you recall which properties we have used the last time to make sure that it's going to overflow well we use the text wrapping property so let's use my tb and here text wrapping and let's set it up as the text wrapping that we wanted okay so text wrapping dot and here rep with overflow or just wrap okay so you can see text wrapping is an enum that has a couple of different settings which we can directly assign to this text wrapping property if you look at it text wrapping expects a object of type text wrapping so if you hover over it you will see that it expects this text wrapping which is inside of text block okay and it's an enum in text block and this goes for any different type of setting that you get here so any type of property that you would use here okay so for example if i wanted to set the foreground you can also hover over it and it will tell you that you need to assign a brush here so if you want to change the color of it you would create or use a brush here and even there if you don't know the different brushes that there are just use brush and then see what kind of settings that gives you now if i hover over it again i see it says brush but if i enter brush it also offers me brushes so maybe brushes is the white one so we can just play around with those because brushes contains a brush or individual brushes okay so you can then just use those as an example okay so i'm going to use very wood just to test it so what that will do is it will now wrap our tanks as well as it will change the foreground of my text which means it will change the color of my text so let's run it again so there we are hello world and then this is added using inlines so whatever we added we added it using inlines and it changed the wrapping to wrap so the text is actually wrapped you can see using and then inlines is in the next line even if i make this window smaller you can see it will wrap it accordingly and the color is very good which is this brownish color that we're using and you can also use underlines as well as italic or bold tags directly using code behind as well and let's have a look at how to do that real quick so here we would use inlines again and we would add and here that's the more tricky one so if you want to add a text block that you can then that you can then design you would use a new run okay so this is an inline level flow content element intended to contain a run or formatted or unformatted text even though i think this keyword is very weird like i wouldn't have thought of using run here but that's how it is so now we can create some text that we want to assign here so for example i want to call this one run text that i added and code behind okay and here i could now define specifically which kind of properties i want to use for that run text okay and i would do that using curly brackets okay so basically i can now define the different properties for that particular part of the text so i could for example change the color of only that particular part to be brushes dot red for example okay so now the foreground will be red but i can also change up other properties directly so i could make this for example using text decorations being text decoration start and underline this would underline the text you can see i just need to add this comma and then i can add a new property change then i could add another comma and then add the next property change and so forth okay now if we run this again then we will see that we have this new text that is going to be in red which says run text that i added in code behind and it has this decoration of underlined okay so that's really something that you can play around with i believe this is going to be good enough for a start and if you want to have a specific change or want to design your text in a specific way then you know how to do it either in example or in your main window example cs which will be the code behind of course and if you want to know more about it always just check out what the documentation has to offer okay so the documentation has to offer a lot so if you look at text blocks you can see how the text block class looks like and then the different fields that it has so the background property but also the general properties that it has so we just looked at some of them if you want to know more about them you can always just check out the documentation for it all right so that's it for this video see you in the next one welcome back in this video we're going to look at the label control and the label is very similar to a text block at least at first glance and let's just create it and then see what the actual difference will be okay so i'm going to create a new wpf project and i'm going to call this one label demo all right so let's go down to our project here and inside of our main window example file that's where i'm going to access my label or create a new label this label now at first glance will look like a text so i can also write something like hello world here okay so it will basically look like text and it is similar to a text block but the difference is that here we don't assign a text property but we're actually assigning a content property so here let me go over and assign a content you can see here this keyword is content and you can assign a string but you can also assign different types of controls in there as well so for example i have hello world here this is the default content statement so you can see you can put it directly into the label tag so in between here the opening and closing tag or you can put the content as a property for the label as well okay now let's actually use the advantage of a label and that would be to use controls as the label content so what i can do here is i can use a stack panel inside here and the stack panel will be and this will actually not be inside of the label tag but inside of the label inside of so not in the label statement but here inside of the label tags i will put the stack panel and now i can put for example an image in here and this will have the source of a certain link that i am going to use so i'm going to use this image here this will just be a mail icon so i'm going to copy this address and this will now be my source that i'm going to use for that particular image okay you can take any image that you want there and then i can also use access text which will then be text that will be displayed next to each so i'm going to set the access text text to something like message okay so let me scroll this down a little this image is a bit too big so let me set its width and height to let's say 60 width okay that will be fine already so you can see it's it breaks it down maybe even something like 16 pixels super small now maybe this should be 32 okay that should be fine okay so this will be in the image and then the text will have a font size of let's say 32 as well so this means i need to change the orientation to a horizontal orientation okay so this could be how you use a label and you see this here is still a label so we're not using a text box here but we can put text in there but also other controls as you see here so we're using a stack panel control and then we're using an image as well as access text so access text is basically just text simple text here and the stack panel is just a container that allows you to stack elements on top of each other or next to each other depending on the orientation that you're using horizontal will stack elements next to each other and vertical will stack them on top of each other but i have a separate video only in stack panels where we're going to go in more depth into stack panels so now what would make sense is to use a text box here not the text block but a text box where the user can then enter text in there and this will not work for a grid so i'm going to make this a stack panel as well okay so now i have the message here at the top and then a text box where the user can enter something and this text box could have a font size of also 32 so it's going to be a little bigger alright so this will now be something where we can enter text and once we run this we will see it's a little better so there we are now i can enter text here and this doesn't look very nice having a little bit of a margin for my text box would make it look a little better so let me add a margin of let's say 16 pixels towards all directions and the label here should also get a margin of 16 pixels towards all directions except for the bottom okay so 16 16 and here i think it's also 16 and zero okay so it will have 16 pixels towards the left top right and zero towards the bottom okay so that's what we're creating here is the distance between this text box as well as the label all right so if we run this once again this will look a little better i'd say so there we are now we can go ahead and write our message so dear sir or madam and i hope i wrote it correctly how is it gone bros going rows something like that okay so that's what the advantage of a label is that a text block doesn't offer this feature okay now some more differences that a label has towards the text block is that you can specify a border for your label okay you can't do that for the text block so here i could define a border and i'm going to set the border thickness to one pixel for example now this will create a border and now let's also add a border brush which i will use black for so now we have a black border surrounding it okay so that's something that the label allows us to do and then we as you see can use other types of content as we've seen with the stack panel including images and text and so forth and then you can also use the template content through a content template property which is an advanced topic that i'm not going to go into in this video but we're going to see later and you can access keys to give focus to related controls so you can for example focus on either the label or focus on the text box that you have underneath okay so what is focus let's quickly run the application so when i click in here you can see now it's in focus which means now it will have a blue background this is for the text box and you could now assign those two so that the label will also be connected to the text box so when the text box is in focus the label will also be in focus all right so that's it for this video now you have seen how to use labels or what you can do with labels there's of course a lot more to know about it and we're going to see how to use events later on in the course and then you will for example also understand how to use this focus functionality of a label alright so thanks a lot for watching see you in the next one welcome back in this video we're going to look at text boxes let's create a new project for that and text boxes will allow us to go ahead and enter text which is quite important in any application actually so let's call this one text box demo and i'm going to change this up a little bit so i think a height of 400 is too much 200 times 300 or so should be enough we now will have a small window here which will do the trick for us okay so inside of the grid i could now add elements i'm going to use a stack panel instead which will allow me to stack elements on top of each other and will also allow my text box to take as much space as it will require in terms of its height okay so here you can just go ahead and use a text box just like that and it will already create this text box directly for you let's run this real quick to see what's actually happening here so there we have our application we can click in here and write something like hello world okay but you cannot have multiple lines or anything like that that's really just it now let's adjust this text box a little bit so if you want to change the height of it you can for example just change the font size so the text will be bigger so let's say we're going to use something like 30 you see that now this element has become taller or higher if you run it again then you will see that suddenly the text will be significantly larger if you want to have a little bit of distance towards all the directions you can add something called margin okay so let's say we want to have a margin of 15 pixels towards all directions and we rerun our application then you will see that you have distance towards all the directions for your text box okay so you can enter text to your text box and this will then allow you to for example later trigger events based on the text or generally work with text boxes in your application to store the data or to log the user in if your software uses users and so forth let's look at a couple more properties that such a text box has okay so we already created the font size the margin and we can add a couple more here okay so i'm going to add for example accepts return this is something that we can set to true which will allow us to press the return button and then we need to use text wrapping in order to make sure that the text will be wrapped we're going to look at text wrapping in a second to see what the different properties are so for example i can now go ahead and say hello return return and then exclamation mark okay so this is something that is allowed by using these accepts returns and now if we use text wrapping let's say we had hello world i'm super happy today for example you can see that the text is automatically wrapping to the next line now if we use null wrap for example and we would use the same text or we'll just use a longer text so let's rerun this and here we say this is the best day of my life you can see now it doesn't automatically wrap it to the next line we can use return to get to the next line but you can see that it doesn't automatically wrap our text so that's what this no wrap will do and now there is another option that we have here and that is the rep with overflow okay now let's run this again and play around with it and here i'm going to write something like hello world world world okay you can see now it's basically the same thing as we had with rep but now the difference is if i have a super long word like hello world world world you can see now it will not jump to the next line okay so let me take that and play around with rep once again so you can see how rep handles it so you can see the difference in those three settings directly so here you see if i enter that same text it wraps it towards the next line so just cuts it at one point where the next letter wouldn't fit into the text box anymore and then it just sends it over to the next row okay or the next line so to speak all right and that's basically the text box with its simple features so to speak now there are a couple more properties here of course and also a bunch of events i think a very interesting one will probably be spell check okay so here we can use spell check and you can enable it so is enabled you can set that to true this will allow you to spell check your application but then you also need to define a language so here if i'm using en us this will allow me to now use the american english so to speak in order to spell check okay let's run this and let's actually check it out so here we have something like world the word would work world will work wordle you can see now wordle it doesn't recognize this word okay it complains here so i should check it right clicking on it you can see i get options here like word words wordy worlds wordy and so forth and now if i use something like color that will be fine but if i use color you can see now it's going to complain so let me check color again and this is because we use american english and not british english because otherwise color with a hue would be fine and now right clicking on it you can see it gives me the option of cooler or color so this is how you can activate a spell check and in general you can see that there are a bunch more properties that you can define except tabs if you want to activate tabs so the user can press tabs then you can define a background if you want to change the color for example so here let's say i want to have an alice blue color this will create a very light blue color or let's say i use aqua this will create this background color if you want to change the text color you would change the foreground okay so let's say we want to use brown to make it super ugly so now we have this bluish background and then this brown text and you can even define a text property by default so the default text would be hello world let's say and then we can see that the text will be even in our designer visible straight away it will directly say something like hello world and in this brown color that we have defined here if you want to make sure that no one can change the text that is set in a text box you can use something called is read only okay so here is read only set it to true and now if we run this application we will see that we cannot change the text that we have here so i can click in it but i cannot change it because it's read only all right and that's it for now for text boxes we're going to learn a lot more about text boxes once we use them throughout our course so let's get to over to the next video welcome back in this video we're going to look at buttons all right buttons are super important because they allow us to interact with our software and i'm going to call this one button demo and i'm just going to keep it simple basically creating a new button in here actually let me use a stack panel here as well so i'm going to use a button and this button now can have a value for example the text that you want to display so it will be the content so you can either put it here inside of the button tag you could say click me and that will then be displayed inside of the button so you can see it takes the whole width because we're in a stack panel we can also change the size of that button for example the width let's say we would make this button 100 pixels wide and we set the height to something like 30 okay so this would be now our click me button and it's inside of the stack panel so it's going to be assigned towards the top center by default so let me change the size of my main window a little bit this will be something like 300 times 300 for example okay so now i have this button and once you click on the button i want something to happen because otherwise it's basically useless right so we need to look at events if we want to do anything and now what i'm going to do for this is i'm going to use a label which will have the content of hello world and i'm going to give this label a name as well so that i can access it later on so let me call this one my label and once i click on this button i want my label to change okay so i want to change for example the foreground so the color of my label okay so therefore what i will do is i'm going to use an event here and in order to use the best event for buttons you should use the click event because that's basically going to be executed once you click on that button and here you can either manually create an event handler or you can just use the ide for that so i'm going to create a new event handler by clicking on this and it will create a new button click event for me now if i gave this button a name let's say i call this button name my button and i would create a new event here it would call it my button underscore click okay so once you do these things you will see that in your code behind the events will be created for you now i created two events one which is not the one that i'm using here i'm using the button click here i'm not using the my button click so i should definitely get rid of this one because otherwise my software will crash so never have events defined which aren't going to be used in your example file because otherwise your application will crash okay so this will now be called whenever we click on a button so i want to now change my label dot foreground so the color of my label because my label has a foreground property you can access all of the properties that your ui elements have for example i can change the foreground which will change the color so let's say it is bash by default it will just be this hello world bash maybe we should use black instead okay so it will be black by default and then i can override it once i click on the button so i'm going to set the foreground to a different color and this will be brushes which i can then change the color to let's say coro okay so now let's run our application and see what's going to happen there so there we have our simple app let me click on it you can see it changed the color to coral so to this reddish color okay so what we can do is we can also let's say we want to change the size of our my label so my label has a font size okay so i'm going to get rid of this foreground i don't need it i'm going to assign a font size of let's say 16 and now i would like you to access this font size get its value and increase it by one each time that we click on the button okay so pause the video and try this for yourself please okay i hope you tried it so i'm not going to change the color this time i'm going to change the font size so here font size okay let's look at what is font size going to be you can see it's a double okay so let me create a new variable my like this double my font size will be my label font size so whatever we get from my label as the font size that's what we're going to store in this variable at that point and then we're going to assign a new font size to it so my label font size and this should be font size here will be the old font size plus one okay so this will increase the font size by one each time that we click on the button so let's run this application real quick and see what our button is going to do and you can see each time i click on this button the text gets bigger because i'm changing the font size all right and that is basically how you can implement click events there are more events that you can use okay so let's quickly look at some of the events that might be interesting for a button so here let's look at click and you can see you have mouse double click for example okay so let me use mouse double click and create a new event for that my button mouse double click so i created a new event here which let's say we use the same idea here we get the font size but now if we double click we reduce it by one okay so we decrease the font size by one let me run this again and let's see if i can actually double click quickly enough so you can see if i double click i'm just too slow thing is i'm overwriting my clicking you see i'm increasing and at the same time decreasing so now i have both events which basically counteract each other if i'm quick enough i'm increasing it but at the same time decreasing it by double clicking because each click is going to increase but the double click is going to decrease the font size okay but you can now see that you can actually access the font well the double click event as well to make a change you can of course also design a button okay so for example if you want to change the background color of the button you could do that so let's say say you want to use coral as the background and then another text color you would set the foreground so let's say we use blue here as the foreground so there we are we have changed the button color you will also see that there are a bunch of interesting events here like mouse enter mouse leave so let's implement this mouse enter event i'm going to create a new one mouse enter and i'm going to use one for mouse leaf okay so here new event handler for mouse leave like so and now we can see that we have two events now and what i'm going to do is each time that i'm entering the button so to speak with my mouse i'm going to change the color of my label so i'm going to change the foreground to be let's say brushes dot and it's going to be white because then it will basically be invisible because white on white background is going to make it pretty invisible and once i leave the mouse or i'm leave the button with my mouse i'm going to put it back to a black text okay let's run this real quick and hover over the mouse you can see it seems like the text is disappearing but it's not really disappearing it's just changing its color all right so this is basically what you can do with buttons you can there is a lot more of course you can see there are a bunch of events you can design the button with all of the properties that there are you can add a tool tip once you hover over it for example so let's add a tooltip i'm your best button for example is the tooltip that i would now get once i hover over the button so we're getting multiple things happening once we hover over you can see i'm getting this i'm your best button info as well as triggering the other event this mouse enter event that we have implemented all right so at this point i would recommend to play around with buttons a little bit to play around with the properties you can play around with all of the font properties for example so for example the font style you could make it italic or the font what is it weight here you could make it bold for example and i would really recommend to just play around with it alright so that's it for this video see you in the next one welcome back in this video we're going to check out radio buttons and you might know well depending on your age how such a radio with radio buttons would look like or a cassette player with those buttons so for example i guess this one will be a little more visible here so you see we have a couple of buttons and you can only press one button at a time so once you click one button the other buttons will jump out so to speak except your i think pressing the pause button and the play button or something like that there was a combination that you could press that would work together but all of the other combinations would basically just cancel any other button press so to speak and that is what a radio button allows us to do okay so we can basically have a selection of a couple of buttons which belong together and once we click on one the others will not be active at the same time okay so let's create a radio button demo for this and i'm going to show you what radio buttons are what radio groups are and all of the good stuff okay so i'm going to use the stack panel here once again grids are just too much work to set up for such a simple demo so we're just going to use stack panels and a small label which is just going to say something like my which is just going to say who do you vote for okay and then we have this small label here at the top who do you want for let's make it bold so we can see it's a little better so here font weight will be bold and then i'm going to use radio buttons as promised okay so this one will be something like obama then let's create another radio button that will be trump that one will be mccain or something like that i'm not sure how exactly his name was written something like that right and then we have another one let's call him biden all right so we have bidden or biden i hope i wrote it correctly maybe it was like this i guess it was like that so now we have these different options here okay let's run our application and we will see that we have all of those beautiful radio buttons here obama trump mccain biden but now you see because we only have one group they are automatically handled like a proper radio group okay but what if you want to have different radio groups okay so who do you vote for and then another one well how do you feel about it or something like that okay so i'm going to basically use this one and this one will say something like how do you feel about it and this one will be good and this one will be okay and then maybe a third one which will be something like not happy all right so you had to vote but you're not happy with the candidate which definitely can happen um but yeah whatever so we have now these two options we have these two groups how do you feel about it good okay not happy and now let's check it out what the problem will be so once we run this and we select let's say obama and then feeling good about it you see obama suddenly jumps out and that is because we only have one group automatically by default so bottom fault just takes all of the radio buttons inside of our stack panel it treats them like one radio button group so what you can do however is you can assign a group name property which is a very important one and you could call this one president's okay presidents and i'm going to use this group name for all of those president statements here or those options that we have here and then i'll have another group name here and that will be feeling something like that all right so here let me put that in here for all of them and if i run this again now i will be able to select one for the top level so let's say this time i'm selecting biden and then how do you feel about it and i'm okay with it or i'm good with it you can see now this one is treated like a separate radio button group and this one here at the top is also treated like a separate radio button group now of course you can style those as well a little bit so here font size could be a little bigger for example if you want to have it a little bigger in general so the text will be bigger and let's say i would like to use an image of obama there now that's the beauty about radio buttons is that you can not just use text in there but you can actually use content so if you can use content you can go as far as to use something like a wrap panel for example and now you can position your ui elements in order to style such a button okay so you could just go ahead and add an image here and then that image will have a source so let's take an image of obama as a source so there we are that's the image that i'm going to use it's a little too big so let's change this size up a little bit so let's make the width something like 30 and height well height is by default fine i believe so we have the image of him and then i will use the label here which will say obama okay so now we'll be next to it and maybe we should we should set the height to 30 okay so i'm going to set the height to 30. now it will be the same height as the text for obama and now if you look at it it's all right but i'm not super happy with this radio button icon here this circle so let's change it a little bit and in order to center it i'm going to vertically align the content so vertical content alignment will be center and now you can see that this little circle is in the center and i think this is a lot nicer okay so you can play around with this rep panel now for all of the other presidents as well so here you could go ahead and and paste that in there as well and just replace the label to let's say trump here and you could also change the font size of the whole radio button to make it bigger you can see the label is automatically going to be impacted by this as well as change the vertical alignment here like that and now what is left to do is to use a beautiful image of trump not sure how easy it is to find something like that but i'm just going to search for it and i personally really like this one here let me put that in there you see he looks angry but i think that's fine at the current situation and the beginning of 2021 so yeah that's how you can play around with it you see the height is set to 30 well if you want to have the exact same size as with the other images you could use a width property here as well and make sure that that one will be the same 60 is probably not perfect but yeah you could really play around with it to find the good spot where they are aligned and now if we're talking about radio buttons we also should talk about a very important and if not the most important property that such a radio button has and that is going to be is checked okay so here you can set that to true this will then automatically check trump for example okay and is checked is also going to be a getter that you can use so not just a center where you can set the value but you can actually let's say we create a name for this radio button here rb and i'm going to call this one rb trump and then in my main window example cs file in the code behind i can now get the rb trump dot is checked value okay so this will then return whether this property was checked or not and based on that i can then run some code so i could of course also use events here so you can check out the different events that there are there are plenty but the most important one will be checked okay so here there's this event that will be triggered once it is checked and then there is one that is unchecked so what do we want to do if we check it well what we could do is we could for example change this trump label to be bigger or to change the color okay so let's do that real quick so let's create a checked event i'm going to call this one rb trump checked by the way this is something that you can do by pressing control and empty space that will automatically create this event for you one inside the quotation marks and now let me give this label a name so this one will be the name i'm going to call this lb trump lb standing for label okay so now what we can go ahead and do is we go to our code behind here we have this rb trump checked and here i'm going to check or set the lbtron foreground to be selected or maybe we can even use the background so it will be even more visible okay so here the background will be something like brushes which gives you colors if you type it correctly and then let's say we use an aqua background for it or some agua marine background like so okay so now let's check it out once we check trump we should get this background for trump you can see now we can see trump is in effect selected once we select obama you can see this is not reverted so we would have to also implement is unchecked okay so this is a little challenge for you implement the event is unchecked or what was it unchecked i believe it was unchecked implement this event and then change the color back to what it was before okay so i hope you tried it so here i'm going to create a new event handler for that rb trump unchecked let me go to my copy height and here what i'm going to do is i'm basically going to change the color to white so this will now change the background color to white once we uncheck trump so checking trump and unchecking him by checking something else you can see the background for trump is white again i believe this is enough for you to get a basic understanding of how to get this thing going and now as a little challenge for yourself i would recommend to change the design up so that it looks in general a little nicer so that whenever you select one of the presidents that the background color of their text will also be changed maybe even not just the background color but the complete selected radio button that you have selected here okay so play around with this this will really give you a better understanding and yeah let's go over to the next video welcome back in this video we're going to look at check boxes and check box demo is i'm going to call this new project so the idea behind checkboxes is that you can basically check multiple boxes and then this allows you to set some settings for example or share your preferences and so forth all right so i have this new main window i'm going to make it a little smaller something like 200 times 200 should be good enough i believe and this will now be my little window and i'm going to use a stack panel because it's easier to set up for particular simple examples as this one and what i'm going to use is first of all a label which will say toppings okay so it will have the content of toppings and you can now select what kind of toppings you want to have on your pizza for example okay and here i'm going to use checkbox as the new element that we have to discover in this video so first of all it will say something like extra cheese okay so if you want to have extra cheese on it that's the way to go let's go ahead with the next checkbox that one will be something i like tuna does it even have h i think it doesn't and then the next checkbox will have something like ham and so forth okay so here pepperoni and there we are okay so this is how we can set it up we have toppings let's make it full bold as well font weight set to bold this will make it a little more obvious that this is what we are doing here so let's run this real quick and you can directly see that we have extra cheese tuna ham and pepperoni what we can add to our pizza toppings now if you want to design those manually and make them a little nicer you can do so of course so for example instead of just having extra cheese in there you can go ahead and use a wrap panel once again similar to what we have seen in the last video where we checked out radio buttons in the check boxes you have the same situation where you can basically create an image here for example to make it a little nicer add a source and this one would be for example for i believe extra cheese it was so here you can just add an image with extra cheese pizza i believe something like this should do the trick let's change the width up to something like 50 pixels maybe okay so this will be the topping and then let's add the label to it as well so that we can actually understand what's going on here and i'm going to call this one extra cheese now if you want to make sure that this icon this checkbox icon is also positioned accordingly so that it's centered you can of course add the vertical content alignment center to it which will center this little checkbox all right so that's how you can design it manually whatever you want to have inside of that checkbox item now of course when we are working with checkboxes we also have events so for example the checked event let's create a new event handler here as well as the unchecked event let's also create one here a new event handler like so and now we will see that in the code behind we now have two new events checkbox checked and checkbox unchecked so this one will work for this particular checkbox it's of course better to have a particular name for this checkbox so that you can access it straight away and also that the names for the events are a little more descriptive okay so i'm going to give it a name of this one will be cb cheese okay so if i now get rid of this event here and create a new event handler and same for this one it will be a little more descriptive now of course i need to get rid of the other ones which were very generic okay so we have the cb standing for checkbox and then g is checked and checkbox g is unchecked those two events and now let's say we check it what we want to do is we want to change let's say this label here we're going to change the background color so let's give it a name here as well so that we can access this label and i'm going to give it a name of lb cheese standing for label cheese and now i can access lbgs to for example set its background so this one will be the background which will be brushes in order to get colors right brushes and i'm going to make this gray so that it will be selected i believe gray is written with an a in this case and if it's checked it will be gray if it's unchecked it will be white okay so i'm going to change the colors up accordingly so let's test this real quick to see if this event is actually going to work out or not so let me select it you can see extra cheese is selected and now accordingly the color or the background color of this field is changing all right now let's look at something that is called there is three state okay there's a property called s3 state and that is going to be useful if you ever have the situation where a state can be true false or a third state which would be for example null or empty because the data that you could get that will populate this could be a nullable which basically is a third state and this will then allow you to display it in your checkboxes as well and therefore i'm going to create a new checkbox here which i will give the name of parent cb or cb parent and that one will basically be the parent of all of the other check boxes okay so this checkbox once it's active it should basically activate all of them once it's inactive it should deactivate all of them okay so therefore i'm going to add a little bit of margin towards my checkboxes of let's say 15 pixels towards the left and five towards the top something like that should do the trick okay i'm going to use this margin for all of my checkboxes that i have here like so and now you can see that they're all a little further towards the right and i'm going to assign this top checkbox here there is three state property i'm going to set that to true so that it can have a third state and here i could of course create new events for the checked and unchecked state for every single one of them and for this top checkbox as well but what i'm going to do is i'm going to instead create one event that will be used for the parent in general so i'm going to call this event cb parent checked changed something like this okay and now let's create this event as well and therefore i will need to create one manually here private void cv check change that will get an object sender as well as rooted event arcs that i'm going to call e okay so that's how you can set up such an event and the idea is that this method or this event will be called if we check it or if we uncheck it so in both cases it should be called okay so i will now in this case for the parent checkbox use it for for the checked as well as the unchecked state in both cases and then for all of my other check boxes here i will also need the name so i'm going to call this one cb tuna and this one will get the name of cv ham so cb standing for checkbox and then i need the unchecked event which will be toppings like this maybe toppings chain checked changed okay something like that because i want to use it for both cases so for the unchecked as well as for the checked case so in both cases the same method will be called and it will trigger on based on whether it was active or inactive okay so now i'm going to basically use the same for my other checkbox here where xlr created these events that i'm not going to use anymore i'm going to get rid of those and i will need to create a new private void and i call that cb toppings check changed which will get the sender as well as rooted event arcs that i'm going to call e like so okay and what should happen if the parent check changed well i'm going to basically create a new boolean new value as i'm going to call this one and it will get or it will set the value based on our cb parent is checked if that's true so if that is true then i want to set the cv ham and cheese and so forth well in general i want to set it to the new value no matter if it's true or false okay so cv cheese will be checked set to true the same will go for cb ham and cb tuna okay in either case we just want to set it to whatever the parent is so what should happen if we now check our individual toppings i'm going to check my is parent is checked to null so it will be empty it will be in the third state so to speak and then i'm going to check my individual elements so the cheese element if it's checked and and actually this should be in a separate opening bracket like so and the hem is checked like so equals equals true actually we don't need to double check the true we can just use it like so and then finally if the tuna is checked like so and i believe because we don't use the true statement anymore we can go like this so if that is all the case then let's check the set the parent is checked to true and unfortunately i have to actually add the equal equal true because otherwise well it didn't really work so i needed to make this check explicit and brackets here and then i say okay if all of them are checked i'm going to set the parent to be checked and then otherwise if all of them are unchecked so basically the same code here so this means this one needs to be false as well as the other two also so all of them are false now then i want to set this check to false okay now if we run this we will see our application work as it did before but we can select one of them you can see it's set to null by default which is the third state and if i now activate all of them then it will be set active if i click this you can see it jumps to null state even though all of them are still active but that's something we could set up manually as well but then once i go to the third state which will be empty you can see all of them are changed to empty as well or unchecked as well so now if i check them you can see all of them are checked if i check individual ones you can see it changes to the state and if i uncheck one then you can see it changes to the third state which is going to be the null state all right so that's it for this video now you've seen how you can use checkboxes and i would really also recommend to play around with it and adjust it a little bit so that you basically design it a little nicer while you would actually add images of tuna where you could maybe also make a nicer background for it and make sure that the extra cheese text is also centered and so forth alright so i hope you enjoyed this video see you in the next one welcome back in this video we're going to look at password boxes so let's create a new project here password box demo and now the password box allows us to work with passwords okay so i'm going to use a stack panel here once again and inside of this stack panel i'm going to have a label which will be something like name so it will display name and then the user can enter his name and then i'll have another label further down so here first of all i'll have a text box text box a normal text box as we have used before and then underneath i'm going to use a password box so this password box now now allows me to enter passwords okay so i'm going to make everything a little smaller in terms of the complete size of the screen 300 and here 200 50 times 300 should be fine maybe we should change the font size of all of them a little bit so that it's easier to read because right now the font size is just a tiny bit too small so i'm going to use 25 for all of those okay so for the text box the label as well as the password box okay and now let's also give it a little bit of margin so the stack panel will have a margin of 3 pixels so that we have a margin towards all directions so that it's not directly in the center maybe more like 10 pixels will be nicer something like that all right so now this will not be the name this will be the password so it's a little more understandable what's going on here and if you run this we will see something with our solution and that is that once we enter something here you see we can't actually see what's up so we don't see what we have entered here which is exactly the idea behind a password box so here we can say something like dennis and then the password you can see that there is nothing to be seen and we can play around with the properties of that password box for example we can change the password character to something like a one okay this one now make this password character every time no matter what we enter a one okay so here i can enter whatever i want it will be a one so this might be confusing for someone who looks at it they might think you are entering a password of one one one one which would be quite simple but of course you can also use something like an x or a star for example that would be something very common where you would see a star even though i think the circle that is there by default is also fine but here whatever you enter now will be a star so that's what the password char that's what character can do for you you can also assign a maximum length for it so let's say you want to limit the password to be six characters then you could use maximum length six or if you want it to be a super short pin with just four characters then it would be the max length of four okay so that's what you can define here and once you enter a password here you can see after for no matter how many keys you hit it will be limited to four characters okay so that's what this max length is and that is basically it for password boxes all right so you can of course play around with it as you like but then there's one thing that you should take into consideration if if you want to use a password box in an mvvm implementation and that is that the password box doesn't have a dependency property so you can't use it with data binding by default there are ways around it but this is done intentionally so the idea behind it is that you can't bind it somewhere so that it's going to be a little more secure all right so that's it for this video see you in the next video welcome back in this video we're going to look at image control so the image controller allows us to basically display images in our application and it will be something that we're going to use quite a bit throughout the course so i'm going to change the height of my project to 300 and the width to 400 something like this make the window a little smaller because otherwise it's just too big for what we're displaying okay so i'm going to use a stack panel here once again and inside of the spec tech panel i'm just going to have an image here so the image control allows us to display images okay so you can use a source here for example so this can be a source on your drive on your pc in the folders or one that you have directly from the internet so for example if you have taken any of my other courses you might have come across this image here and that is homer simpson okay so this homer image you can see it automatically takes the whole width that is made available if the image is bigger than what the screen has to offer so if i make this 800 tall for example then the image almost fits in make this 900 tall then you can see the image fits in entirely if i now run this application you will find that this is the image that i'm getting here okay so that's the homework image you can of course change its properties up a little bit so let's say you were to set the width to something like 100 pixels then you can see the image gets significantly smaller and is a lot more viewable in our screen so let me change the height back to 300 something like that and you can see now the image will be smaller and it will automatically be scaled to maintain its ratio okay and then well it basically is inside of our app so that's how you can use it if the user of the application will have access to the internet that will just use the source even though it's of course always going to be a little risky if you do that because what if this image does not exist anymore in the at the moment when the user runs the application this could happen and that's why it makes sense to offer the image as a resource with the application itself so therefore i'm going to create a new folder here so add new folder i'm going to call this one images and in here that's where i'm going to drag my homework image okay so homer simpson 2006 that's the name of the png and now i would like to use that image instead okay so like so so now how you would actually set it as a source because here if i get rid of this you see it doesn't update our ui even though we don't have an image here i can't just run it like this i need to set it up correctly and in order to do that i can use the following statement so here pack colon slash slash application colon three commas then in my case it will be images slash homer simpson png so let me run this application and i will see that my image still is there so this works so you just need to pack colon application and then images so if you have it inside of the images folder alright so now you can see how you can actually use images from your hard drive or from your your project itself directly inside of xml so what if you want to overwrite this okay so let's say we have another image and we want to override it in our code behind and therefore i'm going to add an event to my image okay so an image doesn't have a click event but it has a mouse up event okay so here mouse up this will be called once we release the mouse after clicking on the image okay so let's create a new event handler and this will be called image mouse app this will be triggered once we click on the image okay so let's now go back here and we can find this new event that was created for us so what i want to do here is i want to actually override the image with another image from my images folder therefore i will give it a name so this image needs a name and i'm going to call it my image and now i can access it so i'm going to set my image dot source so the source i'm going to change this property here and i'm going to change it to a file that i have in my assets so that i have directly in my images folder currently i have only homer simpson there so now let's add another image there so i have this other image this homer simpson png which if you hover over it you can see it's going to be this image so now i would like to assign this image using code behind so using c sharp code and the code that you will need is going to be the following one okay so you can create a new uri in an extra step if you wanted to but what's important is that you assign this source to a bitmap image which is a new uri and here we're using the add annotation using image control demo which is the name of my project okay and then component slash and then where the file is in my case images homer simpson.png and here i'm using the uri kind relative which means it will be in the relative folder depending on on which pc this will be run because it will not always be in the exact same folder so the user won't run this application in the same folder as i have because they have a different naming system for the folders or whatever okay so if we now run this code we will see that once we click on this homer image the image changes okay so it doesn't change back once you click again so this is something that you could set up here with a boolean state or whatever so this is something that i would recommend to play around with to see how this is going to work for you play around with different images and then one little side note is that i could have just left this part out as well because it should still do the same thing if we look at our application let me run it again and we can see the image is still there so you don't need to add this pack stuff on top here pack application but if you want to be sure you can of course leave it in here all right so that's it for images we're going to use images extensively throughout the course so no worries there and see you in the next one quick pause this video is sponsored by one of my courses so you're learning something about wpf in this video and i have a completely sharp master class which teaches you a lot more about sharp if you feel like you need to learn more about your shop to understand everything that's going on and then if you want to learn everything you need to know about wpf definitely check out my wpf course it's a 15 hour course which will teach you everything you need to know about wpf building an entire windows store clone using my apps in order to achieve this metro design which is the design language so to speak for the latest windows 10 applications you can find a link in the description down below and there you got a huge discount so don't miss out get one of the courses or both of them now and now let's get back to the video welcome back in this video we're going to look at the slider control so let's create a slider demo for this a slider is basically a very simple ui control that allows you to slide from left to right for example so i'm going to use a stack panel here not a grid to keep it simple and here this is the slider that you can use this is the default slider that you can see in here as well so now it will be well all over the place let's align this a little bit so it will be aligned towards the center our ui element you can see here and then i'm going to add a little bit of margin of let's say 20 pixels on the side so that it's not exactly at the border and then let's change up the height here a little bit so 200 times 400 or so should be fine okay so this will be our slider now you can also define its maximum value so here minimum and maximum are the two main properties that you have here so let's say you want to be able to slide from 0 to 100 then you would have the maximum set to 100. all right let's run this real quick so there we are and you can see you can just slide around okay now you don't see any values here so that's not really helpful that's what we can change we can add text to them even though it's not really values as such but we could add 10 text to it by using the tick placement property and here we can say where we want to position it so i want to position it towards the bottom right so you can see that we have a bunch of ticks now and then we can define how many ticks we want to have basically by saying what the tick frequency should be okay so for example i want to have a tick frequency of let's say 10 so 10 ticks will be now the ones that i have for my entire slider if you now want to also snap to those values that you have here so to those ticks that you have here you can add another property which is called is snap to tick enabled okay so here i'm going to add that one is snap to tick enabled you just need to set that to true for this to be active now if you run your application once again then you can see that you cannot go smoothly through it but really just go through the ticks so it will snap to the text automatically your slider will snap to the fix and then you have another important property and that is the value property so here for example i could say that the value should be set to 50 or to 5 or whatever so depending on what i enter here the default value will be set to that value and now you can overwrite this in code of course as well in your code behind or you could also take this value property as the property that you want to display okay so let me add a text block underneath it i'm going to give this text block a name of my text block and then i'm going to give this slider a name as well and i personally like to have the name at the top of the properties of such a ui element and i'm going to call this one my slider and now inside of my code behind i want to display whatever i have selected basically as a value in my text block okay so in order to do that i need to add an event here and the simplest event that we could use is probably going to be the value changed event so here i'm going to create a new event handler and if you want to know more about events definitely check out the chapter on events and delegates so here we are using the value changed event which will be triggered each time that the value of our slider is changed and we're creating a new event handler which automatically creates this event for us so this event handler so to speak this my slider underscore value changed was created for us you can see we get two parameters here one of them is the sender which is of type object and then we get the rooted property changed event arcs of type double which is called e now i can go ahead and just for example assign the value of my slider to be displayed in the text block okay so here i'm going to say something like my textblock dot text should be the value of the slider now if you want to get the value of the slider what you can do is you can basically get my slider dot value like so the only problem is that this is going to be of type double so we need to convert it into a string for this to work because text is actually going to be a text so what i'm going to do here is i'm going to say slider value is and then plus whatever the value is that we have in our slider and now if we try to run this we run to an error it says system null reference exception and this is something that you will often get if you try to do something like that the problem is that the slider was loaded before the text block was loaded and this is why we cannot assign anything to it so what you can check here is if my text block is not equal null and only run this code if that's the case okay so only if the text block is ready so to speak you can execute this code the reason for this is that this my slider value changed will be called once the slider is initialized into the ui so into the main window and it will be directly triggered which means it will directly trigger this code and then it would have tried to do this without the text block even existing potentially so you could try this so maybe in 15 times that you would run it maybe it would run once because the text block for some reason would have been loaded or would have been faster in loading then for example the slider and then it would work but in most other cases it wouldn't so it's better to do this check here so now let's run it again and now let's actually play around with the value and you can see here slider value is and then it displays the value of our slider okay now a little challenge for you which is going to be a little more complicated and that is try to change the font size based on the slider value so the font size of my text block based on the slider value all right so i hope you paused the video and tried it therefore we're going to need a multi-line if statement here which means that i need to add the curly brackets now i can add the property font size to it which will be based on the value of my slider like so and now let's run this once again and let's actually see how the size will change so you can see here it changes and of course it will be immense if we hover over here at the well to a point where it will break our application if it's zero so if the font size is zero you can see our application is crashing so here you can add a check and you can say my slider dot value is greater zero like so and because this is a double maybe we need to add d okay this should be fine now let's run it again and drag it all the way to zero you can see it just doesn't execute it there and otherwise it displays it okay now i have a little bit of a more of a challenge let's say and that is where we are going to use example code without using this code here to do the same thing okay so basically what you can do is you can assign here the font size to be a binding property so here binding to an element name and what is the element name that i want to bind it to well i want to bind it to my slider and then i need to define which path i want to get basically which property i want to get the binding from and then i need to say at which point this should be triggered so at which point this should be happening so where we are updating the font size based on the slider okay and then we can just say once the property is changed which means once the value of my slider will be changed i want to change the font size of my text block okay so this is where we're using data binding and we're also using triggers so this is a little more advanced but we also have a video on this topic so if you want to check out how triggers and binding works definitely check out those videos to get an in-depth understanding of what happens here but basically what is important here is that you are setting the font size based on the value of your slider when the property is changed you will be triggered or this change will be triggered so the font size will be updated every time the property of the slider is changed and which properties changed well the value okay so every time the value is changed this will be triggered and the value will be set as the font size for my text block okay so it looks quite complex but actually it's really straightforward what's happening here okay so now let's get rid of this line here or actually let's get rid of this code here by commenting it out so now nothing will happen we still have the event in there if we just deleted it we would run into errors so we would have to clean it up somewhere else and actually we don't see anything the font size will change you can see the font size is in fact changing but there's no text to be displayed so let's add a little text to our text block and we can put that in between the text block tags so here i'm going to say something like hello world okay so you could see it will be at 50 so maybe we play around with the slider values here so we want to have a maximum value of 50 and the default value will be a font size of 15 something like that and the tick frequency will be maybe 5. so we have a lot more ticks here or you could actually go to something like 2 okay so now if we run this then we can see that we can change the font size without using any code behind we do it only using this code here so we're using data binding here and triggers to achieve this behavior at the same time you see once you go to zero you don't have this problem where it crashes it just goes to the default value that it had okay so the default value of a font or of a text block okay and if you wanted to make sure that zero is not even an option because you don't want this to happen you could of course add another property here called minimum where you say okay the minimum font size should be one or maybe even 10. so if you have a minimum font size of 10 then the text would never be smaller than that and i'm just using font size as one of the properties that you can change here okay you could of course use any other property that is in fact a number that you want to change by using this slider in this video we're going to check out how to use the calendar control because if you want to use calendars in your application it really makes sense to understand how that works so i'm going to call this one calendar control demo and what we're going to use here is going to be basically a calendar so like so so that's it there we are and that's it for this video now just kidding of course we're going to see a lot more about how to use this calendar but you can see basically it already created the calendar for us here we can directly see it also select the current date for us even in the designer straight away so what we can now do is of course also change its size not having to do it manually but what we can do is we can put it into something called a view box and this view box will stretch and let's say we want to stretch it to the entire screen so to speak and in there we will have a calendar okay so if we run this now then we can see that it stretches to fit the entire screen and it follows to a certain well it follows our size basically when we resize the calendar it does it for us and it works totally flawlessly you can select the date here all of that works ideally so this is something that you might want to take into consideration maybe you want to display the calendar in a certain size so something like 300 times 300 would be a good option here so i believe this is a little nicer for my window you could also change the setting here to uniform unity form to fill you can see now it's uniform which looks a little better so let's run this again and now you can see the view always maintains its size so this is probably going to be a better option to use uniform here okay so how do you actually get a value from the calendar well in order to get the value what you can do is you can give your calendar a name so i'm going to give this calendar control a name i'm going to call this my calendar len dar like so and now in my code behind i can get the calendar value by using my calendar dot selected date okay and this will then be something that i could display so let's display this in a text view actually so i'm going to put this into a stack panel instead of a grid and then underneath the view box i want to have a text block which will allow me to display text and i'm going to call this one my text block so that i can now access it via copyhind and assign a value to it so i'm going to say my textblock.txt should be the selected date as a string and now for this to be updated each time that we change the calendar date well this will send it at the beginning but unfortunately the selected date is going to be empty at the beginning so what we can do is we can define the selected date manually so here you could say the first of january 2022 as a selected date okay and then it will use that let's run it again okay let's see here we can see the selected date is the first of january 2022. maybe we should resize the height here so let's make it something like 400 so that we have enough space for our text underneath but now i would like to be able to select the date and update my text block based on the selection so here there's this event called selected dates changed okay so once you change the selection i want to create a new event handler for me here which will be this one okay this will be called basically this method here will be called every single time that we click on any of the other dates so to speak so what i want to do is i want to update the date based on whatever i have selected so i'm going to get it from my calendar i'm going to get the selected date and i'm going to make a string out of it and because textblock could be empty we need to check if my textblock is not equal null and only then execute this code because otherwise if you run the code it will crash so there we are let's select the date you can see now it will update our text down there based on our selection of the calendar now this calendar has a bunch more properties that you can play around with okay so for example if you only want to display months you could change the display mode here and you can see that you can select decade month year so let's select year for example you can see now we can see the year with the individual months then if we select alternatively the decade for example then it will display all of the years in the decade that we have selected or if you go for month you get the default view and this is also the default setting for the display mode and then one more thing if you want to black out certain dates you can add that into the calendar so in here i can add calendar like so dots and here for example what i'm going to use is blackout dates like so and then you can add a calendar date range in here of dates that you don't want to be available so for example in my case i believe i have the english settings here so i would have to select something like 0 5 or actually 0 3.05 dot 2021 and then end date would be something like 0 3 dot 0 9 20 21 like so so that would be one of the calendar range date ranges that i will black out now and you can see well there it already is it is blacked out now so i cannot select those dates as they are not selectable so to speak okay so i deactivated those for my calendar okay so that's it for this video there is of course a lot more to play around with i would recommend that you just check out the other properties real quick and then once you actually will use calendars in your application get a little more into depth with it alright so that's it for this video see you in the next one in this video we're going to check out how to use date pickers so let's go ahead and create a new project date picker demo and the idea behind date pickers in comparison to a calendar ui element is that the calendar ui element is really taking a lot of space and the date picker is only going to be a little pop-up that will appear once you click into a field okay so let's just use a date picker in our grid here date picker like so and just quickly see what a deed picker looks like by default okay before we do any customization okay so i have this here this selected date there's also this icon at the top right corner and here you can then click on this icon to select the date for example the 18th of march and you can see this value is now entered in here okay now if i want to override it with something else i can do so as well so here 2021 that will work as well if i go here you can see now the date picker will be selecting the value that i have entered manually and then the pop up closes once you select the date and it populates this text field here with the selected date so now let's look at some of the properties that such a date picker has okay so for example you can just use control and space it will give you some ideas margin selected date for example that's where you can then also define the date that will be selected from the start so 0 3 0 1 2021 for example that will now be the selected date once i restart the application and you can see this is the selected date by default now even though today is the fifth of march for example okay by default it will just take the current date but if you define it manually you can overwrite the default here then you can change the selected date format okay so there are two versions short which is the default and then long which is the non-default so which is the one that you can set up to have a long date you can see here it says monday march the 1st 2021 would be the long version so here you can play around with the selected date format if you want to change that and then the interesting event that we need to look at is selected the date changed okay so this is the event handler that you need to define if you want to make any changes or execute any code if a date has been picked and the date has been changed so the selected date changed then you can of course look at your code behind and here in this method you now need to define what you want to execute once this event is triggered so in my case i'm just going to directly say if this is clicked then please go ahead and just display message box that will so show the date has been changed to and then the actual date so in order to get the date i can get it from the sender okay so this will be a little tricky let's get it from the sender and the sender will be of type date picker like so and then you can get its date so for example the selected date which will be of type date time okay so you can get the selected date this way and you can save it as a string by using to string okay now let's save it inside of a variable so string my date will be whatever has been selected here and then i can assign the message box to display my date okay now the thing is the selected date could be empty for example once the application is loaded so just to make sure that that's not the case so here i'm going to check if selected date is not equal null only then do i want to execute this code and here i have one bracket too many at the end and i will need to make sure that i put these two lines into the if statement okay now let's run this and you could see that the event will be triggered once the ui is loaded so the date has been changed to 31 2021 which is the date that we have selected by default and it's triggered once again once the application is loaded so you can see it was triggered twice this event which is why you have to double check this kind of stuff and now once i change the value let's say to three you can see the date has been changed to the third of march 2021 and that's it so that's how you can trigger this selected they changed event and that's how you can get the selected date so if you want to use it throughout your application for example if you wanted to store it somewhere in the database or whatever you could use this piece of code where you make sure that you cast the sender which is of type object into a date picker which you then can use to basically access date picker properties such as selected date so a date picker has the property selected date and you can now either override it so you could also just override it at this point and not just check it or in this case we're checking if it's not null and if it's not null then we are using the date okay so yeah that's basically it now if you were to black out certain dates you can do so as well so here you can use a calendar range and actually not as a property but inside of the date picker you can use a calendar date range like so and here you can define what kind of start date you want to black out so let's say we had this format of 0 1 well actually let's do 0 2 0 3 20 21 all the way up to the end which would be 0 5 0 3 20 21 now you can use this calendar range in your date pickers blackout dates okay so a date picker has this property called blackout dates and in there you can use your calendar date range and before you run this you have to be careful that the selected date is not going to be inside of the calendar range and i'm not really good with english calendars so here i made a little mistake so let's say all the way to the third of march it's going to be blocked out and the actual date that we're selecting will be the fifth of march okay so now it will be blacking them out but it won't crash our application because if you try it where you have the selected date in a blackout date well then your application will crash so you see here almost the entire february is blacked out so i cannot select these dates and all the way to the third of march okay so i can still select the other dates but i cannot select black outed dates all right so that's a little bit of an introduction to date pickers they can be very useful now you see how you can get the date from the date picker how you can also get it once date has been changed and yeah that's it for this video see you in the next one welcome back in this video we're going to look at expanders and expanders allow us to go ahead and expand content and then hide it again this is something that you usually see as a spoiler for example right so if you want to hide the spoiler you could use a expander all right so let's go ahead and use the expander demo project here in order to get accustomed to using expanders okay so i'm going to use a stack panel in here and in that stack panel i'm going to use my expander okay so how the expander works is basically you have your content that you want to put in here and you can have it inside of the expander that will then hide it okay so here i'm going to use lorem ipsum text so that i have a bunch of it otherwise i would have to type forever so here for example i'm going to paste this alora with some text quite a long text here and you can see that this is the text that will then be displayed now for this text block i want to wrap the text because otherwise it will not look good so text wrapping here i'm going to use wrap okay so now it's going to wrap my text i'm going to change the font size of it as well to something like 20 for example so it's a little bigger okay let's run this real quick to just see what this expander does for us so there we are we can click on this expander and it will display our data here now the cool thing is the expander allows you to put content in it which means you could put whatever you want in there so not just the text block you could go ahead and have another panel in here with a text block and on top of that you have for example a button that will say click me then you could have another item that could be like a date picker for example here you know like you could basically build whatever you want here let's run this again just to see how this will now influence our application so there we have our expander and you can see we have the click me button you have the date picker then you have your text block so you're totally free to put whatever you want in here as long as it fits into a window if we look at our expander we can see that it's really just this little icon but there's a lot behind it so how can we make sure that people know what's behind it well we could use something like click me to expand and again to close or hide my content to hide my content something like this okay so this will now be the header of my expander okay that's how it works there we are so click me to expand and again to hide my content and now of course it's a lot in more interesting if we can design this properly so in order to do that you can use expander.header okay so now inside of this expander.header is where you can add your design so here could have another stack panel for example which is going to be vertical so here orientation will be vertical actually let's make it horizontal so that the items will be next to each other and here it could have a little image and this image could be my beloved homer simpson here so the source would be this homer simpson image of course i'm going to change the width of this a little bit so that it fits into this expander so that could be the image and then i have a text block which will just say something like click to expand and to hide the content and click again to hide the content something like this and now this could of course also be centered so here this could be the content alignment and that would be vertical content alignment like so i'm going to put that into the center okay so now the text will be in the center like so and then there's homer simpson eating his donut beautiful image i love it and now there we are click to expand and click again to hide the content and that's basically it now this is something that could be very useful for a q a okay so where you have the question here at the top and then once you click into it you see the answer in more detail so this is something that you should definitely check out if you want to build a q a application and i would actually even recommend that you do that as a little exercise so where you have the q a in the sense of an faq so where you have frequently asked questions and underneath you have the answer expand it and you can of course have expanders next to each other in a grid so where you have multiple expanders and really build a beautiful little ui that will help you with that and then let's look at some of the events and here i can use something called expanded so expanded will be the event which will be triggered each time that is expanded or reduced again and is expanded there's a property that tells me if the item is expanded or not okay so i'm going to use expand did here to create a new event handler so the expander is expanded and here i can now well i have this new event and here could now for example display a message box which will just show expander was clicked okay nothing too fancy let's run this real quick and click on it i see expander was clicked and there we are and something you will notice is that this is only executed once we expand it and not once we unexpand unexpended so once we close it so to speak all right so that's it for this video i would recommend as i said to create a little faq using expanders to get a feeling for it design it in a nice way using different kind of properties like the color that you use as the background the colors that you use for the text the font and so forth and once you're done you can share it with us so if you feel like it then please share what you have built so the faq that you have built with us i would be very happy to see what you can build and how nice you can make it using everything that you have learned so far and of course more if you want to use more features that you have not learned in the course so far but learn somewhere else all right so that's it for this video see you in the next one welcome to the panels chapter in this chapter we're going to look at the different layouts so to speak order containers so a panel is a container for other ui elements and can also be a container for another container but basically the idea is that they will help us to structure the ui elements in a certain format so where we for example want to position our buttons do we want to put them on top of each other do we want to put them next to each other do we want to have a grid where we can specifically decide in which row or column the ui element should go and so forth so we're going to see how to do all of that how to structure our ui using the different panel types and this is going to be a very fundamental and important aspect of any kind of your wpf applications all right so let's get started in this video we are going to cover grids and grids are a super important layout element in wpf because it's allowing us to display elements in a specific order which is what we want in many different cases okay so let's create a new project and here i'm going to select wpf well you can search for wpf here and then it will give you the net framework option which is the one that we are going to use in our case okay so let's give it a name i'm going to call this one grid demo and then let's create it once the project is loaded you will see that you have your main window which is empty but when you look at your example code you can see that the default element that you have inside of your window is in fact a grid okay this grid now allows us to decide whether we want to have two columns three columns just one column and so forth and we can define all of that by creating something called a grid dot column definition or a row definition okay so if we want to create column definitions we can now create individual column definitions in here and define how each column should look like for example we could start with two different columns here and therefore i'm going to define how much width such a column must have okay you can see that there are a couple of different properties here the width the minimum width a name if you want to access it later on and the maximum width which would be the most interesting properties i'd say you can see there are a couple of events as well and dependency properties so there's a lot going on drag enter what should happen when we drag and enter when we drop something into that but that will go too far for this video we're going to focus on how to lay out a ui okay so i'm going to use with here and then you have multiple different options what you enter here okay so you could for example use a width of one okay now let's create another column and by the way you can also close this tag like this then you don't need to have an opening and a closing tag okay now if you want to have a second column you can just go ahead and say okay column definition with another one that will have a width of one now these both columns will now have a width of one pixel so there's barely any space in there so maybe we use something like let's say 200 pixels okay so this one will have 200 pixels and this one will also have 200 pixels so we can see that we have those two columns and they well leave out a lot of space here we're going to see how to use percentages later on and how to autofill as well but now before we look into that let's actually add some elements in here and i'm just going to keep it super simple because i'm just going to use buttons here because i think they are very easy to visualize and understand okay so here you can see now we have this button and i'm going to give it a text of button zero zero okay button zero zero which will be in the zeroth column as well as the zero row okay we don't have defined rows yet so it's going to be one row by default but we will later on see how to define rows as well now this button as you see is by default in our first column so in the column 0 so to speak we never defined that it should be there but it just is there by default now if we create another button you can see we don't see that second button because it's on top of it so let's say we would like to change the position of that button so we want to position it in the second column then we can set the grid column property you see that one here we can set it to a value so for example we can set it to one one being the second column because computers or programming languages except for r i believe they usually start counting at zero okay so this language c sharp that we're using here an example as well they count zero and then one okay so this is our zeroth column and this is our first column or number one column so to speak index one column okay so if you want to be specific with your first button then you should also state in which column it should be because otherwise this can lead to confusion okay i really recommend to always define the column and not just leave the default so this one will be button01 so button row zero and column one okay that will be the text of it so you can see we have two columns and they don't take the whole space now let's play around with the space a little bit so i'm going to use something where i have a percentage so i will use two star for example i could have used one star as well in this case it doesn't matter because we only have a width of 200 and this one will take the rest of the available space so this button 0 0 now takes all of the available space and it takes a percentage so to speak if you have multiple columns so let's say we have this column here also with one star like that and now both of the buttons have the same width so they're both having the same weight so to speak so this one has a width weight of one this one also has a width weight of one now if i make this second button so this button zero one if i make it with the two star now it will be twice as wide as this first button okay so this is how you can play around with the values here and you can of course also use something where you use percentages okay so this one will for example build will be 33 and this one will be something like 76 percent so this one will be one-third and this one will be two-thirds so that's also something that you can play around with so you can define a specific width so a pixel width in pixels this will be 200 pixels for example or let's say 500 pixels wide now and this other column will take all of the rest of the available space no matter what stands here or what we have here except we had another column okay so if we have another column in here now you can see the rest of the space that is made available will be split among the two because they have the same value here the same weight so to speak okay now of course i could change that to let's say something like 200 and this one would be one star so it would take whatever is available to it this one will be 200 pixels wide this other column that we created so the third column and so forth okay and then there is another keyword which is called auto now auto will take automatically the space that it requires for its children its children are all of the elements that are inside of this column okay so let's create another button for this particular case where i'm going to now call this one well position this one in column two and call this one zero two so button zero two and now you can see it will only take the width that it's text which means it's child so to speak here requires so this button has this amount of space that it needs and auto will automatically take that space now if i define manually how wide this button should be so if this button has a width of let's say 100 pixels now you can see that the button will automatically take 100 pixels and the auto will now be 100 pixels so basically it just says okay however wide the elements that are my children are however much width they require that's how much width i'm going to give them okay so let's say this one was 500 then you can see now we're suddenly out of the screen so this is something that you should avoid which is why it's tricky to play around with values at different levels okay so it's always good to have percentages and basically build your ui so that it's flexible and will look good on different sizes so to speak which is why i prefer to use a percentage here let's say button 0 0 will have something like 33 percent for it the second one and this should be a star so don't forget the star if you want to make sure that it will also be taking 33 percent okay without the start we'll take the pixel value with the star it takes the percentage so now in this case you can see this right button still takes the auto width so still only takes as much width as it requires but the columns well even though they should just use 33 this is still weighted okay so they're still waiting against each other how much weight do i need in comparison to the other elements that also are weighted because they should just take all of the available space that is left okay now if we change this auto to also something like 0 3 3 star now they will all take the same width of space even though the button still stays at 100 pixel width and in order to explain this a little better i think using percentages might be a little complicated so let's use whole numbers instead okay so what i'm going to do here is i'm going to get rid of this with for a second and now i have a width for all of my columns of one star so how this works is it will take one of the total of widths so to speak so it will take one of three so now one column or each of our columns is going to be taking one third of the entire width that is available for our grid okay and now if i would use something like two for the first two columns to start and the last one will take one star then this here would be two plus two plus one is five so this one takes two fifths of the width this one takes two fifths of the width and this one takes one fifth of the width so if you're using percentages i would recommend is you use something close to one so something like 0 3 3 for each of them is going to be fine even though it would make sense to potentially make one just a little wider using zero three four if you're using percentages which you would usually in this case i would really recommend to use the weights so if you want them to all be the same you will just use the same number here so even if you use two for example for all of them it's the same as if you would use one for all of them because now it's 2 6 2 6 and 2 6 so each of them is basically a third okay so that's another little side note that you have to take into consideration here okay now let's look at rows because we have columns now but what about rows well we can also use something like grid row definitions in order to define our row definitions in here so here if i create a new row definition here the main property will be height the most important one and here we can also use pixels once again for example so now i have a row of height 100 you can see all three buttons are just at this top part now okay so there by default in row zero if we define it manually here read row and then we say this one will be in grid row zero and this one for example will be in grid row one then this button zero one would go down here if we have another row definition so you can see we don't have this row definition so it stays where it would be by default because it doesn't understand what grid row 1 is as there is no row 1. now let's do the same thing with our second part so this one will get a row and in this case i'm going to position it at grid row one now this will push it just down a row so it will put it down here once we have another row but because we only have one roll definition this means we only have one row in our ui so you need to create a second row for this to take any effect because otherwise it will take the default which is grid row equals zero okay so let's create another row and now you see that this button suddenly moves down a row and now it's in the second row and now let's actually make them percentage-wise so this one will take a height of one star and this one will also be a one star so they will all both be of same height so to speak they will both just take a certain height well in this case the same height fifty percent for each of them now this of course will not be button 0 1 but now it will be actually 1 1 because it's in row 1 and column 1. okay so column this one here and roll this one here one one okay now let's create a couple more buttons so this is actually what i would like you to pause the video now and try for yourself so now position buttons in all of the empty fields okay so i hope you tried that i hope you paused the video so in the first column i needed a button at the position zero so this one will be button01 then i need another button in the column zero in row one and this one will be one zero and then i finally need another one in column two and this one will be the two one button now i want to change this bottom button here i want to get rid of this width and give it a row as well grid row of zero all right and this button here by the way should be one two and not two one okay because it's in the first row second column okay and this is generally how you can use grids you can of course have grids inside of grids you could have text inside of here you could have an image here at the top and then a button somewhere else and all of that you can handle all of that using grids and they're super powerful whenever you want to structure something like this okay and we're going to check out a couple more different layouts in the next few videos but for now i believe it's a good point to make a break and see you in the next video welcome back in this video i would like to talk about spanning and i don't mean spamming but spending so what we want to do is we want to spend items over more different rows or columns for example so let's say we have this structure here with four columns and three rows now what i would like to do is i would like to put an element here at the top which takes multiple columns as well as multiple rows in order to achieve that i can use something called spanning okay so i can add a span to my properties let's say i have a couple of buttons here okay so this button will be in the column of zero as well as in the row of zero and now i'm going to create a couple more buttons here okay so there we are i have all of my buttons in here and they have the right position as well as the name that fits to its row as well as column so this is row two column zero that's why i call this button button to zero or i added the text to it okay so now what i can do is i can make sure that a button for example takes multiple columns so let me get rid of this button here now we have an empty space here and i want to make sure that this button 0 0 will take a bigger span so it will span over 2 columns so i'm going to use the column span for that so there is this property grid column span and here i can for example define that this element should span over two columns now if i wanted to make sure that this button is going to span over two different rows as well i can add a row span here as well let's say a row span of two now it will be overwritten by the other button so let's get rid of those as well so that we can actually see this bigger button now so this button 0 0 will now in fact take a bigger portion of the screen in order to make this a little more visible i'm going to change the color of this button so let's change the color to something like aqua okay now you can actually see the difference between this button and the others quite easily all right now a little challenge for you please change the background color of button one two and then change its span for the column to two and afterwards to span for the row to two as well and at the same time get rid of the buttons that are in the way okay so i hope you pause the video so the buttons that are in the way are going to be 22 and 23 as well as 13. and now i'm going to change the background color of my button one two and here i'm going to use a blue violet for example and at the same time i'm going to change the column span first and i'm going to set that to two okay so now we'll take two column span off space and i'm going to do the same thing with the row so here the row span will be set to 2. and there we are now you see how you can use spanning in order to span ui elements over multiple different rows and columns and this of course does not only work with buttons that works with any other type of view that you have in there okay so also here of course what's going to be taken into consideration are going to be the widths of the individual columns okay so this is not a way to make a column wider if you wanted to make a column wider so let's say the last column should be twice as wide what we would need to take into consideration is that now it's 1 4 and what we wanted to have would be two times as big which means that it will take half of the screen okay that would be basically twice as big if you want it to be twice as big as the rest well you would need to make this three okay so the total it now will be six widths okay and the three will be three sixths which is one half that's how you would for example change the width of a column but you can also see that our button one two is now basically significantly wider it's still spanning over the two columns okay so that's really something that you can play around with and build any type of ui using grids that's why they are so flexible and useful to use all right so that's it for this video and let's have a look at some other controls in the next few videos in this video we're going to look at stack panels right so let's go ahead and create a new wpf app with the.net framework and the idea behind stack panels is that you can stack elements on top were next to each other so as you see inside of our window we still have a grid by default and let's change that let's actually create a stack panel here instead and what i want to do here is i just want to stack a bunch of buttons okay so i'm going to create a button here and this one will be my button one and then i'll just create a couple of more buttons in here okay so if we look at our ui this is the ui that we are getting right now so let's change that up a little bit let's make this like 200 pixels wide and something like i don't know 200 pixels high as well okay so this is what our ui will look like so we have a button here at the top and now what a stack panel allows us to do is to stack elements next or on top of each other so let me just stack another button in here so this one will be button two okay and then another one this one will be button three okay so that's what the stack panel does and it's not limited to buttons you can use any type of ui element in here so it will just stack the ui element based on its position inside of the stack panel so here if i change button 3 to be at the top now you will see that it will be also in the y at the top so that's how a stack panel treats its children it takes them and based on the line of code that they are at it will position them in order okay now what if you want to stack elements next to each other well there you can also use a stack panel of course and you can change the orientation property this orientation is by default set to vertical okay so that's something that we don't even have to set up by default this is what is happening when you create a stack panel even without this line of code but once you add it here you can of course change the property up so if you don't know what you can enter here what you can do is you can use control and space and visual studio will then offer you the different options that you have in this case let's use horizontal and we can see that now the buttons are stacked but they are stacked next to each other okay so let me use vertical for this main stack panel and now let's create another stack panel in here orientated horizontally so the orientation will be horizontal and now let me add a button for one so here i'm going to call this one button for one and then another button which will be next to it button four two and button or three for example okay so this is how i can stack elements next to each other if i want to basically use ui elements that need to be next to each other that's always a good way to do it if you want to make sure that the stack panel is displaying its children centered so in a centered way you can use a property called horizontal alignment okay so here you can for example say that it should be centered what this will do is it will center your stack panel it won't center the buttons the buttons will still be in the stack panel as they are but everything that is inside of the stack panel will be centered now the thing about stack panels is that they consider their children that they will take infinity space so basically it can overflow here so if i have a button 4 4 you can see that now the buttons will overflow and will get outside of the screen so they are out of the edge of our screen which is usually not what you want so you have to be really careful here the same goes for a vertical stack panel okay so you can see here now we also have all of these buttons and they basically push whatever is underneath it just further down and also what you can see is that the buttons by default only take the height that they need for their children to display in this case the children is the text so for the button to display correctly as large as the text will be that's how large the button will be so if you play around here with the font size of your button let's say you make it bigger then you can see that the button will automatically change its size and appear accordingly in your stack panel so that's something that you need to take into consideration when working with stack panels the children get all of the space that they need and then one more thing that i would like to show you so therefore i'm going to get rid of this inner stack panel and i'm going to add a couple more buttons and before i do that i want to add something called horizontal alignment to the buttons themselves so for example you can see that i can center a button i can position it towards the left the right and so forth so if i center it you can see that now it will be centered inside of the stack panel that is its parent okay so now let me do the same thing with the other buttons okay this one will be button two three button four and now you can play around with these values here okay so for example you can change the left value then it will position itself towards the left on the horizontal axis the same goes here for the other button you can play around with it and use for example the right statement so now the button will be soon towards the right because the horizontal alignment is set towards right and then you can also use stretch here and this will then stretch the button throughout the whole screen you saw that before we entered any of these settings the buttons by default were stretched so if i add a new button here and i'm going to call this one button five you can see that the button by default will be stretched and will take the whole available with okay so here we didn't even need to add this stretch statement manually it was just there by default and was considered as a horizontally stretched button and the same goes of course for vertical buttons so there it's exactly the other way around now if we were to use a horizontal statement here you can see that they are all stretched by default because center left and right doesn't do anything to them because now they're stacked horizontally so here you can use alignments that will be vertical so here vertical alignment and you can see that now they have an effect even though left and right don't have an effect really so what you can do here instead is going to be bottom as well as top okay so these are the options when you have a horizontal stack panel and of course stretch will stretch over the whole height that is available inside of an horizontal stack panel now that is the stack panel and it is very useful if you have a scrollable view so if you can scroll and therefore you would use something called a scroll view so here instead of just using what we have here with a bunch of buttons let's say we had a bunch more buttons here then we would need to be able to scroll in order to do that we need to surround it with a scroll viewer and this will allow us to then let me put that in here scroll you can see there is a scroll bar here at the side and now let's open this application i'll run this application and we will see that we have these buttons and we can actually scroll okay so you see the limitations that such a stack panel has the problem that you need to actually be able to scroll if you don't know how much space the elements inside of the stack panel will take but if you want to stretch the elements that are inside of a stack panel towards both directions not just based on the orientation then you would need to use something called a dock panel which we are going to look at later on so see you in the next one quick pause this video is sponsored by one of my courses so you're learning something about wpf in this video and i have a completely sharp master class which teaches you a lot more about sharp if you feel like you need to learn more about your shop to understand everything that's going on and then if you want to learn everything you need to know about wpf definitely check out my wpf course it's a 15 hour course which will teach you everything you need to know about wpf building an entire windows store clone using my apps in order to achieve this metro design which is the design language so to speak for the latest windows 10 applications you can find a link in the description down below and there you got a huge discount so don't miss out get one of the courses or both of them now and now let's get back to the video welcome back in this video we're going to look at wrap panels okay so i have prepared this little stack panel here with buttons which say click me okay and by default stack panels just stack elements on top of each other if you change the orientation however it can also stack elements next to each other and you can see it really takes all of the parents with in this case okay now let's look at wrap panels instead so what kind of red panel do for us if we add elements do you see here the items only take the space that they need not more than that let me actually change the size of my screen up a little bit so it will only have a width of 200 here and now we have the three buttons which say click me now let me change the width of such a button to 100 pixels for example and now you can see that this other clip me button still fits in here but the third one doesn't fit in this row so it basically puts it into the next row and this depends on the size of the screen that we have here now if we can also set up the height here let's say we set it to 100 you can see that all items inside of that same row so to speak will also have this height of 100. okay let me add a couple more buttons here and let me run this application real quick what we will see is that if i make some more space the elements will stack next to each other and if i don't have much space they will be on top of each other or basically they will be dragged to the next row you can see here that's basically what you can play around with and that's what's going to happen with wrap panels now they have a really big advantage you can see and that is for example that the items that they have as children are only going to take the size that they actually need or that is defined manually like we did with width and height for one of the buttons but what you can also see is that whatever height you set up for your button that is also going to be the height that it will use for the entire row so if i now were to put the button that has a different width and height at this different position here then what will happen is that in that row where this button is that has this height the entire row will now have this height as well so if we run our application you can see if it is still fitting in the first row then it will basically make all of the first row buttons or ui elements have the same height but if it only fits in the second row the second row will have this height if it is by itself you can see all of the other buttons aren't influenced by its size and as it is with stack panels a wrap panel can also have a different orientation so you can see here there is this property called orientation and the orientation can either be horizontal or vertical and the default will be horizontal but we can also set it to vertical so you can see now it's going to stack items on top of each other but then if there is no more space towards the bottom then it will stack them to the side as well you see so now it stacks them to the side and this really depends on the orientation that you set up all right so that's it for wrap panels now you have an idea of how rare panels work and how they treat their children and that's it for this video see you in the next one in this video we're going to use dock panels and check out how they can help us for our future projects okay so i'm going to create a new demo for that doc panel demo and the cool thing about doc panels is that you can dock your items to a particular position okay so let's look at this in our application so i'm going to make this a 500 times 500 window and now i'm going to use a dock panel here okay so inside of this panel i can now add all of my ui elements for example i could use buttons here so i'm going to use this button that will have a text off top okay so this button should be at the top of my dock panel now because there are no other buttons this button will take the whole available space if i add another one you can see that now we have these two buttons and the second one being huge the first one pretty small so the dock panel doesn't have any details about where we want to dock our items yet and that is something that you can set up by using the dock panel slash dock property and you can see that there are a couple of options for example i can dock one item towards the top and then let's say i want to dock my second button towards the right for example here then it will be docked towards the right even though we can't see it yet so let's dock some more buttons this will make a lot more sense so this one will be docked towards the left and then finally that one will be docked towards the bottom okay and now let's add another one which will not be docked at all so i'm going to get rid of this and this is basically what we are getting here actually let me make this a little smaller okay 300 times 300 i believe then we can see it a little better here so we have the top button we have the this one will be the left button and the bottom button okay and then finally we have this one which is the center button so we can dock elements towards the different edges of our screen you can see this center button is just there because well it doesn't have a dock to which it should go and the bottom button here you see takes the whole available space because well the others are just pushed to their sides and only take the space that they require but this bottom button well it will take the rest of the available space so if we have other elements in here it doesn't have to be another button it could even be an image here okay so here i could have an image and this image will have a source of let's say homer simpson so i'm going to use this image here so now you can see that the elements that are in the middle are just going to take all of the available space and the items that are docked are going to only take the space that is required for that particular direction okay so the top button takes all of the available space then you can see the left button starts with the top button ends but it goes all the way to the bottom you can see the bottom part only is cramped between the left button and the right button so basically between the left dock and the right dock it doesn't have to be buttons it could be any other type of element that you want to use there okay so what happens if you have multiple elements docked to a specific area so let's say we have two left buttons so you can see now both buttons will be docked to the left and whatever is in the center will be cramped a little more if we do the same thing for the right button you can see that it will do the same thing now if we check it out for the bottom button then you see it will push our image a little bit towards the top that's how a doc panel handles its children now if we get rid of our image here once again what you will see is that our last child is filling the whole screen you can deactivate this behavior so if you don't want to have this behavior what you can do is you can add a setting to the dock panel called last child fill and set that to false okay so that will then make sure that the last child which is this bottom button here doesn't fill the rest of the available space if you set that to true however which is the default it will fill the rest of the available space so the last child so to speak will fill it so the last child is in our case this bottom here which will then also fill the rest of the space so you could have done the same thing with that image so you could have docked it towards the bottom like so and if the last child fill is set to true then it will even though it's dragged towards the bottom still fill the entire screen if that's set to false well in this particular case because the image actually needs this space it will still look the same and that is something that you definitely need to take into consideration when playing around with this you can see last child fill will basically fill the last child if you set it to false then you can deactivate this functionality now you can of course also play around with the sizes of your buttons so let's say this top button has a height of 100 then it will just take all of the height that it requires even if we set the width now to 50 you see even though the button isn't as big anymore the other items will be underneath that element so they won't take this space that is made available here this top part with the size or the height of the top button or the biggest top element will take the entire space even if it's not really used at all at this point the same goes of course for the width of the right and left buttons so this one if it has a width of 100 you see now the bottom button will be direct or the bottom ui elements will be pushed towards the side based on the space that the right docked elements will require all right so that's it for the doc panel and let's look at some more panels in the next videos see you there in this video we're going to look at canvas and the canvas is basically something that you can draw on and it's very similar here in wpf you can basically draw on this canvas it's a open space that you can position your elements based on coordinates for example so let's create a new project for that i'm going to call this one canvas demo and the idea is really that you can basically have no limitations on where items will be is positioned by default so let's say we have this 400 times 400 screen and instead of using a grid i'm going to use a canvas here okay so this canvas now can also have a button for example and this one will say click me just as a test and you can see that this button is by default well i said no defaults but it's going to be at the top left and if i add another button you can see that it doesn't have a position so it's going to be on top of the other button or basically not visible in our ui so you can see it's not even there the button doesn't take the whole width doesn't take the whole height it basically is just written on top of it so what you can do is you can change the canvas property so there are a couple of canvas properties like canvas left bottom right top so for example if i want to position it towards the left then i could say how many pixels away from the left i want it to be so let's say one will be five pixels from the left the other one this other button will be five pixels from the right and maybe we should also call it top right then so there we are okay so now i'm going to instead use well instead of buttons i'm going to use something called a rectangle okay so you can also create rectangles directly here and i'm going to set its width to 100 and its height to 100 and it's fill so it's color to let's say aqua which will make it this bluish color okay so this will be a rectangle and you can see by default it's at the top left and you can now of course change the canvas position so let's say i want to position it towards the bottom at canvas bottom zero it will position it towards the bottom left which now means it will be zero pixels away from the bottom but because left is the basic default it will be at the bottom left now you can also have multiple canvas properties here so i wanted to be for example at the bottom right then i would use canvas bottom and converse right and position both at zero or set both values to zero now my rectangle will be at the bottom right hand side okay so basically this says zero pixels away from the bottom and this one says zero pixels away from the right and then you can also have another rectangle let's say this one here which will have a different color so here i'm going to use something like azure okay this is well maybe it's a little too light let's use blue here so now you see the rectangle that was added later is going to overwrite the one that is added earlier so this one is overwritten or drawn over so to speak okay and you can reposition it a little bit let's say i'm going to position it 50 pixels towards well away from the bottom right so to speak so now you can even add something called the z coordinate okay so there is this property called z index so panel is index and here you can position its index so let's say this one will be in the z index one and our second panel or rectangle will be in z index two you can see the higher the z index the more visible it will be so to speak so if it was z index zero then you can see z index one is going to be on top of z index zero okay and that is something that you can take into consideration here and yeah that's basically pretty much it right that's how you can play around with canvases you can really position anything in there the canvas of course has also a couple of properties you can play around with those height name width you can set the drag events what we are going to do is we are going to set the alpha so the visibility the transparency so to speak which will be the opacity so here is this opacity property you can assign a value between 0 and 1. so you see here 0.5 will be 50 opacity so whatever is inside of this canvas will only be half visible so to speak if you use 0.9 it will be 90 visible and if you go even further let's say well if you go to one then it will be entirely visible but 0.0 is almost invisible 0.1 is barely visible so that's what you can play around with with the opacity value alright and that's it for this video see you in the next one welcome back in this video we're going to build this little software where we can enter the age of our cat in calendar years and then it will tell us how old the cat would be if it were a human which basically will multiply with a certain value okay so if we say our cat is 10 and then we press enter then it will say something like your cat is 56 years old so if your cat is 10 calendar years old then it's more like she's 56 years old in terms of how old a human would be in their lifespan in comparison to a cat that is 10 years old okay so we're going to build this therefore we're going to use an event here the key pressed event and you can change that and that will then basically well change the number up here a little bit you can see it's adding four years each time that you add it here even though it's not exactly that okay so it's a little more complicated than that all right so let's set that up let's build that software together and we're going to first build it using xaml the y at least and then we're going to build the ui entirely using c-sharp code so only code behind so let's create a new project for that new project and i'm going to call this one cat ears example demo and i'm going to use a stack panel here as the parent basically a stack panel allows me to stack elements on top of each other okay and inside i'm going to have another stack panel which allows me to put elements next to each other if i change the orientation to horizontal okay so the default orientation is going to be the vertical option which is the case for this one so we could even define it here manually if you wanted to so here making this stack panel vertical this outer one and the inner one would be horizontal where we put items next to each other and what is it that i want to put next to each other well i want to put a little text block in there which will say how old is your cat so this will be the text here and then next to that text block i want to position my text box which will then allow me to enter a value here text box is what you would use for entering text values okay so let me give it a couple of properties so i'm going to give it the name of input cat h then i'm going to give it a width of something like 120 pixels for example okay so that we have a little bit of space here a little bit of margin so that we have a little bit of space to this text how old is your cat in years and then i'm going to align the text that we enter into this box towards the center so text alignment is the property that you can play around with here and we're going to set that to center okay so this text box has a couple of properties and we're going to assign them accordingly here and then i'm going to also change the font size up a little bit so that the font size will be 16. okay and now i have another text block that i want to display underneath and that will be outside of this stack panel here where items are next to each other so it will be underneath and in order to achieve that i'm just going to use a text block here with the name of result text block because that's where i want to display the result then and i'm going to set the text the default text your cat is and then i'm going to set the font size to also be 18 so that the text is in similar size as the one for how old is your cat and then finally underneath i'm going to use an image okay so here i'm using an image from a cat therefore you can use a source that you like i'm just going to use this cat image that i will add to my solution explorer here i'm just going to add this image directly to the project so in the project folder you can of course create an extra folder here call it images and so forth it would also make sense if you had multiple images but i'm just going to have one image and that will be this cat jpeg okay so let me add that in here as well so now i will have it available after a couple of seconds in my project and i can use it as the source so here i'm just going to use cat.jpg and after a while it will appear so there we are we have our cat we have our text we have everything ready and now let's go to our code behind where we want to actually execute something and when do we want to execute something well once we pressed on the enter key and where do i want to put this enter key well once i'm inside of this text box and i've entered a value at that point i want to execute an event so in here i can add this key down event and let's create a new event handler therefore it will be called input cad kh underscore key down and this will be this new event here okay and this will be triggered each time that we press any key while we are inside of this text so you can check this out by using a message box here so key pressed for example and we're going to use the show method for the message box this will allow us to display a little pop-up okay and the pop-up will say key pressed okay so let's go in here and press any key so for example i pressed one and then one appeared i pressed enter and it just says key pressed okay so basically every time we press a key this event will be triggered now at this point we don't want to show the message box all the time we just want to show it if the key that was entered is going to be the enter key okay so here this is how you can get the key that was entered by getting it from the key event arcs so this e will give you the value that was pressed basically so the key that was pressed and then you can compare it to a particular key by using the key enum and this key enum has all of the different keys that are available on the keyboard so you can just press dot and then you can see all of the keys here that are there the f keys the l the n numpad keys all of them okay and we're going to use the enter key here so if the enter key is pressed only then do we want to execute some code now in here i'm just going to use a try block because the code that we're going to execute can go wrong the user could for example instead of entering a number he could enter a lecture for example or a special character or something like that which is why we really need to make sure that we are parsing this correctly so here i'm going to get the cat h as an integer and i'm going to parse it into an integer 32 so here input cat age dot text will be what i'm getting it from so this input cat age by the way is this text box here so we gave it this name of input cat age and now we can access this variable so this text box and we can access its text property which is actually the content of that text box we can access it here so we get the value and then we try to parse it into an integer so basically we try to make our own an integer out of a string because this text property here as you can see is of type string okay now we have this input cat h and we need to prepare a variable that will be displaying the human age okay and i'm going to prepare the string for this and let's fix this arrow here real quick and therefore i'm going to catch the exception here so use the catch keyword here and then the exception i'm going to use a default exception i'm going to call this one my exception and usually what i would do is i would call this e but the problem is we already have the key event arcs which is called which is why we need to give it a different name and now inside of my catch block i'm going to just display a message box showing not a valid number please enter a numeric value and display the exception message okay so how do we actually calculate the human years for our cat well there is this page and this article even with this new guide here here cat age chart cat years to human years how old is your cat in human years and they even have a calculator here where you can enter it but basically you see if it's one year old it's 15 human years old if it's two years old it's 24 and then it goes up by four years each okay so it's not that simple you just multiply with seven or whatever but that's how they say basically how old the cat would be so a 20 year old cat is similar to a 96 year old human all right it it happens really but it happens okay so it can become this old all right so now let's bring this logic into our software okay so we're going to check if input cat h is greater than 0 which it should be otherwise we don't want to do anything with it and if the input cat h is less than one if that's the case then the result human h will be something like between 0 and 15 okay we don't give a very definite answer here basically and of course this is the input cat age like so and at this point we can assign the text to our results text block okay so this word says your cat is now should display something like your cat is the result years years old okay something like this now of course we need to assign this to the text property here because the result text block itself is of type text block but the text property is of type string so we can assign a string to it and now we need to catch the other two cases so what if the age is between 2 and 25 which would be this else if block where we say result human h will be the input cat h minus -2 times 4 plus 24 to string okay so this is basically the logic how you can calculate the age of a cat because if you look at it here at two years it is 24 and that means that at three years it's going to be 24 plus four okay and this is what we achieve with this logic here so let's say we entered five then it will be 3 times 4 which then would be 36 which is exactly the right value here okay so that's basically the logic that we follow here and then in the else block if we enter the value that is higher than 25 we're just gonna say hey this is very unlikely that your cat is that old or that this means that your cat is not born so if you enter the negative value then it will just say that it was not yet born okay now let's run this code and see if our application is going to work now one thing that doesn't work yet is our cat doesn't appear but let's enter 12 here press the enter key and you see your cat is 64 years old and because the cat still doesn't appear correctly let's add a new folder here which i'm going to call images that's why i'm going to drag the cat in okay so let's drag it into the images here there we have our cat now and now we can use it in our images folder like so backslash images cat now let's run it again and we can enter the value and it will still do the trick so if we enter an observed value we will be notified about it otherwise we're going to see the cat years and then if we enter something entirely wrong like not a number then we're going to get this notification here not a valid number please enter a numeric value and so forth all right that's it for this video and we're going to look at how to build this ui using code behind entirely all right so see you there welcome back in this video we're going to basically build the same software that we built before but we're not going to use any xml code for it okay so we're going to get rid of all of this here we won't need it because we're going to build everything using rc sharp code meaning the code behind code now of course we're trying to access variables that don't exist anymore like this result text block for example or the input cat h they don't exist anymore so we're going to need to change this up a little bit so basically we're going to write all of the setting up of the ui in our main window constructor so you can basically build everything that you can build in xml you can also directly build in c sharp the problem with this is that you are not separating your ui entirely from your code behind which makes it a lot more difficult to work with but sometimes it just makes sense to use it because you want to dynamically change your ui and that is not something that you can easily achieve using xaml okay which is why it really helps to understand entirely how to build ui elements directly in c-sharp which is what we're going to do in this video so we're going to set up everything step by step so the first thing that i'm going to set up is going to be the background image okay so here background image will be a new image item and it will get the source so this is how you can assign an image okay it's going to get the source of a new bitmap image where i now need to define the uri so where is the image located so to speak so we need to pass a uri source that's how you can assign an image to an image object in your c-sharp code okay so here i'm going to create a new uri which then needs to string and i can get that string from our environment dot current directory what that will do is it will basically give me the current folder in which this exe file is and then i'm going to add to it the following link so you can use the add annotation here and then say okay go up a folder and then go up once again a folder and then go to the images folder in which you then will find the cat.jpg file and then we can define the uri kind like so and i'm going to say that this will be a relative or absolute link this means that this will now be findable so this image will now be findable on other pcs as well not just on my pc where i have this link okay so it will always create a relative link or get the relative link based on where the item is so to speak okay so this is how we can assign a background image so we created a new image and now let's create our text block and text box because we need both of them right we need the text box to enter a value into text block to display the value so what i'm going to do here is i'm going to create those two objects here public text block and i'm going to call this one result text block and then a public text box which i'm going to call input cad h okay now as you can see the arrows that we had before are gone because now we're using the result text block as well as the result text box now the thing is we need to make sure that those objects aren't going to be empty okay so let's assign something to them let's first of all take care of the result text block and initialize it with a new text block okay now you can define what you want to have in that text block so you can define its properties directly here in curly brackets so for example you can assign a value to the text property straight away from here something like your cat is empty space is something you can define from here as well as the font style font weight font everything all of the properties you can define here directly okay so basically what we have achieved earlier in our example is what we achieve here now so we're creating this result text block we are creating well we're assigning the values that this block has by accessing its properties and setting values to those properties and so forth and now we can do the same thing with our input cad h and i'm going to say that my input cad h will be a new text box so the text box is the item where you can enter something to and i'm going to set a couple of properties for example i'm going to set the width to be 120 pixels i'm going to align the text towards the center using the text alignment enum so here i can just say okay align it towards the center assign the font size of 16 to it that a little bit of a margin this one was a little more complicated so let me actually put this in another line so the margin needs something if you hover over it you will see that it needs an object of type thickness okay so you need to assign a thickness to it let's create a new thickness item to it or let's create it here new thickness and here you can define three overloads so either default thickness or thickness with a double value or the left value the top value the right value and the bottom value which is the one that i'm going to use because i only want to have a left value of five and the other should all be zero i only want to have a little bit of margin towards the left okay and that's what this will do for me so that's my input cat age which will be a text box and then if you want to assign an event to it because we have still have these events here this one in particular this input cat h down or key down if you want to assign it to your input cat age what you can do is you can use input cat h and then add this input cat h key down to it like so okay so this is how you add an event to your key down event okay here plus equal will allow you to do that okay you don't want to override it entirely because maybe it has some other stuff that it has to run internally as well but you want to just add what you have manually created to happen once the key down is executed okay so that's how you can add an event using c sharp now adding all of these items they won't be displayed yet and in order to display them we need to have a parent panel for example a stack panel or a grid in which we can put it okay so let's create a stack panel here which will be my main vertical stack panel that's what i'm going to call it okay and this main stack panel will be just a basic stack panel like so and now i can add items to this stack panel let's do that real quick just to show you how this in general works so let's just add this result text block to this main vertical stack panel so you can add it to its children by using children.add and then add the ui element that you want to add in my case the result text block okay so that's going to be it at this point all of the content that i'm going to add for now and then i will access my main window which is this one here which has the title of main window but it doesn't have a name yet so let's add a name property i'm going to call this one my main window okay and now i can access this main window here by saying my main window like so and i can assign its contents to be my stack panel that i just created okay and at this point we can run it real quick it will not be done yet but we can run it to see that this actually works so you see we have this text which says your cat is so we have nothing else in our ui yet because that's the only item that we added to our panel which is going to be the content of our main window and now what we wanted to have is one text block which is the user question which will just be a new text block i'm going to put it down here text block user question which will be just a text block which says how old is your cat with a font size of 18 okay and now i want this text block to be next to this input cat h how do i do that well i can use a stack panel once again and this will be the horizontal sp sp standing for stack panel this will just be a new stack panel with a couple of settings okay and the settings that i want to set is for example the orientation should be orientation dot horizontal so this orientation enum has the two different orientations for example the horizontal orientation here then you can add a little margin to it as well so all of the properties that you would use inside of the example code you can now add in c sharp code as well so this will be a new thickness item or object because that's what we need here one pixel towards the left five towards the top and so forth okay and this needs to be closed like so okay this will now be my horizontal sp so now what is it that i want to add to this horizontal sp well actually i want to add the user question to it so here horizontal sp so the horizontal stack panel dot children dot add and here the user question and now let's add the other item as well so like so and here it will be the input cad h okay so this will be now inside of my horizontal stack panel but the horizontal stack panel doesn't display it so if we run this we won't see any change because this horizontal stack panel is not yet part of our main content so of our main window content because there we only have the main vertical stack panel so what we can do now is we can add our horizontal stack panel to this vertical stack panel so we can add the children to it and here actually the order matters so i'm going to add the horizontal stack panel to it like so but i'm going to change the order because first i want to have the horizontal stack panel then i want to have the result text block and then i want to display the background image which is this background image here so here i'm going to use my main vertical stack panel children dot add and then add the background image like so and this will now basically build my ui entirely okay so let's run this there we are and our ui works flawlessly okay and that's basically how you can build your ui using c-sharp only let's actually check if this is going to work so let's enter five years and there we are our cat is 36 years old so the idea is that you have to build your app from bottom to top instead of top to bottom which is a little confusing but basically you don't have the main window content at first doesn't make sense to assign something to it that isn't ready yet so we need to prepare the item that will be the first child of our main window at the end and then the children of that child step by step going further up so to speak okay so we start with whatever is at the deepest level first we prepare everything then we assign it to the parents or to the container so to speak which is a stack panel as a container or a panel right i personally prefer the container keyword so basically the stack panel is a container and we are assigning items to it okay so that's how you can build it using c sharp only and yeah this is totally fine it is a valid way to work with your ui and let's say you wanted to add something to your main stack panel just a little challenge for you okay so adjust your code so that underneath your ui so once you run the application let me actually show it here once you enter a value here and you press enter that this text will also appear here at the bottom okay so that or a text that doesn't have to be this text any text will let the beer appear at the bottom of this image okay so i hope you tried it i hope you pause the video therefore what i will need to make sure is that my stack panel main vertical stack panel is actually going to be available up there as well so that it will be available throughout my class and now i can add a child to my stack panel like so once i am clicking the key okay once i enter the key here at this point i'm just going to add a new text block okay so here i'm going to create a new well let me actually copy it from here like so this text block and i'm going to call it my extra text and underneath the cat will be the text that we use here and i'm going to add it to the children and let me actually rerun the application once that is done so you can just see that you can dynamically change your ui while you are running your application so here let me enter something enter and now if you were wondering if it actually worked well you can only see it if you make your screen bigger so here let me enter or press enter a couple of times and you can see that the text appears down here okay so that's how you can manually adjust your ui using c sharp code and dynamically change the ui using your c sharp code entirely without relying on xml code but as i said i wouldn't use that for a general setup of your ui i would really only use it if you want to make dynamic changes and even there i would look at if it's possible to achieve these changes using binding so data binding for example or using triggers and stuff like that instead of doing it in c-sharp so try to separate your ui from your actual logic as much as possible all right so that's it for this video see you in the next one quick pause this video is sponsored by one of my courses so you're learning something about wpf in this video and i have a complete c sharp master class which teaches you a lot more about sharp if you feel like you need to learn more about c-sharp to understand everything that's going on and then if you want to learn everything you need to know about wpf definitely check out my wpf course it's a 15-hour course which will teach you everything you need to know about wpf building an entire windows store clone using my apps in order to achieve this metro design which is the design language so to speak for the latest windows 10 applications you can find a link in the description down below and there you got a huge discount so don't miss out get one of the courses or both of them now and now let's get back to the video welcome to the menu chapter in this chapter we're going to check out how to use menus which allows us to then have a top bar with menus that we can choose from and then basically select what we want to do with those menu items okay so it's definitely something that you will need for all of your more complex applications where you want to have some settings for example the user can go to the menu and change things up okay so we're going to see how to use the menu bar and then basically use some of its features okay so let's get started welcome back in this video we're going to check out the menu control which is a pretty cool one it allows us to basically create a menu and then run tasks based on what we click there so let's create a new project for that menu control demo so for this one it really makes sense to have the menu at the top of your screen so to speak so we're going to use a dock panel here and then i will use this menu keyboard okay this menu is basically already creating a menu for our whole screen this is not exactly what we want we want to make sure that it will be docked towards the top okay so that this menu item will be at the top of our screen and then i will assign a couple of menu items to my menu okay and here you can first of all have a header item which will be something like usually well and here we have this file at the top so let's open a header file or create a file header and then inside of this file we have a another menu item or a set of menu items actually okay so here i can go ahead and create another menu item which will be underneath file so if you scroll in you can see it here and now let's look at file we have this new for example okay so here that would be new and actually this can also be a header which i'm going to call new okay and then we can have another menu item here let's see what else do we have while open would be the next one so let's create an open and another menu item which will be clone repository clone repository and so forth okay so under new you can see we have project and file so a little challenge for you add those two to the menu items here okay i hope you tried it it's inside of this menu item here and this one was to create a project okay here project dot dot okay so this was one of the options and the other one was file dot dot dot okay so let's create another one here which will be file dot dot dot now the cool thing is you can also use images here okay so you can design your menu item the way you want so for example you can go ahead and just assign a menu item icon here you can see not just the header but also an icon and this icon could be an image that you create so here i could go ahead and use an image here and let's use an image of a project icon and i'm going to use this image here so here copy the address in my case you can of course also download it but be careful with attribution or usage rights and i'm just going to use this image now as the source for the menu icon so that's how it's going to look like so if you want to create or open a new project that's how it's going to look like in our application so let's run this real quick just to see how our app is gonna look like and here i click on file new and you can see i can select a project here well it of course won't do anything so the click event doesn't trigger so how can we actually change that well what we can do is we can give this header item also a click event okay so there is this click event let's add a new event handler for it menu item click is how it's going to be called like and here is where you can then run whatever you want in my case i'm just going to run a message box which will show something like new project okay so this will just be a little pop-up that will then appear and that will pretty much be it so let's click on this new project and you see new project are popped up all right that's it for this video as you can see it's actually quite simple to create such a menu and then of course you would have to define code that should run once any of the items is clicked all right so that's it for this video see you in the next one welcome back in this video we're going to look at the toolbar and we're going to set up our own toolbar so let's go ahead and create a toolbar demo project for that okay so what we can do is well first of all i'm going to use the dock panel here because it will allow me to make sure that the tray that i'm going to use is going to be at the top because i'm going to use a toolbar tray which allows me to put a toolbar inside of it okay so i'm going to change the size a little bit here to a height of 300 and the width of 400 for my box here for my win main window so to speak okay and in my toolbar trade that's where i'm going to have a tool bar now this toolbar can have a bunch of different items for example it can have buttons okay so i can create a button here which will use an image for example as its content so that it looks a little nicer for example i'm going to use a delete icon here this one that you can see here it's a little too big this way so let me change the width to something like 20 pixels for example okay so the idea is once i click on this button i want to delete whatever i have selected okay so here i want to delete what i will have in my text box underneath so i'm going to create a new text box to which i can enter text and as you can see now this toolbar tray will be by default towards the left that's what the dock panel does for us automatically so what i want it to do however is to go towards the top so here doc panel dock will be at the top this will now make sure that our toolbar tray is at the top so to speak all right and now this text box that i have down here that's where i want to enter some text then and then reset the value or delete the entry after i click on this icon here okay so this text box will have a name property so i'm going to call this my text box so that i can access it in code now this button once we click on it i want to do something okay so i'm going to add a click event here with a new event handler and once the button is clicked i'm going to check the text box and empty it okay that will be the idea here all right so in my main window example i now have this button click event and once i click on this delete button i will have my text box dot text to be an empty string and if we run this application we will see here is our text something like hello world is what i can write here and then once i click on this button you can see my text is emptied so now my text box here at the bottom is emptied and basically that's what my button does here and now you can go ahead and create a bunch of toolbar items here which will then make this look a little nicer okay so let's say we want to have some more buttons there let's say where we want to change the font size so i will add a separator here after this button like so actually you can also do it like so and now there is a little separator you can see it over here and after that i want to have a little label which will simply say something like font size folder okay now the user can select a font size from a combo box okay so here we can then for example select the combo box color what do we want to have as combo box items in there well maybe something like eight as the lowest font size then a couple more here something like 10 12 and 14 for example and as the selected option i'm going to set this one here so i'm going to set the 10 as the selected option so it doesn't have to be the highest one in this case the lowest number to be the one that is actually appearing here inside of the toolbar so now let's say i would want to set the combobox item settings here to be the font size of my text box okay so let me add an event here and that will be changed so what would that be selection changed this one here and i'm going to create a new event handler for this so combo box selection changed will be created for me of course it would make more sense to give this combo box a name and then have a more descriptive event but for this case it's going to be fine and here i would like to get the actual combo box item and therefore i will need a name anyways okay so let me get the name here i'm going to call this one cb 1 okay so this will be my combobox one and at this point we can go ahead and get the selected value and this will be a little tricky because we can get the combo box and i'm going to call this combo or c box which will be based on our sender but our sender is of type objects we need to cast it into a combo box item so that it will be of type combo box and then once it is we can use that combo box in order to create a combo box item so i'm going to call this cb item which will be based on my combo box so c box selected item okay so it's going to be this one here but this by itself will also not work correctly because now combo box selected item will return an object so we need to convert that into a combo box item and now we can go ahead and take that combo box item and get its content so i'm going to create a string here which will be new c box value or new font size maybe will be a better name so string new font size which we will get from the cb item dot content okay and this will well we need to cast it into a string so let's cast the content into a string like so and now at this point we can now create a double value even though we're using integers which will also be fine actually so int which will be my temporary value and i'm going to check if int 32 tripar so here we're trying to parse whatever value we get as the new font size and we're going to return it as temp and if that gives us a positive value so this will return true or false right and it will store the value if it worked in temp so it will store the string value as an integer inside of temp and at this point we can check if our text box wasn't empty or isn't empty and only then we will assign my text box font size to it which will be the temp value now this is quite a bit of setup that we need to do here but that has to do with multiple things here so this here has to be set up where we double check if text box isn't empty and all of that is because it will be empty when this event will be called for the first time because this event will be triggered once it initializes so once our combo box initializes so that means that at this point our text box will probably be empty which then leads to this overall problem that we are facing otherwise so you can of course try it otherwise and you will run into a bunch of errors i tried many different ways and this is the way that actually works the sender of such an event which is in our case our combo box selection changed event is actually going to be a combo box and as you can see we don't even need the name really here but it's fine so this is the combo box that will be the sender so we can convert the sender into a combo box because the sender is just an object right then we can convert the selected item of that combo box that is the sender of that event into a common box item we can get its font size by getting its content because this here is a content piece it could be of any different type in our case it's of type string but it could be whatever object type and then we convert it and assign it as the font size okay and at this point we can run our application and check if we can actually change the font size so let me write hello world here let me change the font size and you can see the font size is now changing okay so it turned a little more into a event and combo box tutorial rather than an actual tutorial on how to create such a toolbar but i think you get the general idea by the way in this case when working with toolbars what really makes sense is to add small hints so tool tips to your buttons for example here this one would be delete text okay so that's what this button will do once we click on it so let's hover over it real quick to see the tool tip so here you can see the text so here hello world and clicking on it will delete it here we can then select the different font sizes so generally you have a small text editor here you can of course adjust it accordingly and we're going to see how to use commands in another chapter and i would really recommend that you go back to this particular example once you know how to use commands and you implement a couple of interesting commands that wpf has to offer because there are plenty which are very nice such as delete because here we are actually writing a simple function that takes care of deleting but using the built in command for deleting will be more advanced and also something that you should use instead in the future but as we're going to cover this at the later state of the course i would say let's push that back until that point all right so thanks a lot for watching this video see you in the next one welcome back in this video i would like to show you how to use the context menu and the context menu is a menu that will open in a certain context once you right click in that context and the context that i'm going to use for this particular example is going to be a text box where the user can enter some text okay i'm going to change its height a little bit so that it's going to be a little bigger you see here and now what i want to do is basically once i right click into this text box i want to be able to change for example the font weight i want to make it bold for example okay so here i'm going to use text box dot context menu okay and now this text box will have a context menu or at least i can assign a context menu in here and i need to do that otherwise as you saw we get a warning and now inside of this context menu i can create individual menu items for example this menu item that i'm going to use here is going to have a header which will be the text that will be displayed of bold and then once you click on this item i want to run an event so i want to i will first of all give it a name so i'm going to call this one mi standing for menu item bolt okay mi bolt will be my menu item bolt and here i'm going to create a new event which will be called mi bolt by using control and space this will create this function for me and now i can basically say what will be executed once i click on this menu item okay so for example for now you can also use a message box here to just show some text clicked okay so just to test whether this actually works so let's run this real quick we're going to change it up a little bit once we saw that it actually works so let's right click in here you see this is the context menu it appears inside of the context of my text box but it doesn't appear down here so if i right click at the bottom here it doesn't appear because it only appears in the context of our text box so here once i click on bold you see this little pop-up appears which is this message box okay so i know that this event works which is great and now i can go ahead and actually implement the code that i want to run once i click here so what i want to do is i want to change the text boxes font weight therefore my text box needs to have a name because i need to access it right so i'm going to call this one my tb standing for my text box and now i can go ahead and say my tb dot font weight so i can assign a value to the font weight property and here i can use font weight laurel which will give me the different font weight options for example bold normal semi-bold and so forth okay and now at this point let's actually test this so let's write a little text in there and then make the text bold once we click on it so hello world right click make it bold and you can see now the text has been made bold now what if i want to make it italic that's a little challenge that i give to you so please go ahead and try that all right so i hope you tried it and therefore i'm going to copy this menu item i'm going to call this one me italic this one will have the header of italic and the click will be well i'm going to assign a new click event here new event handler which will create this me italic underscore click for me and actually let me stop running my application and then here that's where i want to change my tb font style and here i'm going to use font styles to assign the italic font style now let's run the application again and let's see if we can actually make our text here italic okay that seems to work so let's write hello world once again let's change it to italic and we can see it's italic now we can change it to bold now it's bold now you cannot make it unbolt anymore so if you want to make it unbold or un-italic basically making this a checkbox what you can do is you can make a change to your menu item okay so the menu item will not be a normal click item anymore but what you can override it with is going to be is checkable so you can add the is checkable property and set that to true so now this will be checkable which means it can be true or false and then you can have these two events one will be checked so i'm going to create a new event handler for that my bold checked and then another one for the unchecked state so the unchecked event so to speak like so and now i can actually go to my code behind and design what i want to design here so if it is checked i want to make it bold if it's unchecked i want to make it normal like so now this point i should get rid of this me bold click because we're not going to use the click event anymore and i should get rid of it here as well because now we're using the check and unchecked event so let's run this and see if this is actually going to do what i say it does so here hello viewer and right click make it bold right click make it unbolt so you can see now this is a checkable you can even see that there is this little icon here which was added for me which makes it checked okay so that's a really powerful tool you can of course use such a context menu in different contexts okay so for example what you can do is here inside of the stack panel still let's create a button real quick and this button will also have a context menu now so context menu like this context menu and now in here i will have a menu item and this is just to display that it works it will say something like change name okay that will be the text that will be displayed there and then once we click on it i want to basically execute something and what is it that i want to do well i want to change the content of the button which will be the well whatever is displayed so maybe we should display something like change text okay this will change the text of the button nothing else right so here i'm going to give it a name and i'm going to call this one my button and now i have this menu item click which will be my code behind okay so here once i click on it i want to change the button content to be don't click me anymore so this button is getting angry at that point okay maybe we even added an exclamation mark so it is really bringing home the point so let's run this real quick and now we can see that we have this button here actually it's super small let me give it a content so we can actually see something because currently the button doesn't even have content doesn't display anything so i'm going to say something like click me okay now this button says click me and if we run this then we should see that the button is a little more visible there we are and if i right click you can see now it says change text if i right click inside of the text box you can see it says old italic so the context menu is always in a particular context so in our case it's inside of the context of a button in this case here and once i click on it it says don't click me anymore okay so that's how you can play around with context menus and yeah you can of course also design a context menu item a little bit okay so for example let's say i want to make a menu item a little nicer then i can for example create an image here and this image will have the source of let's say homer simpson and that's because well i tend to use homer simpson a lot of my courses so i'm going to use this image from wikipedia which is the homer simpson image okay and this will be the source now let's see how large this will be maybe it will be too big right click and well it actually displays the image here and i would like to use it as the menu items image so as this little image that you see once you right click and in order to do so you need to use it as an menu item icon okay so here menu item icon like so and that's where you can then put the image okay so let me rerun this and now right click and you see there's this little homer has the icon for my menu item so the header is change text which is basically the text of the menu item and the image is this super super small homer so it's really scaled down to fit in there on the left hand side and you could of course do the same thing with those context menus you could use an italic image like the default italic eye that you see or the default bolt b that you would see for a bold icon so that's really something that i would recommend you play around with and that you create a couple more menu items to get a feeling for how to use menu items and one really important thing is really that you have to understand that the context menu item is always going to be inside of a particular context and this context could be any different type of ui element inside of a text box inside of a button inside of an image inside of many different other ui elements alright so that's it for this video see you in the next one welcome back in this video we're going to check out how to use a status bar and we're going to also use a progress bar while we're at it so we're going to combine those two controls first of all i'm going to make sure that this will be a dock panel because i want to have a couple of elements that will be towards the top so for example i'll have a button in there and then i'll have my status r okay now this status bar will be assigned towards the bottom so here bottom and the button will be assigned towards the top of the dock so here towards the top okay well the button doesn't say anything yet so let's change that and increase by 10 will be the text of the button and now my status bar here i can have status bar items okay so for example i could have an item that says very simply loading okay dot dot dot alright so let's look at it so here we see it says loading well let's change the status bar size actually to well for the dock panel last child fill let me set that to false because i don't like it if it fills the entire screen so now it's just going to say loading here at the bottom and then i want to have another status bar item which will be just after it and it will not say loading but in fact it will be a progress bar such a progress bar can have different properties the most interesting ones will be well first of all how wide you want to make it let's say i want to make it 100 pixels wide and then i will define a height of let's say 15 pixels and a value of let's say 10. okay so this will now be my bar here you can see this is the progress bar okay so it has a value of 0 to 100 and 10 would be 10 okay now what i want to do is i want to have a separator here in the status bars so let's create a small separator here it will separate my status bar i think this looks a little better here so we have loading dot dot maybe three dots would be better and then we have our loading bar and at this point i want to allow this button to actually increase the value of my progress bar so here you see the value is at 10 and now let's actually add a click event here which will be a button click and let's go in the code behind and we can see we have this event here which will be triggered so this method will be called whenever we click on the button and i want to access my progress bar therefore i give it a name here so this name mypb will now allow me to access the value of it and to increase it for example by 10 each time we click on the button so now let's run this and see how this will actually affect our progress here so increase by 10 and we can see here at the bottom our progress bar is increasing accordingly okay so this is our status bar here at the bottom which says loading and then we have the progress bar which is beautifully also changing now of course we could change this loading to be something like done once we are at 100 so quickly pause the video and try this for yourself please okay so i hope you tried it so what i'm going to do is i'm going to check if the value is greater equal 100 then i want to change the status bar item here this loading i'm going to give it a name so here name sb i loading for example and now i can actually change the content of sbi loading to be done and if it is not over 100 only then will i increase the value to well whatever it is plus 10 in this case so let's check it out now this is another perfect solution but let's click on it and it's done so it wasn't 100 and only once we clicked once again it went over the threshold and was finally done all right so that's it for the general idea of status bars of course there's a lot more that you can do with them but this was just a little example of what you could do with status bars and i think they're quite neat when you have certain situations where you want to display additional information at the bottom of the screen for the user all right so see you in the next video thanks a lot for watching this video it's been quite a long one and i hope you learned a lot along the way and if you want to learn more about this topic about wpf then definitely check out my wpf master class you can find the link in the description below that you will get the course with a huge discount and now at this point i just have to thank you that you made it all the way to the end i'm very excited that you did that and i'm super excited what you can build now and also hit the like button if you haven't done so already and that subscribe button because we're going to upload a bunch of more videos on c-sharp wpf but also on other topics such as unity and app development alright so i hope to see you in some of my other videos have a nice day and see you soon

Channel: tutorialsEU

Views: 54,711

Keywords: Tutorials, Course, Learn, Step by step, guide, learn wpf xaml, wpf tutorial, wpf databinding tutorial, windows presentation foundation, visual studio, wpf for beginners, wpf applications, C# WPF beginners, better app with wpf, textblock XAML, Textblock XAML, Hello World in WPF, ui elements wpf, c# gui, c# gui tutorial, build gui using c#, learn wpf

Id: oSeYvMEH7jc

Length: 279min 46sec (16786 seconds)

Published: Sun Mar 14 2021