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

In this walkthrough, you perform the following tasks:

• Use DockPanel to create fluid, dockable container layout.
• Use UXItemsControl to represent a block of logical content.
• Use UXButton, UXTextBox, FieldLabel as a default controller.
• Use UXSeparator to make a rich UI.
• Use ImageLoader to represent an image container.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI 2010

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.
    
    

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

See Also