Skip to end of metadata
Go to start of metadata

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

Prerequisites

You need the following components to complete this walkthrough:

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

On this page:

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
  3. Add a Border as container of each component.
    Set the following properties of the first Border as down below.

    PropertiesValue
    DockPanel.DockTop
    WidthAuto
    Height50


    Set the following properties of the second Border as down below.

    PropertiesValue
    DockPanel.DockBottom
    WidthAuto
    Height50


    Set the following properties of the third Border as down below.

    PropertiesValue
    DockPanel.Dock:Left
    Width:50
    Height:Auto


    Set the following properties of the fourth Border as down below.

    PropertiesValue
    DockPanel.DockRight
    Width50
    HeightAuto


    Set the DockPanel.IsFillElement property of the fifth Border to True

    XAML

  4. Add a TextBlock inside the first Border. Set the following properties of TextBlock as down below.

    PropertiesValue
    HorizantalAlignment:Center
    FontSize:16
    Text:Sarah Brightman : Live in Vienna
    XAML
  5. Add an UXButton inside the third Border. Set the following properties of UXButton as below.

    PropertiesValue
    CornerRadius12
    Width24
    Height24
    Content<
    FontWeightBold
    XAML
  6. Repeat step number 6 to perform the same button with Content property set to < inside the fourth Border.

    XAML

  7. Add a UXItemsControl to handle more than one component inside a Border.

    PropertiesValue
    OrientationHorizontal
    HorizontalAlignmentCenter
    VerticalAlignmentCenter
  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


    Set the second UXSeparator Width property to 3 and Height property to 12

    XAML


    Set the Header property of the second FieldLabel to Year.
    Set the Text property of the second UXTextBox to 2009

    XAML


    Set the second UXSeparator Width property to 3 and Height property to 12.

    XAML


    Set the Header property of the third FieldLabel to Genre.
    Set the Text property of the third UXTextBox to Vocal.

    XAML


    This would the the final code inside the UXItemsControl.

    XAML

  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

  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

XAML