Intersoft ClientUI Documentation
How-to: Use UXFlow as Navigation Source using MVVM Pattern
Intersoft ClientUI 8 > ClientUI Fundamentals > Navigation Overview > Navigation How-to Topics > How-to: Use UXFlow as Navigation Source using MVVM Pattern

This topic describes how to use UXFlow as navigation source using MVVM Pattern.

Example

Description

The item type of UXFlow is UXFlowItem. This UXFlowItem implements INavigationSource that allows the control to perform navigation to specified URI. To learn more about navigation, see Navigation Overview.

In this topic, the NavigateUri of the ViewModel is bound to the NavigateUri property of UXFlowItem. NavigateUri is used to determined the URI to be navigated.

The following example shows how to bind NavigateUri from the ViewModel into UXFlowItem.

Code

Models

Hotel
Copy Code 
public class Hotel : ModelBase
{
    private string _name;
    private string _location;
    private string _rating;
    private string _rate;
    private string _image;

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

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

    public string Rating
    {
        get { return this._rating; }
        set {
            if (this._rating != value) {
                this._rating = value;
                OnPropertyChanged("Rating");
            }
        }
    }
        
    public string Rate
    {
        get { return this._rate; }
        set
        {
            if (this._rate != value)
            {
                this._rate = value;
                OnPropertyChanged("Rate");
            }
        }
    }

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

    public Hotel(XElement x)
    {
        this._name = x.Element("Name").Value.Trim();
        this._location = x.Element("Location").Value.Trim();
        this._rating = x.Element("Rating").Value.Trim();
        this._rate = x.Element("Rate").Value.Trim();
        this._image = x.Element("Image").Value.Trim();
    }
}

ViewModel

HotelItemViewModel
Copy Code 
public class HotelItemViewModel : ViewModelBase
{
    private Hotel _hotel;
    private Uri _navigateUri;
    private string _id;

    public HotelItemViewModel(Hotel hotel)
    {
        this._hotel = hotel;
    }

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

    public Hotel Hotel
    {
        get { return this._hotel; }
        set {
            if (this._hotel != null) {
                this._hotel = value;
                OnPropertyChanged("Hotel");
            }
        }
    }

    public Uri NavigateUri
    {
        get { return this._navigateUri; }
        set {
            if (this._navigateUri != value) {
                this._navigateUri = value;
                OnPropertyChanged("NavigateUri");
            }
        }
    }
}
MainPageViewModel
Copy Code 
public class MainPageViewModel : ViewModelBase
{
    private ObservableCollection<HotelItemViewModel> _hotelCollection;

    public MainPageViewModel() 
    {
        this.LoadHotel();
    }
        
    public ObservableCollection<HotelItemViewModel> HotelCollection
    {
        get { return this._hotelCollection; }
        set {
            this._hotelCollection = value;
            OnPropertyChanged("HotelCollection");
        }
    }

    public void LoadHotel()
    {
        StreamResourceInfo stream = System.Windows.Application.GetResourceStream(new Uri("/UseUXFlowAsNavigationSourceUsingMVVMPattern;component/SampleData/HotelDataSource.xml", UriKind.Relative));
        XDocument doc = XDocument.Load(stream.Stream);
        var hotels = doc.Descendants("Hotel").Select(a => new Hotel(a));
        _hotelCollection = new ObservableCollection<HotelItemViewModel>();
        int i = 0;
        foreach (var dt in hotels) {
            dt.Image = "/UseUXFlowAsNavigationSourceUsingMVVMPattern;component/Assets/Images/Hotels/" + dt.Image;
            HotelItemViewModel newData = new HotelItemViewModel(dt);
            newData.Id = i.ToString();
            newData.NavigateUri = new Uri("/Hotel/" + i.ToString(), UriKind.Relative);
            HotelCollection.Add(newData);
            i++;
        }
        stream.Stream.Close();
    }
}
HotelViewModel
Copy Code 
public class HotelViewModel : ViewModelBase
{
    private HotelItemViewModel _hotelItem;

    public HotelViewModel(ObservableCollection<HotelItemViewModel> hotelCollection, string id)
    {
        if (hotelCollection != null) {
            var data = hotelCollection.Where(a => a.Id == id);
            if (data.Count() > 0)
                this.HotelItem = data.First();
        }
    }

    public HotelItemViewModel HotelItem
    {
        get { return this._hotelItem; }
        set {
            if (this._hotelItem != value) {
                this._hotelItem = value;
                OnPropertyChanged("HotelItem");
            }
        }
    }
}

View

MainPage
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="UseUXFlowAsNavigationSourceUsingMVVMPattern.MainPage" 
        Title="MainPage Page"
    xmlns:ViewModels="clr-namespace:UseUXFlowAsNavigationSourceUsingMVVMPattern.ViewModels"
        >
    <Intersoft:UXPage.Resources>
        <ViewModels:MainPageViewModel x:Key="MainPageViewModel" />
    </Intersoft:UXPage.Resources>
        <Grid x:Name="LayoutRoot" DataContext="{StaticResource MainPageViewModel}">
        <Intersoft:UXWindow Width="800" Height="510" Header="Hotel" 
                            HeaderDisplayMode="Content" IsActive="True" IsClientVisible="True" 
                            CanMaximize="False" CanMinimize="False" CanClose="False" CanResize="False">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="300" />
                </Grid.RowDefinitions>
                <Grid.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="Black" Offset="1"/>
                        <GradientStop Color="#FFE1EFFA" Offset="0.5"/>
                    </LinearGradientBrush>
                </Grid.Background>
                <Intersoft:DockPanel>
                    <Intersoft:GlassLabel Content="Hotel Details" Intersoft:DockPanel.Dock="Top" />
                    <Intersoft:UXFrame x:Name="contentFrame" EnablePageTransition="True" 
                            DefaultTransitionEffect="FlipLeft" NewTransitionEffect="FlipLeft" RedirectUri="/Views/Home"
                            >
                        <Intersoft:UXFrame.UriMapper>
                            <Intersoft:UriMapper>
                                <Intersoft:UriMapping Uri="" MappedUri="/Views/Hotel.xaml" />
                                <Intersoft:UriMapping Uri="/Hotel/{ID}" MappedUri="/Views/Hotel.xaml?ID={ID}" />
                                <Intersoft:UriMapping Uri="/{Page}" MappedUri="/Views/{Page}.xaml" />
                            </Intersoft:UriMapper>
                        </Intersoft:UXFrame.UriMapper>
                    </Intersoft:UXFrame>
                </Intersoft:DockPanel>

                <Intersoft:UXFlow Grid.Row="1" ItemsSource="{Binding HotelCollection}" ImageMemberPath="Hotel.Image"
                            TitleMemberPath="Hotel.Name" SubTitleMemberPath="Hotel.Location"
                            FullScreenButtonVisibility="Collapsed" NavigateUriMemberPath="NavigateUri" 
                            Background="Transparent" Cursor="Hand">
                </Intersoft:UXFlow>
            </Grid>
        </Intersoft:UXWindow>
    </Grid>
</Intersoft:UXPage>
Hotel
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="UseUXFlowAsNavigationSourceUsingMVVMPattern.Views.Hotel" 
        Title="Hotel Page">
        <Grid x:Name="LayoutRoot">
        <Grid>
            <Intersoft:DockPanel DataContext="{Binding HotelItem}">                
                <Intersoft:ContentReflector HorizontalAlignment="Left" Intersoft:DockPanel.Dock="Left" Width="160" VerticalContentAlignment="Top" Margin="12">
                    <Image Source="{Binding Hotel.Image}" />
                </Intersoft:ContentReflector>
                <Intersoft:ExpandableGroupBox Header="General Information" VerticalAlignment="Top" Intersoft:DockPanel.IsFillElement="True">
                    <Intersoft:UXItemsControl>
                        <Intersoft:FieldLabel Header="Name:" HorizontalHeaderAlignment="Left" HeaderWidth="55">
                            <Intersoft:UXTextBox Text="{Binding Hotel.Name}" Width="150" IsEnabled="False" />
                        </Intersoft:FieldLabel>
                        <Intersoft:FieldLabel Header="Location:" HorizontalHeaderAlignment="Left" HeaderWidth="55">
                            <Intersoft:UXTextBox Text="{Binding Hotel.Location}" Width="150" IsEnabled="False" />
                        </Intersoft:FieldLabel>
                        <Intersoft:FieldLabel Header="Rating:" HorizontalHeaderAlignment="Left" HeaderWidth="55">
                            <Intersoft:UXTextBox Text="{Binding Hotel.Rating}" Width="150" IsEnabled="False" />
                        </Intersoft:FieldLabel>
                        <Intersoft:FieldLabel Header="Rate:" HorizontalHeaderAlignment="Left" HeaderWidth="55">
                            <Intersoft:UXTextBox Text="{Binding Hotel.Rate}" Width="150" IsEnabled="False" />
                        </Intersoft:FieldLabel>
                    </Intersoft:UXItemsControl>
                </Intersoft:ExpandableGroupBox>
            </Intersoft:DockPanel>
        </Grid>
    </Grid>
</Intersoft:UXPage>

Note that the following sample code is using MVVM pattern, to learn more about this pattern, see MVVM Pattern Overview.

In this example, the MainPage.xaml contains UXFlow to list all the hotels in the collection and also a UXFrame that will be used to display the Hotel Details using the Hotel.xaml page.

The UXFlow uses NavigateUriMemberPath property to bind the NavigateUri from the ViewModel to each item. By double clicking the item you will navigate to the Hotel.xaml to see the hotel details of each item.

See Also
UXFlow Class
UXFlowItem Class

Concepts

Navigation Overview

Other Resources

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