Thursday, 3 October 2013
Grid
Grid has the ability to have rows and columns.Grid acts just like a table in html.
You can use grid inside grid it has to be avoided as it is effecting the performance of rendering.
In this cells can span multiple rows/columns.
Rows and columns can be sized.
* - variable sizing ie., it occupies the remaining size of the screen. This is the default size for rows and columns,
Fixed - we can also mention fixed points sizing for rows and columns.
auto - this gives the size of content inside the column or row. For example width of the column is equal to the width of the content present inside it.
We can also use other containers like WrapGrid, variableSizedWrapGrid,
WrapGrid is used to have some items with uniform sizes inside it.
Windows 8 or 8.1 start screen is created using VariableSizedWrapGrid in which app tiles of different sizes are arranged in the form of a grid.
Lets go step by step by adding code for the already existing default grid
Default XAML code
<Window x:Class="WpfAppLayouts.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
</Grid>
</Window>
Explanation
Grid tag is present in inside window but it contains no rows and columns.
Now i want to add 3 rows and 3 columns for the grid.
In below xaml code
XAML code with Grid(3 rows, 3 columns)
<Window x:Class="WpfAppLayouts.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</Window>
Explanation
In the above grid with background color black 3 rows and 3 columns are created.
Row definitions with height has to be created in Grid.RowDefinitions tag and
Row definitions with height has to be created in Grid.RowDefinitions tag and
Column definitions with width has to be created in Grid.ColumnDefinitions tag.
Height = "auto" - height will be automatically assigned based on the content.
For example if a textbox with height=100 is added in row1 then row height will be 100.
Height ="100" - height of row2 is fixed to 100 pixels.
Height ="*" - height of row3 will be remaining height. Row3 height will be the remaining space left by other rows. So, * means remaining.
XAML code with a grid(3 rows,3 columns) containing controls inside it
Height = "auto" - height will be automatically assigned based on the content.
For example if a textbox with height=100 is added in row1 then row height will be 100.
Height ="100" - height of row2 is fixed to 100 pixels.
Height ="*" - height of row3 will be remaining height. Row3 height will be the remaining space left by other rows. So, * means remaining.
XAML code with a grid(3 rows,3 columns) containing controls inside it
<Window x:Class="WpfAppLayouts.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button x:Name="Button1" Grid.Row="0" Grid.Column="0" Height="100" Content="Click Me" />
<Label x:Name="Label1" Grid.Row="0" Grid.Column="1" Content="Read only text" Foreground="Red" />
<TextBlock x:Name="TextBlock1" Grid.Row="0" Grid.Column="2" Text="Read Only Text" Background="#FF11BF00" />
<!-- Shapes-->
<Rectangle Grid.Row="1" Grid.Column="0" Fill="Aqua" />
<Ellipse Grid.Row="1" Grid.Column="1" Fill="Aqua"/>
<Polygon Grid.Row="1" Grid.Column="2" Fill="Yellow" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
<!-- Text Controls-->
<TextBox Grid.Row="2" Grid.Column="0" />
<PasswordBox Grid.Row="2" Grid.Column="1" />
<RichTextBox Grid.Row="2" Grid.Column="2" />
</Grid>
</Window>
Explanation
Controls in WPF doesnt have name property by default if you drag and drop controls.
To access control properties in code we need name. So, as soon as control is created you have to add name property for control.
To access control properties in code we need name. So, as soon as control is created you have to add name property for control.
<Button x:Name="Button1" Grid.Row="0" Grid.Column="0" Height="100" Content="Click Me" />
Button control with name Button1 is placed in the first row first column in the grid. The text on it is assigned using Content property.
<Label x:Name="Label1" Grid.Row="0" Grid.Column="1" Content="Read only text" Foreground="Red" />
<TextBlock x:Name="TextBlock1" Grid.Row="0" Grid.Column="2" Text="Read Only Text" Background="#FF11BF00" />
Label and Textblock are used to place read only text on the window.
You can also used hexa decimal codes as colors as shown in the above textblock tag.
To change color in properties - brush (means colors in XAML)
You can also used hexa decimal codes as colors as shown in the above textblock tag.
To change color in properties - brush (means colors in XAML)
Shapes are created with different filled colors to display them in 2nd row of grid with the below code.
<Rectangle Grid.Row="1" Grid.Column="0" Fill="Aqua" />
<Ellipse Grid.Row="1" Grid.Column="1" Fill="Aqua"/>
<Polygon Grid.Row="1" Grid.Column="2" Fill="Yellow" Width="300" Height="400" Points="0,0 275,0 275,200"></Polygon>
Textbox to accept text, Passwordbox to accept password and rich textbox is used to accept text with styles.
To check the difference between textbox and richtextbox, copy some color code from visual studio code page and paste them in the output window textbox and richtextbox.
Uniform grid
Uniform grid will automatically adjus the size of grid cells<Window x:Class="WpfAppLayouts.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<UniformGrid>
<Label Background="Green">Green</Label>
<Label Background="LightGreen">LightGreen</Label>
<Label Background="Red">Red</Label>
<Label Background="LightBlue">Blue</Label>
<Label Background="Orange">Orange</Label>
<Label Background="Aqua" >Aqua</Label>
<Label Background="Chocolate">Chocolate</Label>
<Label Background="BlanchedAlmond">BlanchedAlmond</Label>
<Label Background="Gold">Gold</Label>
</UniformGrid>
</Window>
Output
