WPF DockPanel Using VB.NET

DockPanel is a layout container that allows the items to inside of it to dock to its sides.
  • 4218

Introduction

Dock Panel is a layout container that allows the items to inside of it to dock to its sides. LastChildFill ="false" is an attribute of DockPanel. This inform to dock panel that if we want the last child in the list of elements to fill out the rest of unused space in panel. Then we can see that the LastChildFill is set to false. It is similar to the StackPanel but both controls cannot give the same result. There is a difference between both, If we talking about the order of elements in DockPanel and StackPanel. In DockPanel, When you add or place child elements can affect the size of child element. In StackPanel, It doesn't affect in this. The DopckPanel is provides a path to dock the items on top, left, bottom, right or center of a Panel. The LastChildFill property will be set to true.The LastChildFill property of DockPanel always ills the remaining place. When we add or drag and drop a DockPanel in our page it will look like this. DockPanel namespace is system.windows.control and it exist in presentationframework.dll assembly.

Code 

<DockPanel Height="382" HorizontalAlignment="Left" Margin="10,10,0,0" Name="DockPanel1"VerticalAlignment="Top" Width="810" >
</
DockPanel>

Adding elements to DockPanel

When we add some elements to Dockpanel they appears in DockPanel like this. We have six textblock in our DockPanel and code of adding these textblocks in DockPanel. Simple DockPanel will show after adding some textblocks.

image1.gif
 

Background 

We can set the background by the use of background property by the code and can set at design time also using of background property. There is a code by which we can colored all textblocks.

<Windowx:Class="MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  
Title="MainWindow" Height="506" Width="1056">
<Grid>
<
DockPanel Height="382" HorizontalAlignment="Left" Margin="10,10,0,0" 
 Name
="DockPanel1" VerticalAlignment="Top" Width="810" >
<
Border Height="25"  BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
<TextBlock Foreground="Black" Width="807" Background="#FF85F2FF"> im on top Place</TextBlock>
</
Border>
<
Border Height="25"  BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Top">
<TextBlock Foreground="Black" Width="805" Background="#FFA3A3EB">im on top Place also</TextBlock>
</
Border>
<
Border Height="25"  BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Bottom">
<TextBlock Foreground="Black" Background="LawnGreen">Shit! This is Bottom Place</TextBlock>
</
Border>
<
Border Width="200"  BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Left">
<TextBlock Foreground="Black" Background="#FFE8946E">Left</TextBlock>
</
Border>
<
Border Width="410" Background="White" BorderBrush="Black" BorderThickness="1">
<
TextBlock Foreground="Black" Height="304" Width="411">
  remainning space
</TextBlock>
</
Border>
<
Border Width="200"  BorderBrush="Black" BorderThickness="1" DockPanel.Dock="Right">
<TextBlock Foreground="Black" Width="196" Height="306" Background="#FFE8946E">
 Right
</TextBlock>
</
Border>
</
DockPanel>
</
Grid>

output of above code will look like this in main window.  

image2.gif
 

DockPanel with multiple controls

We have added some textblocks and buttons also. Code in XAML will look like this. 

<Grid Width="1066">
<
Grid.RowDefinitions>
<
RowDefinition Height="235*" />
<
RowDefinition Height="212*" />
</
Grid.RowDefinitions>
<
DockPanel Height="425" HorizontalAlignment="Left" Margin="32,10,0,0" 
Name
="DockPanel1" VerticalAlignment="Top" Width="937" Grid.RowSpan="2">
<
DockPanel LastChildFill="True" Width="855">
<
TextBlock DockPanel.Dock="Left" VerticalAlignment="Center"
Background="Lavender"Foreground="DarkGoldenrod"FontFamily="Veranda"
FontSize="20" Width="164" Height
="429">left!</TextBlock>
<
TextBlock DockPanel.Dock="Right" VerticalAlignment="Center"
Background="LightBlue"Foreground="Bisque"
FontFamily="Veranda"FontSize="20"
TextAlignment="Center" Width="156" Height
="425">
right!</TextBlock>
<
TextBlock DockPanel.Dock="Top" ackground="LightCoral"
Foreground="Cornsilk"FontFamily="Veranda"FontSize="20"
TextAlignment="Center" Height="130" Width
="535">
Top</TextBlock>
<
TextBlock DockPanel.Dock="Bottom" 
Background="LightGoldenrodYellow"Foreground="OliveDrab"
FontFamily="Veranda"FontSize="20"
TextAlignment="Center" Height
="197">
Bottom </TextBlock>
<
Button Height="98" Width="176"  Background="LightSalmon" 
Content
="Remaining space"></Button
>
<
Button Content="click me" Height="96" Name="Button1" 
Width
="192" Background="#FF60B781" />
<
Button Content="here i am." Height="98" Name="Button2" 
Width
="167" Background="#FF7A7AB1" />
</
DockPanel>
</
DockPanel>
</
Grid>

 output for above code will look like this.

new.gif
 

Properties

There are some Important properties of DockPanel.

LastChildFill
Sets or Gets a value that indicates whether the last child element within a DockPanel stretches to fill the remaining available space.

Children
Gets a UIElementCollection of child items of this Panel.

Parent 
Gets the logical parent items of this element.

Uid
Sets or Gets the unique identifier.

Effect  
 Sets or gets the bitmap effect to apply to the UIElement.

Background
Sets or Gets a Brush that is used to fill the area between the borders of a Panel.

AllowDrop 
Gets or sets a value indicating whether this element can be used as the target of a drag-and-drop operation.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.