Intersoft ClientUI Documentation
How-to: Use UXBreadCrumb for Page Navigation
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Navigation Controls Overview > UXBreadCrumb > UXBreadCrumb How-to Topics > How-to: Use UXBreadCrumb for Page Navigation

Description

This example provides guidelines on how to use UXBreadCrumb in conjunction with UXFrame for page navigation.

Prerequisites

For a quick example, we will use Intersoft ClientUI Data Application (DevForce) project. To create a new Intersoft ClientUI Data Application (DevForce) project, see Walkthrough: Create New Intersoft ClientUI MVVM Data Application (DevForce).  We will modify the Customers page to include the UXBreadCrumb and a UXFrame and display a greeting text accordingly.

Tutorial

Setting up UXBreadCrumb

1. Create a new folder on the main project and name it XML.

2. Right-click on the folder, and select Add, New Item.

3. Select XML File, and name it Sitemap.xml.

The sitemap content is as follows:

Sitemap.xml
Copy Code 
<Sitemap>
  <SitemapData>
    <DisplayName>Home</DisplayName>
    <Path>/HelpViewer</Path>
    <Children>
      <SitemapData>
        <DisplayName>ClientUI</DisplayName>
        <Path>/HelpViewer/ClientUI</Path>
        <Children>
          <SitemapData>
            <DisplayName>Scheduling Controls</DisplayName>
            <Path>/HelpViewer/ClientUI/Scheduling Controls</Path>
            <Children>
              <SitemapData>
                <DisplayName>Schedule View</DisplayName>
                <Path>/HelpViewer/ClientUI/Scheduling Controls/Schedule View</Path>
              </SitemapData>
            </Children>
          </SitemapData>
          <SitemapData>
            <DisplayName>Ribbon Controls</DisplayName>
            <Path>/HelpViewer/ClientUI/Ribbon Controls</Path>
            <Children>
              <SitemapData>
                <DisplayName>Ribbon</DisplayName>
                <Path>/HelpViewer/ClientUI/Ribbon Controls/Ribbon</Path>
              </SitemapData>
            </Children>
          </SitemapData>
        </Children>
      </SitemapData>
    </Children>
  </SitemapData>
</Sitemap>
You can also add icons to the sitemap by adding the appropriate nodes and specifying the ImageMemberPath property.

4. Right-click on Sitemap.xml and choose Properties.

5. In the properties tab, set the Build Action of Sitemap.xml. This will allow resources to be parsed in the view model.

6. Create a new class named BreadCrumbViewModel.cs in the ViewModels folder. You can do this by right-clicking on the ViewModels folder, and select Add, Class.

7. We will first create the skeleton ViewModel.

BreadCrumbViewModel.cs
Copy Code 
using System;
using System.Collections;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;
using System.Windows.Resources;
using System.Xml.Linq;
using Intersoft.Client.Framework.Input;
using Intersoft.Client.UI.Navigation;

namespace BreadCrumbLoadOnDemand.ViewModels
{
    public class BreadCrumbViewModel : ViewModelBase
    {
        private string _greetingText;
        private Uri _resolvedUri;

        public BreadCrumbViewModel()
        {
            //Get the StreamResourceInfo for the XML file
            StreamResourceInfo resourceStream = Application.GetResourceStream(new Uri("/BreadCrumbLoadOnDemand;Component/XML/Sitemap.xml", UriKind.Relative));
            if (resourceStream != null)
            {
                XDocument xdoc = XDocument.Load(resourceStream.Stream, LoadOptions.SetBaseUri);
                //Use the utility method to generate sitemap from XML
                Sitemap = Intersoft.Client.UI.Navigation.UXBreadCrumb.GenerateSitemap(xdoc, "DisplayName", "Path", "Children", null);
            }

            //Use ICommand to track navigate event and display greeting text accordingly
            this.NavigateCommand = new DelegateCommand(Navigated);
        }

        private void Navigated(object obj)
        {
            NavigatedCommandParameter parameter = obj as NavigatedCommandParameter;
            if (parameter != null)
            {
                //OnPropertyChanged will be called
                this.ResolvedUri = parameter.Uri;
            }
        }


        public ICommand NavigateCommand { get; set; }

        public IEnumerable<SitemapData> Sitemap { get; set; }

        public string GreetingText
        {
            get { return this._greetingText; }
            set
            {
                if (this._greetingText != value)
                {
                    this._greetingText = value;
                    OnPropertyChanged("GreetingText");
                }
            }
        }

        public Uri ResolvedUri
        {
            get { return this._resolvedUri; }
            set
            {
                if (this._resolvedUri != value)
                {
                    this._resolvedUri = value;
                    OnPropertyChanged("ResolvedUri");
                    //After ResolvedUri has been set, find the appropriate display name to be displayed to GreetingText
                    this.FindDisplayNameRecursive(this.Sitemap);
                }
            }
        }

        private void FindDisplayNameRecursive(IEnumerable sitemap)
        {
            if (sitemap != null)
            {
                foreach (SitemapData sitemapData in sitemap)
                {
                    if (sitemapData.NavigateUri == this.ResolvedUri)
                    {
                        this.GreetingText = "You're now at: " + sitemapData.DisplayName;
                        break;
                    }

                    if (sitemapData.Children != null)
                        this.FindDisplayNameRecursive(sitemapData.Children);
                }
            }
        }       
    }
}

 8. Open Customers.xaml in folder Views, and modify to the following code:

Customers.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"
        xmlns:ViewModels="clr-namespace:BreadCrumbLoadOnDemand.ViewModels" x:Class="BreadCrumbLoadOnDemand.Customers"
        Title="Customers Page" d:DesignWidth="800" d:DesignHeight="600" Style="{StaticResource CommonPageStyle}">

    <Intersoft:UXPage.DataContext>
        <ViewModels:BreadCrumbViewModel />
    </Intersoft:UXPage.DataContext>

    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush AlignmentY="Bottom" AlignmentX="Right" Stretch="None" Opacity="0.5"
                    ImageSource="../Assets/Images/CustomersFolderLarge.png">
                <ImageBrush.Transform>
                    <TranslateTransform X="40" Y="40" />
                </ImageBrush.Transform>
            </ImageBrush>
        </Grid.Background>
        <Intersoft:DockPanel Margin="10" FillChildMode="Custom">
            <Intersoft:StylishLabel Content="Customers Page" Intersoft:DockPanel.Dock="Top"
                    Style="{StaticResource PageHeaderStyle}" />
            <StackPanel Intersoft:DockPanel.IsFillElement="True">
                <Intersoft:UXBreadCrumb Sitemap="{Binding Sitemap}" DisplayMemberPath="DisplayName"
                        NavigateUriMemberPath="NavigateUri" CollectionMemberPath="Children"
                        TargetFrame="MainContentFrame" />
                <Intersoft:UXFrame x:Name="MainContentFrame" JournalOwnership="OwnsJournal"
                        Source="/HelpViewer/ClientUI/Scheduling Controls/Schedule View">
                    <Intersoft:UXFrame.UriMapper>
                        <Intersoft:UriMapper>
                            <Intersoft:UriMapping Uri="/HelpViewer" MappedUri="/Views/TestPage.xaml" />
                            <Intersoft:UriMapping Uri="/HelpViewer/{page}" MappedUri="/Views/TestPage.xaml?uri={page}" />
                        </Intersoft:UriMapper>
                    </Intersoft:UXFrame.UriMapper>
                </Intersoft:UXFrame>
            </StackPanel>
        </Intersoft:DockPanel>
    </Grid>
</Intersoft:UXPage>

For more information on UXFrame, see UXFrame page.

9. Create a new UXPage for a test page, named TestPage.xaml in the Views folder. This is the target frame page.

TestPage.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"
        xmlns:ViewModels="clr-namespace:BreadCrumbLoadOnDemand.ViewModels"
        x:Class="BreadCrumbLoadOnDemand.Views.TestPage" 
        Title="TestPage Page"
        d:DesignWidth="640" d:DesignHeight="480"
    NavigatedCommand="{Binding NavigateCommand}">
        
    <Intersoft:UXPage.DataContext>
        <ViewModels:BreadCrumbViewModel/>
    </Intersoft:UXPage.DataContext>
    
        <Grid x:Name="LayoutRoot">
        <TextBlock Text="{Binding GreetingText, Mode=TwoWay}" />
        </Grid>
</Intersoft:UXPage>

 10. Run the project and navigate to Customers page.

Result

 

See Also
UXBreadCrumb Class
UXBreadCrumbBox Class
UXBreadCrumbBoxItem Class
UXBreadCrumbItem Class
How-to: Enable Load on Demand for UXBreadCrumb
How-to: Use UXBreadCrumb for Advanced Scenarios

Concepts

UXBreadCrumb