Intersoft ClientUI Documentation
Walkthrough: Create Uniform Layout using UXGridPanel
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Fundamentals > Panels Overview > Panel Walkthroughs > Walkthrough: Create Uniform Layout using UXGridPanel

Glossary Item Box

This walkthrough shows you how to create a panel with grid layout using UXGridPanel.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

You also need the following resource to complete this walkthrough:

The assembly is required for the images

Creating a new Intersoft ClientUI Application Project

The first step is to create an Intersoft Application project using the provided Intersoft ClientUI Application project template.

To create the Intersoft 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.
  3. Add a reference to the Intersoft.ClientUI.Samples.Assets assembly, the assembly is available from the provided ClientUI sample.

Creating the View

This section shows how to create a View used in the application interface using the  GridPage.xaml.

To create the GridPage view

  1. Add a new UXPage to the Views folder in your Silverlight project and name it GridPage.xaml.
    For more information on how to add a new item in Visual Studio, see Walkthrough: Add New Item such as Page, Dialog Box and Window in VS 2010
  2. Add a new UXGridPanel. Set the following properties:
    Property Value
    VerticalAlignment Center
    HorizontalAlignment Center
    Column 3
    Row 2
    ItemHeight 100
    ItemWidth 100
  3. Add six new GlassLabel under UXGridPanel in order to populate the six space in the grid (three column, two row). Set the following properties on each of the GlassLabel:
    Property Value
    TextImageRelation ImageAboveText
    ContentType ContentAndImage
    ImageHeight 72
    ImageWidth 72
    Content Call
      SMS
      Messenger
      Calendar
      Browser
      Mail
    ImageSource /Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/phone-icon.png
      /Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/sms-icon.png
      /Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/chat-blank-icon.png
      /Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/cal-icon.png
      /Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/browser-icon.png
      /Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/mail-icon.png

Conclusion

In this walkthrough, you have learned how to create ClientUI Application project using Intersoft ClientUI Application project template. You also learned how to create uniform layout using UXGridPanel.

Complete Code Listing

This section lists the complete code used in this walkthrough.

GridPage.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="ClientUIApplicationGridLayout.GridPage" 
        Title="GridPage Page"
        d:DesignWidth="640" d:DesignHeight="480">
        
        <Grid x:Name="LayoutRoot">
        <Intersoft:UXGridPanel HorizontalAlignment="Center" Name="uXGridPanel1" VerticalAlignment="Center" Column="3" Row="2" ItemHeight="100" ItemWidth="100">
            <Intersoft:GlassLabel Content="Call" Name="glassLabel1" TextImageRelation="ImageAboveText" ContentType="ContentAndImage" ImageSource="/Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/phone-icon.png" ImageHeight="72" ImageWidth="72" />
            <Intersoft:GlassLabel Content="SMS" Name="glassLabel2" TextImageRelation="ImageAboveText" ContentType="ContentAndImage" ImageSource="/Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/sms-icon.png" ImageHeight="72" ImageWidth="72"/>
            <Intersoft:GlassLabel Content="Messenger" Name="glassLabel3" TextImageRelation="ImageAboveText" ContentType="ContentAndImage" ImageSource="/Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/chat-blank-icon.png" ImageHeight="72" ImageWidth="72"/>
            <Intersoft:GlassLabel Content="Calendar" Name="glassLabel4" TextImageRelation="ImageAboveText" ContentType="ContentAndImage" ImageSource="/Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/cal-icon.png" ImageHeight="72" ImageWidth="72"/>
            <Intersoft:GlassLabel Content="Browser" Name="glassLabel5" TextImageRelation="ImageAboveText" ContentType="ContentAndImage" ImageSource="/Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/browser-icon.png" ImageHeight="72" ImageWidth="72"/>
            <Intersoft:GlassLabel Content="Mail" Name="glassLabel6" TextImageRelation="ImageAboveText" ContentType="ContentAndImage" ImageSource="/Intersoft.ClientUI.Samples.Assets;component/Images/iPhone/mail-icon.png" ImageHeight="72" ImageWidth="72"/>
        </Intersoft:UXGridPanel>
    </Grid>
</Intersoft:UXPage>

See Also

©2012. All Rights Reserved.