Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

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
Panel

On this page:

Table of Contents
maxLevel2
stylecircle

Modern note

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.

    Modern note

    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:

    PropertyValue
    VerticalAlignmentCenter
    HorizontalAlignmentCenter
    Column3
    Row2
    ItemHeight100
    ItemWidth100
  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:

    PropertyValue
    TextImageRelationImageAboveText
    ContentTypeContentAndImage
    ImageHeight72
    ImageWidth72
    ContentCall
     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

Code Block
titleXAML
languagexml
<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>

 

Related Topics

Content by Label
spaces@self
reversetrue
showLabelsfalse
max5
sortmodified
labelskb-how-to-article -create-uniform-layout-using-uxgridpanel
showSpacefalse
typepage