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

In this walkthrough, you perform the following tasks:

• Create a new ClientUI Application project using Intersoft ClientUI Application project template.
• Create a uniform grid layout.

Prerequisites

You need the following components to complete this walkthrough:

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

You also need the following resource to complete this walkthrough:

• Intersoft.ClientUI.Samples.Assets assembly
  Available in: [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.Assets\Bin\Debug

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

<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>