The big changes between Windows Forms and WPF is dynamic arrangement of controls.

In the windows forms, a control attaches to the wall of a window.

For examples, If you widen a window which has a button attached into theleft and bottom wall of the window, then you will see the button doesn't move or widen, only window width is widen.

If you donn't want to widen the window, but also the button, how could you make it possilble? In the windows forms, it is complex.

But in the WPF, you can set the arrangement of the controls flexibly. If you want to set the width of the button with respect to the size of the window, it is possible using properties of containers provided by WPF.



To do this, firstly you divide main grid of the window. In the first time you have created a WPF project, you can see the following codes in Window1.xaml.

To divide the grid into three parts horizontally, add the following codes into the middle of it.

Now, Let's try add the button middle into middle of the window. Meaning of the asterisk in the codes is explained later. Let's add the follow the codes.


Then you can see the change of the window like this.



It is important to know the meaning of Grid.Column = "1" in the newly attached line. It means the button is placed in the second column of the grid. Grid holds whole space of the window, so the button is placed in the middle of the window.

If you want to move the button into the first column of the window, just changes the codes into Grid.Column = "0".

From now, whenever you widen or shorten width of the window, the button is one-third sized with respect to the window.


If you want to divide the window vertically, it is easy. Because you know the usage of the grid.
Let's modify the codes like this.


It is very similar with the case of dividing the window horizontally. We just add RowDefinition three times and Grid.Row = "1" which means this button is placed in the second row.



Now maybe you want to shorten its first column. For this, you just modify asterisks in the columndefinition like this.


This change means the ratio of the width between columns is 1:3:3. So first column is shortened.



Until now, we have studied about Grid, which is most powerful container of WPF. Any complicated layout can be expressed by grid. So it is worthy to learn deeply. Buy~