Intersoft ClientUI Documentation
Walkthrough: Create Fluid UI Layout using DockPanel
Intersoft ClientUI 8 > ClientUI Fundamentals > Panels Overview > Panel Walkthroughs > Walkthrough: Create Fluid UI Layout using DockPanel

This walkthrough shows you to create fluid UI layout using DockPanel.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

Creating a new ClientUI Application Project

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template in Visual Studio.

To create the ClientUI Application project

  1. Start Visual Studio 2010.
  2. Create a new ClientUI Application project using Intersoft ClientUI Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI Application Template.

Creating Fluid UI Layout using DockPanel

This section show how to use dock panel to create fluid ui layout.

To create the View pattern

  1. Open MainPage.xaml
  2. Add a DockPanel as a layout. Set the Width and Height properties to Auto.
    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot">
    <Intersoft:DockPanel Name="dockPanel1" FillChildMode="Custom" />
</Grid>
     
  3. Add a Border as container of each component.
    Set the following properties of the first Border as down below.
    Properties Value
    DockPanel.Dock Top
    Width Auto
    Height 50

    Set the following properties of the second Border as down below.
    Properties Value
    DockPanel.Dock Bottom
    Width Auto
    Height 50

    Set the following properties of the third Border as down below.
    Properties Value
    DockPanel.Dock: Left
    Width: 50
    Height: Auto

    Set the following properties of the fourth Border as down below.
    Properties Value
    DockPanel.Dock Right
    Width 50
    Height Auto

    Set the DockPanel.IsFillElement property of the fifth Border to True.
    XAML
    Copy Code 
    <Intersoft:DockPanel Name="dockPanel1" FillChildMode="Custom">
    <Border BorderBrush="Silver" BorderThickness="1" Height="50" Name="border1" Intersoft:DockPanel.Dock="Top" />
    <Border BorderBrush="Silver" BorderThickness="1" Height="50" Name="border2" Intersoft:DockPanel.Dock="Bottom" />
    <Border BorderBrush="Silver" BorderThickness="1" Name="border3" Width="50" Intersoft:DockPanel.Dock="Left" />
    <Border BorderBrush="Silver" BorderThickness="1" Name="border4" Width="50" Intersoft:DockPanel.Dock="Right" />
    <Border BorderBrush="Silver" BorderThickness="1" Name="border5" Intersoft:DockPanel.IsFillElement="True" />
</Intersoft:DockPanel>

  4. Add a TextBlock inside the first Border. Set the following properties of TextBlock as down below.
    Properties Value
    HorizantalAlignment: Center
    FontSize: 16
    Text: Sarah Brightman : Live in Vienna

    XAML
    Copy Code 
    <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>

  5. Add an UXButton inside the third Border. Set the following properties of UXButton as below.
    Properties Value
    CornerRadius 12
    Width 24
    Height 24
    Content <
    FontWeight Bold

    XAML
    Copy Code 
    <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>
     
  6. Repeat step number 6 to perform the same button with Content property set to < inside the fourth Border.
    XAML
    Copy Code 
    <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>

  7. Add a UXItemsControl to handle more than one component inside a Border.
    Properties Value
    Orientation Horizontal
    HorizontalAlignment Center
    VerticalAlignment Center
  8. Add FieldLabel and UXSeparator inside the UXItemsControl based on the steps below.
    Set the Header property of the first FieldLabel to Artist.
    Set the Text property of the first UXTextBox to Sarah Brightman.
    XAML
    Copy Code 
    <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:UXItemsControl>

    Set the second UXSeparator Width property to 3 and Height property to 12.
    XAML
    Copy Code 
    <Intersoft:UXItemsControl Name="uXItemsControl1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    ...
    <Intersoft:UXSeparator Name="uXSeparator1" Orientation="Vertical" Width="3" Height="12" />
</Intersoft:UXItemsControl>\

    Set the Header property of the second FieldLabel to Year.
    Set the Text property of the second UXTextBox to 2009.
    XAML
    Copy Code 
    <Intersoft:UXItemsControl Name="uXItemsControl1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    ...
    <Intersoft:FieldLabel Header="Year" Name="fieldLabel2">
        <Intersoft:UXTextBox HorizontalAlignment="Left" Name="uXTextBox2" Text="2009" VerticalAlignment="Top" />
    </Intersoft:FieldLabel>
</Intersoft:UXItemsControl>\

    Set the second UXSeparator Width property to 3 and Height property to 12.
    XAML
    Copy Code 
    <Intersoft:UXItemsControl Name="uXItemsControl1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    ...
    <Intersoft:UXSeparator Name="uXSeparator2" Width="3" Height="12" Orientation="Vertical" />
</Intersoft:UXItemsControl>

    Set the Header property of the third FieldLabel to Genre.
    Set the Text property of the third UXTextBox to Vocal.
    XAML
    Copy Code 
    <Intersoft:UXItemsControl Name="uXItemsControl1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    ...
    <Intersoft:FieldLabel Header="Genre" Name="fieldLabel3">
        <Intersoft:UXTextBox HorizontalAlignment="Left" Name="uXTextBox3" Text="Vocal" VerticalAlignment="Top" />
    </Intersoft:FieldLabel>
</Intersoft:UXItemsControl>

    This would the the final code inside the UXItemsControl.
    XAML
    Copy Code 
    <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>


  9. Add an ImageLoader inside the fifth Border. Reset all layout, set the ImageSource property to the file you just put inside the project, in my case im using 1.jpg and the Stretch property to Uniform.
    XAML
    Copy Code 
    <Border BorderBrush="Silver" BorderThickness="1" Name="border5" Intersoft:DockPanel.IsFillElement="True">
    <Intersoft:ImageLoader Name="imageLoader1" ImageSource="/DockPanel;component/Assets/Images/1.jpg" />
</Border>


  10. Run the project, it will shown a final result like the image down below.
    Final

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

XAML
Copy Code 
<Intersoft:UXPage 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:Intersoft="http://intersoft.clientui.com/schemas"
    x:Class="DockPanel.MainPage" 
    Title="MainPage Page"
    d:DesignWidth="640" d:DesignHeight="480">
    
    <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>
</Intersoft:UXPage>
See Also
DockPanel Class

Concepts

Panels Overview

Other Resources

Locating the Samples in Local Installation
Interactive Panels How-to Topics
Walkthroughs and How-to Topics