Intersoft ClientUI Documentation
Walkthrough: Add New Item such as Page, Dialog Box and Window
Intersoft ClientUI 8 > ClientUI Fundamentals > Window and Dialog Boxes Overview > Window and Dialog Boxes Walkthroughs > Walkthrough: Add New Item such as Page, Dialog Box and Window

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 Expression Blend project.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

Creating a new Silverlight Application + Website Project

The first step is to create a new Silverlight Application + Website project using Silverlight Application + Website project template in Expression Blend 4.

To create a new Silverlight application + Website project

  1. Start Expression Blend 4
  2. On the menu bar of Expression Blend 4, point the mouse to File and select New Project.
    Create New Project
  3. After the New Project dialog box appears, select the Silverlight Application + Website project template and set the name of the project to AddNewItem.
    Create New Silverlight Application + Website Project

Next, you will add UXPage as new item in the AddNewItem Silverlight 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 New Item dialog box appears, select the Intersoft UXPage and set the Name to UXPageNewItem. Press OK 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.

Next, you will add UXDialogBox as new item in the AddNewItem Silverlight project.

Adding UXDialogBox as New Item

This section shows how to add a new UXDialogBox to your Silverlight 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 AddNewItem from the context menu.
    Add New Item
  2. After the New Item dialog box appears, select the Intersoft UXDialogBox and set the Name to UXDialogBoxNewItem. Press OK to confirm.
    Add UXDialogBox as New Item
  3. The new UXDialogBox will be opened. Switch the view to XAML view and you should get 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.

Next, you will add UXWindow as new item in the AddNewItem Silverlight project.

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 a new UXWindow

  1. In the Project explorer window, right-click and select AddNewItem from the context menu.
    Add New Item
  2. After the New Item dialog box appears, select the Intersoft UXWindow and set the Name to UXWindowNewItem. Press OK 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 item 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 Expression Blend Designer

Other Resources

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