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:

• Create a new ClientUI Application project using Intersoft ClientUI Application project template.
• Add a new UXPage to the Silverlight project.
• Add a new UXDialogBox to the Silverlight project.
• Add a new UXWindow to the Silverlight project.

Prerequisites

You need the following components to complete this walkthrough:

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

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.

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.
   
2. After the Add New Item dialog box appeared, select the Intersoft UXPage and set the Name to UXPageNewItem. Press Add button to confirm.
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>

   
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.
2. After the Add New Item dialog box appears, select the Intersoft UXDialogBox and set the Name to UXDialogBoxNewItem. Press Add button to confirm.
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>

   
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.
2. After the Add New Item dialog box appeared, select the Intersoft UXWindow and set the Name to UXWindowNewItem. Press Add button to confirm.
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>

   
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

UXDialogBoxNewItem.xaml

UXWindowNewItem.xaml

See Also