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:

• Create Silverlight Application + Website project using Silverlight Application + Website 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:

• Microsoft Expression Blend 4
• Intersoft ClientUI

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.
   
3. After the New Project dialog box appears, select the Silverlight Application + Website project template and set the name of the project to AddNewItem.
   

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

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

   
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.
   
2. After the New Item dialog box appears, select the Intersoft UXWindow and set the Name to UXWindowNewItem. Press OK 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 item such as UXPage, UXDialogBox, and UXWindow to a Silverlight project.

Complete Code Listing

UXPageNewItem.xaml

UXDialogBoxNewItem.xaml

UXWindowNewItem.xaml

See Also