Intersoft ClientUI Documentation
Walkthrough: Add New Item such as Page, Dialog Box and Window in VS 2010
Intersoft ClientUI 8 > ClientUI Application Development > Working with ClientUI Controls in Visual Studio 2010 Designer > Walkthrough: Add New Item such as Page, Dialog Box and Window in VS 2010

This walkthrough guides you through the steps of creating a new Silverlight project, and add new project items such as UXPage, UXDialogBox, and UXWindow to your Visual Studio project.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

Creating a new ClientUI Application

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template in Visual Studio.

To create a new ClientUI Application project

  1. Start Visual Studio 2010.
  2. Create a new ClientUI Application project using Intersoft ClientUI Application project template and set the name of the Project to AddNewItem.Create ClientUI Application project

Adding UXPage as New Item

This section shows how to add a new UXPage to your ClientUI application project. You add a new UXPage to contain a portion of your Silverlight application that can be reached by navigation within a Navigator control such as UXFrame or UXNavigationWindow.

To add a new UXPage

  1. In the Project explorer window, right-click and select AddNewItem from the context menu.
    Add New Item
  2. After the Add New Item dialog box appeared, select the Intersoft UXPage and set the Name to UXPageNewItem. Press Add button to confirm.Add UXPage as New Item
  3. The new UXPage will be opened. Switch the view to XAML view and you should see the following code on the newly added UXPageNewItem.xaml file.
    Sample Code
    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="AddPageDialogBoxWindow.UXPageNewItem" 
    Title="UXPageNewItem Page"
    d:DesignWidth="640" d:DesignHeight="480">
        
    <Grid x:Name="LayoutRoot">
        </Grid>
</Intersoft:UXPage>
    Add UXPage as New Item
  4. Save the changes.

Adding UXDialogBox as New Item

This section shows how to add a new UXDialogBox to your ClientUI Application project. You add a new UXDialogBox to contain a portion of your Silverlight application to obtain user input in either modal or modeless dialog style.

To add a new UXDialogBox

  1. In the Project explorer window, right-click and select Add then choose New Item from the context menu.Add New Item
  2. After the Add New Item dialog box appears, select the Intersoft UXDialogBox and set the Name to UXDialogBoxNewItem. Press Add button to confirm.Add UXDialogBox as New Item
  3. The new UXDialogBox will be opened. Switch the view to XAML view and you should see the following code on the newly added UXDialogBoxNewItem.xaml file.
    Sample Code
    Copy Code 
    <Intersoft:UXDialogBox 
    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="AddPageDialogBoxWindow.UXDialogBoxNewItem" 
    Header="UXDialogBoxNewItem" ContentMargin="0"
    d:DesignWidth="640" d:DesignHeight="480">
        

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="44"/>
        </Grid.RowDefinitions>
        <Grid>
            <TextBlock Text="Put your content here." HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
        <Intersoft:UXCommandBar Height="44" VerticalAlignment="Bottom" Grid.Row="1">
            <Intersoft:UXButton Content="OK" Width="80" IsDefault="True" DialogResult="OK"/>
            <Intersoft:UXButton Content="Cancel" Width="80" IsCancel="True"/>
        </Intersoft:UXCommandBar>
    </Grid>

</Intersoft:UXDialogBox>
    Add UXPage as New Item
  4. Save the changes.

Adding UXWindow as New Item

This section shows how to add a new UXWindow to your Silverlight project. You add a new UXWindow to contain a portion of your Silverlight application that can be integrated to UXDesktop or independently displayed.

To add UXWindow

  1. In the Project explorer window, right-click and select Add then choose New Item from the context menu.Add New Item
  2. After the Add New Item dialog box appeared, select the Intersoft UXWindow and set the Name to UXWindowNewItem. Press Add button to confirm.Add UXDialogBox as New Item
  3. The new UXWindow will be opened. Switch the view to XAML view and you should get the following code on the newly added UXWindowNewItem.xaml file.
    Sample Code
    Copy Code 
    <Intersoft:UXWindow 
    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="AddPageDialogBoxWindow.UXDialogBoxNewItem" 
    Header="UXDialogBoxNewItem" ContentMargin="0"
    d:DesignWidth="640" d:DesignHeight="480">
        

    <Grid x:Name="LayoutRoot" />
</Intersoft:UXWindow>
    Add UXPage as New Item
  4. Save the changes.

In this walkthrough, you have learned how to add new items such as UXPage, UXDialogBox, and UXWindow to a Silverlight project.

Complete Code Listing

UXPageNewItem.xaml

Sample Code
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="AddPageDialogBoxWindow.UXPageNewItem" 
    Title="UXPageNewItem Page"
    d:DesignWidth="640" d:DesignHeight="480">
        
    <Grid x:Name="LayoutRoot">
        </Grid>
</Intersoft:UXPage>

UXDialogBoxNewItem.xaml

Sample Code
Copy Code 
<Intersoft:UXDialogBox 
    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="AddPageDialogBoxWindow.UXDialogBoxNewItem" 
    Header="UXDialogBoxNewItem" ContentMargin="0"
    d:DesignWidth="640" d:DesignHeight="480">
        

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="44"/>
        </Grid.RowDefinitions>
        <Grid>
            <TextBlock Text="Put your content here." HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
        <Intersoft:UXCommandBar Height="44" VerticalAlignment="Bottom" Grid.Row="1">
            <Intersoft:UXButton Content="OK" Width="80" IsDefault="True" DialogResult="OK"/>
            <Intersoft:UXButton Content="Cancel" Width="80" IsCancel="True"/>
        </Intersoft:UXCommandBar>
    </Grid>

</Intersoft:UXDialogBox>

UXWindowNewItem.xaml

Sample Code
Copy Code 
<Intersoft:UXWindow 
    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="AddPageDialogBoxWindow.UXDialogBoxNewItem" 
    Header="UXDialogBoxNewItem" ContentMargin="0"
    d:DesignWidth="640" d:DesignHeight="480">
        

    <Grid x:Name="LayoutRoot" />
</Intersoft:UXWindow>
See Also
UXPage Class
UXDialogBox Class
UXWindow Class

Concepts

Working with ClientUI Controls in Visual Studio 2010 Designer

Other Resources

Locating the Samples in Local Installation
Walkthroughs and How-to Topics