Dock Panel and Grid Panel in WPF

Dock Panel and Grid Panel in WPF..................................

Dock Panel – It is a layout panel. You can place elements to Top, Bottom, Left and Right edge of the container by setting DockPanel.Dock attached property on element.  You can also fill element in remaining space by setting LastChildFiled property to True of Dock Panel.

Example with Dock Panel:

<Window x:Class="WpfApplicationPanels.DockPanelWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Dock Panel in Window" Height="400" Width="500">

<DockPanel >

<TextBlock  Text="Dock=Top" Padding="10,10,10,10" Margin="2,2,2,2" DockPanel.Dock="Top" Background="Yellow" FontSize="20" Foreground="Black" TextAlignment="Center" ></TextBlock>

<TextBlock  Text="Dock=Bottom" Padding="10,10,10,10" Margin="2,2,2,2" DockPanel.Dock="Bottom" Background="Gray" FontSize="20" Foreground="Aqua" TextAlignment="Center" ></TextBlock>

<TextBlock  Text="Dock=Left" Padding="10,100,10,78" Margin="2,2,2,2" DockPanel.Dock="Left" Background="Green" FontSize="20" Foreground="Aqua" TextAlignment="Center" ></TextBlock>

<TextBlock  Text="Dock=Right" Padding="10,100,10,78" Margin="2,2,2,2" DockPanel.Dock="Right" Background="Red" FontSize="20" Foreground="Aqua" TextAlignment="Center" ></TextBlock>

<TextBlock  Text="Dock=LastChildField=True"  Margin="2,2,2,2" Padding="10,100" Background="Goldenrod" FontSize="18" Foreground="Aqua" TextAlignment="Center" ></TextBlock>

</DockPanel>

</Window>

Result:

Grid Panel This is the most powerful layout control in WPF .Places elements in row and column format similar to table. You can create grid rows and columns by filling Grid.ColumnDefinitions and Grid.RowDefinitions. You can use Grid.Row and Grid.Column attached properties to place elements inside cells. You can also use Grid.RowSpan and Grid.Column Span attached properties to span columns and rows. You can set ShowGridLines property to True to display gridlines in Grid.

Define Rows and Columns

The grid has one row and column by default. To create additional rows and columns, you have to add Row Definition items to the Row Definitions collection and Column Definition items to the Column Definitions collection. The following example shows a grid with three rows and two columns.

The size can be specified as an absolute amount of logical units, as a percentage value or automatically.

Fixed	Fixed size of logical units (1/96 inch)
Auto	Takes as much space as needed by the contained control
Star (*)	Takes as much space as available (after filling all auto and fixed sized columns),  proportionally divided over all star-sized columns. So 3*/5* means  the same as 30*/50*. Remember that star-sizing does not work  if the grid size is calculated based on its content.

Example with Grid Panel:

<Window x:Class="WpfApplicationPanels.GridPanel"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="GridPanel" Height="500" Width="500">

<Grid Width="400" Height="400" Background="PaleGoldenrod">

<!--No of Rows in Grid Panel-->

<Grid.RowDefinitions>

<RowDefinition Height="35"></RowDefinition>

<RowDefinition Height="35"></RowDefinition>

<RowDefinition Height="35"></RowDefinition>

<RowDefinition Height="35"></RowDefinition>

<RowDefinition Height="35"></RowDefinition>

<RowDefinition Height="35"></RowDefinition>

<RowDefinition Height="*"></RowDefinition>

<RowDefinition Height="35"></RowDefinition>

</Grid.RowDefinitions>

<!--No of columns in Grid Panel-->

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"></ColumnDefinition>

<ColumnDefinition Width="*"></ColumnDefinition>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Grid Panel in W P F" TextAlignment="Center" FontSize="20"  Foreground="Red"  Padding="3,0,25,35"></TextBlock>

<Label Grid.Row="1" Grid.Column="0" Content="Name" Padding="30,10,10,3"></Label>

<Label Grid.Row="2" Grid.Column="0" Content="Gender" Padding="30,10,10,3"></Label>

<Label Grid.Row="3" Grid.Column="0" Content="EmailId" Padding="30,10,10,3"></Label>

<Label Grid.Row="4" Grid.Column="0" Content="Password" Padding="30,10,10,3"></Label>

<Label Grid.Row="5" Grid.Column="0" Content="Course" Padding="30,10,10,3"></Label>

<Label Grid.Row="6" Grid.Column="0" Content="Comment" Padding="30,10,10,3"  ></Label>

<Label Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2"  Padding="30,10,10,3"></Label>

<!--Margin left-top,right,bottom-->

<TextBox Grid.Row="1" Grid.Column="1" Margin="10,4,10,4" Padding="2,2,2,2" Name="UserName"></TextBox>

<!-- Radio Button-->

<RadioButton Grid.Row="2" Grid.Column="1" GroupName="Gender" Content="Male" Margin="15,7,50,7" IsChecked="True"></RadioButton>

<RadioButton Grid.Row="2" Grid.Column="1" GroupName="Gender" Content="Female" Margin="70,7,10,7"></RadioButton>

<TextBox Grid.Row="3" Grid.Column="1" Margin="10,4,10,4" Padding="2,2,2,2" Name="txtemailid"></TextBox>

<!--Password Field-->

<PasswordBox Grid.Row="4" Grid.Column="1" Margin="10,4,10,4" Padding="2,2,2,2" MaxLength="25"  Name="txtpassword" PasswordChar="*"></PasswordBox>

<!--ComboBox-->

<ComboBox Grid.Row="5" Grid.Column="1"   Margin="10,4,10,4" Padding="35,4,4,2" TextOptions.TextFormattingMode="Display" SelectedIndex="0" >

<ComboBoxItem   Content="--Select--"></ComboBoxItem>

<ComboBoxItem   Content="High School"></ComboBoxItem>

<ComboBoxItem   Content="Intermidiate"></ComboBoxItem>

<ComboBoxItem  Content="Graduation"></ComboBoxItem>

<ComboBoxItem  Content="Post Graduation"></ComboBoxItem>

</ComboBox>

<TextBox Grid.Row="6" Grid.Column="1" Margin="10,4,10,4" Padding="2,2,2,2" ></TextBox>

<Button Grid.Row="7" Grid.Column="1" Margin="10,4,10,4" Padding="2,2,2,2" Content="Save" Foreground="Black"></Button>

</Grid>

</Window>

Result: