Object Model
Syntax
| Visual Basic (Declaration) | |
|---|---|
Public Class DockPanel Inherits Intersoft.Client.Framework.ISPanel Implements IFramework, ILicensing | |
| Visual Basic (Usage) |  Copy Code |
|---|---|
Dim instance As DockPanel | |
| C# | |
|---|---|
public class DockPanel : Intersoft.Client.Framework.ISPanel, IFramework, ILicensing | |
| Delphi | |
|---|---|
public class DockPanel = class(Intersoft.Client.Framework.ISPanel, IFramework, ILicensing) | |
| JScript | |
|---|---|
public class DockPanel extends Intersoft.Client.Framework.ISPanel implements IFramework, ILicensing | |
| Managed Extensions for C++ | |
|---|---|
public __gc class DockPanel : public Intersoft.Client.Framework.ISPanel, IFramework, ILicensing | |
| C++/CLI | |
|---|---|
public ref class DockPanel : public Intersoft.Client.Framework.ISPanel, IFramework, ILicensing | |
Example
The following example demonstrates how to partition space using a DockPanel.
| XAML |  Copy Code |
|---|---|
<Grid x:Name="LayoutRoot"> <Intersoft:DockPanel Name="dockPanel1" FillChildMode="Custom"> <Border BorderBrush="Silver" BorderThickness="1" Height="50" Name="border1" Intersoft:DockPanel.Dock="Top"> <TextBlock Height="23" Name="textBlock1" Text="Sarah Brightman : Live in Vienna" FontSize="16" HorizontalAlignment="Center" /> </Border> <Border BorderBrush="Silver" BorderThickness="1" Height="50" Name="border2" Intersoft:DockPanel.Dock="Bottom"> <Intersoft:UXItemsControl Name="uXItemsControl1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <Intersoft:FieldLabel Header="Artist" Name="fieldLabel1"> <Intersoft:UXTextBox HorizontalAlignment="Left" Name="uXTextBox1" Text="Sarah Brightman" VerticalAlignment="Top" /> </Intersoft:FieldLabel> <Intersoft:UXSeparator Name="uXSeparator1" Orientation="Vertical" Width="3" Height="12" /> <Intersoft:FieldLabel Header="Year" Name="fieldLabel2"> <Intersoft:UXTextBox HorizontalAlignment="Left" Name="uXTextBox2" Text="2009" VerticalAlignment="Top" /> </Intersoft:FieldLabel> <Intersoft:UXSeparator Name="uXSeparator2" Width="3" Height="12" Orientation="Vertical" /> <Intersoft:FieldLabel Header="Genre" Name="fieldLabel3"> <Intersoft:UXTextBox HorizontalAlignment="Left" Name="uXTextBox3" Text="Vocal" VerticalAlignment="Top" /> </Intersoft:FieldLabel> </Intersoft:UXItemsControl> </Border> <Border BorderBrush="Silver" BorderThickness="1" Name="border3" Width="50" Intersoft:DockPanel.Dock="Left"> <Intersoft:UXButton Name="uXButton1" Width="24" Height="24" CornerRadius="12" Content="<" FontWeight="Bold" /> </Border> <Border BorderBrush="Silver" BorderThickness="1" Name="border4" Width="50" Intersoft:DockPanel.Dock="Right"> <Intersoft:UXButton Content=">" CornerRadius="12" FontWeight="Bold" Height="24" Name="uXButton2" Width="24" /> </Border> <Border BorderBrush="Silver" BorderThickness="1" Name="border5" Intersoft:DockPanel.IsFillElement="True"> <Intersoft:ImageLoader Name="imageLoader1" ImageSource="/DockPanel;component/Assets/Images/1.jpg" /> </Border> </Intersoft:DockPanel> </Grid> |
|
To learn more how to create this example step by step using layout adorner, see Walkthrough: Create Fluid UI Layout using DockPanel.
Remarks
The Intersoft DockPanel element uses DockPanel.Dock attached property as set in child content elements to position content along the edges of a container.
When DockPanel.Dock is set to Top or Bottom, it positions child elements above or below each other. When DockPanel.Dock is set to Left or Right it positions child elements to the left or right of each other.
Specifying Fill Element
The main difference between Intersoft DockPanel and standard dock panel is that Intersoft DockPanel provides FillChildMode property instead of LastChildFill property. With this approach you do not need to put the element you want to set as fill element as the last child, simply set DockPanel.IsFillElement attached property.
| XAML | Copy Code |
|---|---|
<Grid x:Name="LayoutRoot"> <Intersoft:DockPanel HorizontalAlignment="Center" Height="300" VerticalAlignment="Center" Width="400" FillChildMode="Custom"> <Grid Intersoft:DockPanel.Dock="Top" Height="50" Background="Black"/> <Grid Intersoft:DockPanel.IsFillElement="True" Background="White" /> <Grid Intersoft:DockPanel.Dock="Bottom" Height="50" Background="Black"/> </Intersoft:DockPanel> </Grid> |
|
Sizing to Content
If its Height and Width properties are not specified, DockPanel sizes to its content. The size can increase or decrease to accommodate the size of its child elements. However, when these properties are specified and there is no longer room for the next specified child element, DockPanel does not display that child element or subsequent child and does not measure subsequent child elements.
Using Layout Adorner
To make layouting task easier, ClientUI features an adorner designer feature in certain layout controls such as in DockPanel. An adorner is an advanced designer feature in both Expression Blend and Visual Studio 2010 in which visual cues are displayed to allow users easily interact with the user interface elements.
The is an ideal example that shows the adorner designer feature. As DockPanel allows its children to be docked in one of the four sides of the layout boundary, the DockPanel adorner provides a helpful visual cue that indicates the Dock position of the currently selected children. Additionally, you can also click on the visual cue to change the Dock position which makes it easy and intuitive to work with layouting task in the Expression Blend designer.
To learn more about these design time features, see Development Environment Overview.
Inheritance Hierarchy
Intersoft.Client.Framework.ISPanel
Intersoft.Client.UI.Controls.DockPanel
Intersoft.Client.UI.Aqua.UXAutoFitDockPanel
Requirements
Target Platforms: Windows 98, Windows NT 4.0, Windows Millennium Edition, Windows 2000, Windows XP Home Edition, Windows XP Professional, Windows Server 2003 family, Windows Vista, Windows Server 2008 family