This walkthrough shows how to create navigation new page and new button and  enable authentication and role-based security to the page.

In this walkthrough, you perform the following tasks:

• Create a ClientUI MVVM Business Application project using Intersoft ClientUI MVVM Business Application project template.
• Create new page using Intersoft UXPage.
• Create new UXNavigationButton to navigate to the newly created page.
• Enable authentication and role-based to the page.

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 MVVM Business Application Project

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

To create the ClientUI Basic Navigation Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI MVVM Business Application project named ClientUIBusinessAppProject using Intersoft ClientUI MVVM Business Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Business Application Template.

Next, you will add a new page to your project.

Creating new Page using Intersoft UXPage

This section steps you through the process of creating ContactUs page that uses several ClientUI controls such as DockPanel and StylishLabel.

To create new Page

1. Right click on Views folder, add new item. Select Intersoft UXPage as the template page. Named it ContactUs.xaml then click Add.
   
2. To have the same style and layout with the others page that already exist. Set the Intersoft:UXPage d:Width to 800, d:Height to 600, and Style to {StaticResource CommonPageStyle}. CommonPageStyle is already defined in the project.
   

   XAML

   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="ClientUIBusinessAppProject.Views.ContactUs" Title="ContactUs Page" d:DesignWidth="800" d:DesignHeight="600" Style="{StaticResource CommonPageStyle}"> <Grid x:Name="LayoutRoot"> </Grid> </Intersoft:UXPage>

3. Create the content of ContactUs.xaml. In this walkthrough, the page's content will be created like CustomerPage. There will be DockPanel, StylishLabel and TextBlock control inside it.
   

   XAML

   Copy Code

   <Grid x:Name="LayoutRoot"> <Grid.Background> <ImageBrush AlignmentY="Bottom" AlignmentX="Right" Stretch="None" Opacity="0.5" ImageSource="../Assets/Images/ContactUsLarge.png"> <ImageBrush.Transform> <TranslateTransform X="40" Y="40"/> </ImageBrush.Transform> </ImageBrush> </Grid.Background> <Intersoft:DockPanel FillChildMode="Custom"> <Intersoft:StylishLabel Content="Contact Us" Intersoft:DockPanel.Dock="Top" Style="{StaticResource PageHeaderStyle}" /> <Grid Intersoft:DockPanel.IsFillElement="True"> <TextBlock TextWrapping="Wrap" Width="280" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Text="Put content here."> </TextBlock> </Grid> </Intersoft:DockPanel> </Grid>

   
   

Next, you will create the UXNavigationButton that navigate to this page.

Creating new UXNavigationButton

This section shows how to create ContactUs button using UXNavigationButton. This ContactUs button is used as navigation button to the ContactUs page. The navigation page is set through the NavigateUri property.

To create the ContactUs UXNavigationButton

1. Open MainPage.xaml by double click on the page.
2. Prepare two images for the icon of the ContactUs UXNavigationButton and the ContactUs page. Image for UXNavigationButton is size 48x48, named it ContactUs.png. Image for new page is size 256x256, name it ContactUsLarge.png. Put both of the images to Assets/Images/ folder in the silverlight project.
3. Add UXNavigationButton to the NavigationItemContainer. Set Content to Contact Us, NavigateUri to /ContactUs and Icon to Assets/Images/ContactUs.png such as shown in the following example.
   

   XAML

   Copy Code

   <Intersoft:UXItemsControl x:Name="NavigationItemsContainer" ItemContainerStyle="{StaticResource NavigationButtonStyle}" Orientation="Horizontal" Background="{StaticResource NavigationContainerBackground}"> <Intersoft:UXNavigationButton x:Name="btnHome" Content="Home" NavigateUri="/Home" Icon="Assets/Images/Home.png" IsDefaultNavigationSource="True"/> <Intersoft:UXNavigationButton Content="Customers" NavigateUri="/Customers" Icon="Assets/Images/CustomersFolder.png"/> <Intersoft:UXNavigationButton Content="Products" NavigateUri="/Products" Icon="Assets/Images/Products.png"/> <Intersoft:UXNavigationButton Content="Reports" NavigateUri="/Reports" Icon="Assets/Images/Reports.png"/> <Intersoft:UXNavigationButton Content="Settings" NavigateUri="/Settings" Icon="Assets/Images/Settings.png"/> <Intersoft:UXNavigationButton Content="About" NavigateUri="/About" Icon="Assets/Images/ClientUI_Silverlight.png"/> <Intersoft:UXNavigationButton Content="Contact Us" NavigateUri="/ContactUs" Icon="Assets/Images/ContactUs.png"/> </Intersoft:UXItemsControl>

   
   
4. With new UXNavigationButton and UXPage defined for Contact Us, the page is already accessible but without authentication since it is not specified with authentication yet. Save and run the project then click the Contact Us button to go to the Contact Us page.
   

Enable Page Authentication

This section shows how to enable page authentication.

To enable page authentication

1. Double click on ContactUs.xaml and set RequiresAuthentication to True to the Intersoft:UXPage and the authentication will active for this page.
   

   XAML

   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="ClientUIBusinessAppProject.Views.ContactUs" Title="ContactUs Page" d:DesignWidth="800" d:DesignHeight="600" Style="{StaticResource CommonPageStyle}" RequiresAuthentication="True">

2. Save and run the project then click the Contact Us button and notice that in order to access Contact Us page, authentication is needed.
   

Complete Code Listing

This section lists the complete code used in this walkthrough.

ContactUs.xaml

<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="ClientUIBusinessAppProject.Views.ContactUs" 
        Title="ContactUs Page"
        d:DesignWidth="800" d:DesignHeight="600"
    Style="{StaticResource CommonPageStyle}" RequiresAuthentication="True">
        
        <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush AlignmentY="Bottom" AlignmentX="Right" Stretch="None" Opacity="0.5" ImageSource="../Assets/Images/ContactUsLarge.png">
                <ImageBrush.Transform>
                    <TranslateTransform X="40" Y="40"/>
                </ImageBrush.Transform>
            </ImageBrush>
        </Grid.Background>
        <Intersoft:DockPanel FillChildMode="Custom">
            <Intersoft:StylishLabel Content="Contact Us" Intersoft:DockPanel.Dock="Top" Style="{StaticResource PageHeaderStyle}" />
            <Grid Intersoft:DockPanel.IsFillElement="True">
                <TextBlock TextWrapping="Wrap" Width="280" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Text="Put content here.">
                </TextBlock>
            </Grid>
        </Intersoft:DockPanel>
    </Grid>
</Intersoft:UXPage>