Layouts In WPF

hi guys now in this lecture I will explain you what are WPA layouts 1wb of layouts form a very important part in WPF since they are responsible for positioning and sizing of controls or they are responsible for you to build a WPF UI or graphical user interface so if you are developing a WPF application you just need to be very sure about your layouts concept because that will help you to design a UI and place your controls accordingly in your UI so let's go through the slides now to define the layout of our window you views layouts now there are five common layouts which derive from panel class now all these layouts what I am going to describe they derive from panel class so panel is the base class of all all the layout so this point you can remember for your interviews now there are basically five types of panels stack panel drag panel canvas dock panel and grid so let's look in into them one by one through an example because the points those are that are listed in these slides are quite long so I don't want to read those points first let's look into our visual studio how to design these panels and then we will go through our slides so let's go through stack panel first now here I have a MT WPF application with me and it has a window and it has a grid so let's first look what happens when we do not have a panel inside of a window okay let me try to have a button inside a window without a panel so let me give it a height of 50 pixels and width of 100 okay so here I have a button in here so let me track this down let me try to run this application and here it goes he has the button for me and it works as usual means I have not written anything in button but it will work as usual and imagine see there is no content in this button because I have not defined a content in the button declaration but it seems to be working fine without a panel right but what is the problem the button is placed into the window but if we need to move the position of this button I cannot do do so see I cannot drag this button anywhere it's just positioned in the default space of this window so that's why we need a panel to actually position this button okay so in order to position the controls vini panels inside our window okay so let me have a bit remove this first and let me have a stack panel first because we are going to learn about stack panel and here it comes my stack panel and hi I have a stack panel inside my roof window now what is this stack panel does it stacks the controls one over the other you can imagine as a stack of window a stack of books so those books are kept one over the other so it deaths a stack so same thing goes with stack panel so let it has an orientation property with which stacks the controls in vertical direction or horizontal direction so let me have some controls in first so I have a pre typed code for this stack panel so I am using a label I am using a text box I am using a check box or with name as checkbox one and I am using a check box again check box - you can see all these controls are stacked vertically so if I change the orientation is horizontal those will be stacked horizontally so this is basically the stackpanel for you so let's add some more controls in here let me add to list boxes so I have declared a list box and I have closed the list box in here and then this list box has a item list box item and in that I have defined a item item 1 so that item 1 is present in the list box as a list box item and same goes with the other list box so both of these list box are here and then I am closing the stack manner let me also add a button so let me add a button and now let's try to run this application and see how my UI looks and you can see my UI is perfect okay I can use this checkbox I can select these items in the list box items I have a text box that's working fine and then this is the label this can you can put it text on it so this is all about stack panel so let's move back to slides so stack panel is a simple container control that just shows one element after the other the orientation of the stack panel could be horizontal or vertical and as that we have seen in our example so let's move to wrap and allow so let me comment this stack panel out I don't know it just stack panel anymore and let me collapse it and now let me have a track pallet graph panel inside my window okay so that it holds my controls and let me have a button inside this strap panel so this is a simple button with width width is 100 pixels and I have given margin because just to have a space between the buttons now let me have another button say another button say another button ok so I have five buttons with me let's let me make it six for ads okay so you can see I my buttons are being wrapped in a line okay and since there is no space in here with sufficient space in here so my button goes to the next line okay and same goes with the orientation of wrap panel as a stack panel so I can define a orientation horizontal or I can define orientation is vertical so all my buttons are tagged or wrapped in a vertical direction now you might be wondering what's the difference between a stackpanel and wrap panel if they are doing the same things right so let me try to run this application show you what's the difference between stakman and wrap panel so this is a wrap panel and you can see all these buttons are wrapped in a line and there is a knot there is not sufficient space in here so this button comes to next line and let me span this UI now and you can see as soon as it gets more space the button comes in line and let's try to do this same thing with the stack panel so I am I changed this stack panel now let's try to run this you can see all the turns us tagged right but they are not stacked like rap panel and not rapped means even if they are not getting space enough space they are stacked one after the other so let me so there is no impact on of changing the size of the UI on stack panel whether we're as in rap panel that adjusts according to the size of your UI so this is the difference between rap and a stack panel so let me make it back to rap panel you can see all my buttons come according to rap panel so let me now comment this out so I do not need a rap panel let me go to a slide so the rappin al positions the children from left to right one after the other as long as they fit into the line and then continues with the next line the poll panels orientation can be horizontal or vertical at this point we have seen in our example now let's come to canvas so let me have a canvas panel in here and now what this canvas panel will enable us they will enable us to place controls according to our choice that is we can place our controls according to some coordinates same as you do in window forms so in window forms you put a button and then you drag that button accordingly where you need to place that button right so this is the same thing that this canvas does so let me make the background of this canvas as say degree okay and let me paste some pre typed code so here it goes so I have a label I have a text box I have a button simple okay let us try to run this you can see here is my UI it says it has a text box it has a little button and it works fine but you can see there are some canvas dot top property in here can one slot left that's the property of canvas and those are called attached properties so I will cover these attached properties and dependency properties in a later video session just for now you just need to understand that canvas uses attached properties for the positioning of controls so let me change the position of this control in here and you can see the coordinates of this and this are changed now I can do it with something like this you can see can weld up top has chains to 8410 one slot left is changed to 45 okay so what this canvas is helping us it helps us for explicitly placing the controls on our UI let's move back to our slides so canvas is a panel that enables you to explicitly position controls canvas defines that as properties left right top and bottom and that can be used by the children for positioning within the panel so this is what what we have seen in our example let's go back to our example and let's comment this canvas thing out and let me collapse this okay and let's see the another panel called s doc panel okay so I have a dog Saida window now if you are aware of docking property of window forms and drop panel might be very easy for you to understand and this is also very simple panel and we pasted five buttons inside a top panel and let me run this UI so you can see all these buttons are docked okay but this really doesn't make sense because if you need to understand dock panel you just need to design a UI okay so let me paste a pre typed UI for you and make you understand how how and where we use top panel so let me paste the UI in here inside this top panel and you can see my UI is ready the moment I paste the zml inside a dock panel so let me try to run this and then I will explain you one by one what I have done so this is a text block control this is a text block so all these things are text blocks in here so you can imagine if you have a label in here you have a big text box in here or a status bar in here if you have designed a UI like this so this dog panel could be used in this manner that is you can have a menu here you can have a big text box or list box in here you can have a scroll bar or something like that in here and then when you do something your status will be displayed in here so all these things could be achieved with the help of dog panel so this is the positioning of the elements using a dog panel for simplicity of this video I have just pasted the text blocks in all the UI okay so let me go back to my salmon and see what is Emily I have used so here is a dog panel I have used a border so that these all controls could be clearly differentiated then I have used this test block in here so this text block says menu this text block say its ribbon and then this text box lays status the below belowdecks block and this is the left side and this is the remaining part so this is the remaining part and this is the left side okay so you can note it down this Zemin and practice it yourself that concept will be more clear once you do it yourself okay so I hope the concept of dock panel is clear to you so let me comment this out once more so that I do not have anything in my window let's get to our slides once I collapse this so we can specify the area in which child control should be arranged doc minor defines that as property dock which we can set in the children of control so that values left right top and bottom and this is similar to drop functionality of window forms so this we have seen in our example now let's move to grid panel now grid panel is the most powerful concept that's been used in WPF that is if we need to arrange our controls using rows and columns we use grid panel also in big projects when you design in UI and if you are working with big projects if you design a UI you need to use grid panel so grid panel is most commonly used container inside WPF we can arrange our controls here according to rows and columns so let's quickly move to visual studio and see how we can design a UI using a grid container so I have a grid inside my window in here and let me have some controls inside this grid okay so but remember the controls would be placed inside a rows and columns so you need to design your grid accordingly so so before we design our UI let's let me show you what our you I will look after we have designed it so let me go to paint and this is my UI right so I have first name it Xbox a last name at Xbox address and then a big textbox and then I have a button so you can see this UI it looks perfect but how is it's arranged it's arranged with the help of a grid that's divided into rows and columns okay and do I need to have four rows one row second row third row and then 4th row in here so four rows and two columns this is the first column and this is the this is the second column so let's design our grid with four rows and two columns and you always define a rows and columns with grid dot row row definition so this row definition is a test property that's defined inside that grid and we need to cut this base it here okay and then need to have four rows so let me define a row definition so this row definition defines a row inside a grid and then again I need to have four rows so I have to find this row definition four times and I have kept the height of these row definition as Auto so the height could be adjusted accordingly and then I will define two columns for my grid okay and same concept it takes I need to define the column definitions okay then I will have column definition height okay we have in quantum so I do not have a height property in column definition okay so I have a column definition this defines my first column and then I will copy this and so here it goes I have two columns in here okay so what we have we have four rows and two columns inside our grid here are the four rows and two columns now after I have defined my rows and columns inside our grid we will start placing our controls in those rows and columns so I have some pre typed code with me so that this video doesn't become so long if I start typing them so I have some pre type controls in here so I have copied this content inside our grid so you can see my UI looks perfect in here so I have a label control which is placed in grid dot row is 0 so grits grits rows and columns are 0 index that is the first row will have a 0 index and column also the first column will have a 0 index so this grid dot row is placed at 0 this label grid dot column is placed at 0 and the content of that label is first name so very simple salmon code in here just the complex part for you for the bigness will be grid dot row is 0 and column dot row is column grid column is 0 so this is the first row and first column and same goes in here so this label is grid dot row is 1 so this is a 0th row and this is the first row so the row is 1 and column is still 0 so this last name is in the 0th column and first row and then the third one is in second row and 0th column and you can see here so this grid dot row the index is 2 and column is still 0 so this is the 0th column this is the first column this is the 0th row this is the first row this is the second rate okay then same goes with these X boxes so this text box is a first column this is the first column and zeroth row this row is 0 and same goes with other text boxes and same goes with this button so this is in the first column and third row that is fourth row the index of that row is third okay and and let me make the show grid lines property of this grid s true and you can see all the rows and columns in with the help of these grid lines okay so in the beginning you may find it a bit complex to understand this concept but once you grasp the concept it's very easy for you to design your UI according to rows and columns inside a grid so let's move back to our slides so using the grid we can arrange our controls with rows and columns for every column we can specify column definition for every row we can specify a row definition the grid also allows us to our sizing whereby the space for the rows and columns is calculated according to the available space and related to other rows and columns so let's see what we mean by this point by star sizing so let us run our UI first and see first name there is a textbox last name there's test box and then there is a address text box which is a very big text box right I can write a lot of things in this text box right how I am achieving this big text box did I specify anywhere the shape and size of this text box that there should be large No so what I am doing is at this row so this row I have specified as a the height of the I have specified as star so what if whatever be the remaining part of this application this row takes that size so first row is of size Auto second row is of size of auto right and the fourth row is also of size Auto or height or is auto but the third row the height is star so what is whatever be the remaining height of the row that's been taken by this row say suppose I change this rose hi to Quattro you can see now all the four rows or of all the first three rows are of same size and the remaining last row is taken the size so let me run this and you can see my address text box has become small so I need to specify the star to the third row and let's also make this as auto I don't need to hard-code that height and let now let's try to run you can see my UI works as expected so this at this row is this row is taking the remaining size of the UI and although all the other rows are of height:auto and this is done in here so all these rows are auto and this is start to take up the remaining height so this is specified in our slide so using the grid we can arrange your controls with the rows and columns for every column we can specify a column definition for every row we can specify a true definition the grid also allows start sizing whereby space for the rows and columns is calculated according to the available space and related to other rows and columns so you can practice all these things on your own and get a good grasp of this layout containers because these containers form a base of your UI designing in WPF so that's it guys for this video thank you so much for listening if you have any doubt please leave me a comment below and do subscribe to my channel thank you so very much

Channel: DotNetSkoool

Views: 40,759

Keywords: C# Training, DotNetSkoool, WPF Training, WPF Tutorial, WPF layouts, Layouts in WPF, Grid in WPF

Id: gvd3a0m4lAs

Length: 24min 15sec (1455 seconds)

Published: Sun Jun 12 2016