Intersoft ClientUI Documentation
Walkthrough: Configure Nested Navigation Frame to Support Browser-Journal Integration
Intersoft ClientUI 8 > ClientUI Fundamentals > Navigation Overview > Navigation Walkthroughs > Walkthrough: Configure Nested Navigation Frame to Support Browser-Journal Integration

This walkthrough shows you how to configure nested navigation frame to support browser journal integration.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

Creating a new Intersoft ClientUI Advanced Navigation Project

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

To create the ClientUI Advanced Navigation project

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

Configuring the UXFrame for Browser Journal Integration Support 

This sections shows how to create a UXPage which contains UXNavigationButton and UXFrame with another two mockup UXPage which loaded in the UXFrame. These two mockup UXPage only contains TextBlock elements with its text content copied from Intersoft site.

To create the mockup UXPage

  1. In your project, create new folder with name Detail under the Views folders.
  2. In Detail folder, create a new UXPage named Corporate.xaml. 
  3. Add a new StackPanel and reset the control layout using the context menu.
  4. Add two new TextBlock.
  5. Set these properties in the first TextBlock:
    Property Value
    FontWeight Bold
    FontSize 14
    Text Corporate Info
  6. In the second TextBlock, set the TextWrapping property to True and set some data in the Text property.
  7. Repeat the step 2 - 6 for the second UXPage, name the UXPage Vision.xaml and set the first TextBlock Text property to Vision & Mission. In this scenario, a third TextBlock is added to show data.

To create the nested UXFrame page

  1. In Views folder, create a new UXPage name IntersoftPage.xaml
  2. Add a new DockPanel and reset the control layout using the context menu.
  3. Add a StackPanel and set the following properties:
    Property Value
    Intersoft:DockPanel.Dock Left
    Width 125
    Margin 5,0,5,0
  4. Add a UXFrame in the DockPanel and set the DisplayFragmentInBrowser property to True and Intersoft:DockPanel.IsFillElement property to True.
  5. Set the UriMapper property in UXFrame as shown in the snippet below:
    XAML
    Copy Code 
    <Intersoft:UXFrame Name="uXFrame1" DisplayFragmentInBrowser="True" Intersoft:DockPanel.IsFillElement="True">
    <Intersoft:UXFrame.UriMapper>
        <Intersoft:UriMapper>
            <Intersoft:UriMapping Uri="" MappedUri="/Views/Detail/Corporate.xaml"/>
            <Intersoft:UriMapping Uri="/Intersoft/{page}" MappedUri="/Views/Detail/{page}.xaml"/>
        </Intersoft:UriMapper>
    </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>
  6. Add a UXNavigationButton in the StackPanel. Set the following properties:
    Property Value
    Content Corporate Info
    Icon /ClientUIAdvNavApp2;component/Assets/Images/Home.png
    DisplayMode ContentAndImage
    HorizontalContentAlignment Left
    NavigateUri /Intersoft/Corporate
    TargetName uXFrame1
  7. Repeat the process and set the property with same value as the first UXNavigationButton, except for these properties:
    Property Value
    NavigateUri /Intersoft/Vision
    Icon /ClientUIAdvNavApp2;component/Assets/Images/Contact.png
    Content Vision &amp; Mission
  8. Set the first UXNavigationButton IsDefaultNavigationSource property to True.

To add a link to the nested UXFrame page

In order to allow nested UXFrame for browser journal integration, you set the parent frame's AllowNestedFrameNavigation property to True. Using the project template in this walkthrough, the AllowNestedFrameNavigation property has already been set to True.

  1. Update the ContentFrame element UriMapper property for navigation to the IntersoftPage and the mockup UXPage.
    XAML
    Copy Code 
    <Intersoft:UXFrame x:Name="ContentFrame" ...>
    <Intersoft:UXFrame.UriMapper>
        <Intersoft:UriMapper>
            <Intersoft:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
            <Intersoft:UriMapping Uri="/Error" MappedUri="/ErrorPage.xaml"/>
            <Intersoft:UriMapping Uri="/Intersoft/{page}" MappedUri="/Views/IntersoftPage.xaml" IsChildNavigation="True"/>
            <Intersoft:UriMapping Uri="/Intersoft" MappedUri="/Views/IntersoftPage.xaml" />
            <Intersoft:UriMapping Uri="/{page}" MappedUri="/Views/{page}.xaml"/>
        </Intersoft:UriMapper>
    </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>
  2. Add a new UXNavigationButton to navigate to IntersoftPage under UXItemsControl. Set the following properties:
    Property Value
    Content Intersoft
    NavigateUri /Intersoft
    Icon Assets/Images/Web.png

Viewing The Result

In order to view the result, you will need to build the Silverlight project and run the test page aspx on a browser.

To view the result

  1. Navigate to Vision page.
  2. Notice the browser address has been updated appropriately with the Vision page Uri.
  3. You can also try to browse directly to corporate info page by specifying the "AlientUIAdvNavApp2TestPage.aspx#/Intersoft/Corporate" in the address bar.

Conclusion

In this walkthrough, you have learned how to create ClientUI Advanced Navigation project using Intersoft ClientUI Advanced Navigation project template. You also learned how to configure nested UXFrame for browser journal integration support.

Complete Code Listing

This section lists the complete code used in this walkthrough.

Vision.xaml

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="ClientUIAdvNavApp2.Views.Detail.Vision" 
        Title="Vision Page"
        d:DesignWidth="640" d:DesignHeight="480" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
        
        <Grid x:Name="LayoutRoot">
        <StackPanel Name="stackPanel1">
            <TextBlock Name="label1" Text="Vision and Mission" FontWeight="Bold" FontSize="14" />
            <TextBlock Name="label2" Text="We established Intersoft Solutions to create a better user experience for the web – to make it richer, more dynamic, and more intuitive." TextWrapping="Wrap" />
            <TextBlock Name="label3" Text="We focus solely on providing developers around the globe the tools to build rich web applications in less time and with less effort. Our pioneering components and professional services offer comprehensive solutions to every type of developer from individuals to large enterprises. Our dedication to creating great user experiences means that both developers and end users benefit from the increased productivity and reduced costs associated with our innovative products." TextWrapping="Wrap" />
        </StackPanel>
    </Grid>
</Intersoft:UXPage>

Corporate.xaml

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="ClientUIAdvNavApp2.Views.Detail.Corporate" 
        Title="Corporate Page"
        d:DesignWidth="640" d:DesignHeight="480">
        
        <Grid x:Name="LayoutRoot">
        <StackPanel Name="stackPanel1">
            <TextBlock Name="label1" Text="Corporate Info" FontWeight="Bold" FontSize="14" />
            <TextBlock Name="label2" Text="Intersoft Solutions is the industry leader in Rich Internet Application components, providing a broad range of innovative, high performance ASP.NET and Silverlight tools for professional developers, independent software vendors, and enterprise technology partners. Intersoft Solutions is headquartered in Jakarta, Indonesia with partners and resellers  around the globe." TextWrapping="Wrap" />
        </StackPanel>        
        </Grid>
</Intersoft:UXPage>

IntersoftPage.xaml

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="ClientUIAdvNavApp2.Views.IntersoftPage" 
        Title="IntersoftPage Page"
        d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">
        <Intersoft:DockPanel Name="dockPanel1" FillChildMode="Custom">
            <StackPanel Name="stackPanel1" Width="125" Margin="5,0,5,0" Intersoft:DockPanel.Dock="Left">
                <Intersoft:UXNavigationButton Content="Corporate Info" NavigateUri="/Intersoft/Corporate" Name="uXNavigationButton1" TargetName="uXFrame1" Icon="/ClientUIAdvNavApp2;component/Assets/Images/Home.png" DisplayMode="ContentAndImage" HorizontalContentAlignment="Left" IsDefaultNavigationSource="True" />
                <Intersoft:UXNavigationButton Content="Vision & Mission" NavigateUri="/Intersoft/Vision" Name="uXNavigationButton2" TargetName="uXFrame1" Icon="/ClientUIAdvNavApp2;component/Assets/Images/Contact.png" DisplayMode="ContentAndImage" HorizontalContentAlignment="Left" />
            </StackPanel>
            <Intersoft:UXFrame Name="uXFrame1" DisplayFragmentInBrowser="True" Intersoft:DockPanel.IsFillElement="True">
                <Intersoft:UXFrame.UriMapper>
                    <Intersoft:UriMapper>
                        <Intersoft:UriMapping Uri="" MappedUri="/Views/Detail/Corporate.xaml"/>
                        <Intersoft:UriMapping Uri="/Intersoft/{page}" MappedUri="/Views/Detail/{page}.xaml"/>
                    </Intersoft:UriMapper>
                </Intersoft:UXFrame.UriMapper>
            </Intersoft:UXFrame>
        </Intersoft:DockPanel>
    </Grid>
</Intersoft:UXPage>

MainPage.xaml

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"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        mc:Ignorable="d"
        x:Class="ClientUIAdvNavApp2.MainPage" 
        Title="Main Application Page"
        d:DesignWidth="1024" d:DesignHeight="768">
    <Intersoft:UXPage.Resources>
        <DataTemplate x:Key="AdditionalCommandTemplate">
            <Intersoft:UXToolGroup>
                <Intersoft:UXTextBox Command="Intersoft:NavigationCommands.Navigate" Style="{StaticResource AddressBarStyle}" MinWidth="150" Text="Address Bar" ToolTipService.ToolTip="Current Page" Margin="4,0,0,0"/>
                <Intersoft:UXSeparator Orientation="Vertical" Margin="2,5,2,3" Background="#FF383838" d:LayoutOverrides="Width" BorderBrush="#58FFFFFF"/>
                <Intersoft:UXToolBarButton Content="Email" DisplayMode="Image" VerticalAlignment="Center" HorizontalAlignment="Left" Icon="Assets/Images/Email.png" ToolTipService.ToolTip="Custom Command 1"/>
                <Intersoft:UXToolBarButton Content="Print" DisplayMode="Image" VerticalAlignment="Center" HorizontalAlignment="Left" Icon="Assets/Images/Print.png" ToolTipService.ToolTip="Custom Command 2"/>
            </Intersoft:UXToolGroup>
        </DataTemplate>
    </Intersoft:UXPage.Resources>

    <Grid x:Name="LayoutRoot" Background="{StaticResource MainPageBackground}">
        <Intersoft:DockPanel FillChildMode="Custom">
            <StackPanel x:Name="HeaderContainer" Intersoft:DockPanel.Dock="Top">
                <Intersoft:GlassLabel x:Name="GlassPanel" Style="{StaticResource GlassBarStyle}">
                    <Grid Height="34">
                        <Intersoft:UXNavigationBar x:Name="NavigationBar" HorizontalContentAlignment="Stretch" HorizontalAlignment="Left" AdditionalToolGroup="{StaticResource AdditionalCommandTemplate}" HomeUri="/Home"/>
                        <StackPanel Margin="3,0,0,0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
                            <TextBlock Text="My" FontSize="18.667" Foreground="{StaticResource BrandingColor1}"/>
                            <TextBlock Text="Application" Margin="2,0,0,0" FontSize="18.667" Foreground="{StaticResource BrandingColor2}"/>
                        </StackPanel>
                    </Grid>
                </Intersoft:GlassLabel>
            </StackPanel>
            <Intersoft:UXFrame x:Name="ContentFrame" Intersoft:DockPanel.Dock="Top" Intersoft:DockPanel.IsFillElement="True" Margin="0,10,0,0" EnablePageTransition="True" DefaultTransitionEffect="FlipLeft" AutoDetectNavigationDirection="True" NewTransitionEffect="FlipLeft" AllowNestedFrameNavigation="True">
                <Intersoft:UXFrame.UriMapper>
                    <Intersoft:UriMapper>
                        <Intersoft:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
                        <Intersoft:UriMapping Uri="/Error" MappedUri="/ErrorPage.xaml"/>
                        <Intersoft:UriMapping Uri="/Intersoft/{page}" MappedUri="/Views/IntersoftPage.xaml" IsChildNavigation="True"/>
                        <Intersoft:UriMapping Uri="/Intersoft" MappedUri="/Views/IntersoftPage.xaml" />
                        <Intersoft:UriMapping Uri="/{page}" MappedUri="/Views/{page}.xaml"/>
                    </Intersoft:UriMapper>
                </Intersoft:UXFrame.UriMapper>
            </Intersoft:UXFrame>
            <Grid Intersoft:DockPanel.Dock="Bottom">
                <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="Intersoft" NavigateUri="/Intersoft" Icon="Assets/Images/Web.png"/>
                </Intersoft:UXItemsControl>
                <Intersoft:UXHyperlinkButton HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0" TargetName="_blank" NavigateUri="http://www.clientui.com" Style="{StaticResource ClientUILinkStyle}">
                    <Image Source="Assets/Images/Powered_ClientUI.png" Stretch="None"/>
                </Intersoft:UXHyperlinkButton>
            </Grid>
        </Intersoft:DockPanel>
    </Grid>
</Intersoft:UXPage>
See Also
UXFrame Class

Concepts

Navigation Overview

Other Resources

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