Grid layout in WPF

In WPF, the grid layout xmal with background changes, with the most common login interface as an example.

<grid width= "height=" >
The <!--defines two columns--
<Grid.ColumnDefinitions>
<columndefinition width= "Auto"/>
<columndefinition width= "100*"/>
</Grid.ColumnDefinitions>

<!--defines four lines--
<Grid.RowDefinitions>
<rowdefinition height= "/>"
<rowdefinition height= "/>"
<rowdefinition height= "/>"
<rowdefinition height= "/>"
</Grid.RowDefinitions>

<textblock grid.row= "0" grid.column= "0" textalignment= "right" text= "User name:" name= "UserName"/>
<!--first Row first column--

<textblock grid.row= "1" grid.column= "0" textalignment= "right" text= "Password:" name= "pass"/>
<textblock grid.row= "2" grid.column= "0" textalignment= "right" text= "Confirm Password:" name= "Repass"/>
<button grid.row= "3" grid.columnspan= "2" height= "" "Width=" content= "Confirm" click= "Button_Click" name= "btn"/>
<!--grid.columnspan= "2": Merging Cells--
<textbox name= "txtboxname" grid.row= "0" grid.column= "1" text= ""/>
<!--first row, second column--
<passwordbox name= "Pass1" grid.row= "1" grid.column= "1"/>
<!--Password Box--
<passwordbox name= "Pass2" grid.row= "2" grid.column= "1"/>
</Grid>

Effect:

Background changes:

Grid.setrow (UserName, 1);
Grid.setcolumn (UserName, 0);
Grid.setrow (pass, 0);
Grid.setcolumn (pass, 0);
Grid.setrow (Repass, 2);
Grid.setcolumn (repass, 0);
Grid.setrow (BTN, 3);
Grid.setcolumnspan (BTN, 2);

Grid layout in WPF