ContextQMD
Back to Devexpress

FrameNavigationService

wpf-113944-mvvm-framework-services-predefined-set-framenavigationservice.md

latest12.6 KB
Original Source

FrameNavigationService

  • Feb 03, 2023
  • 5 minutes to read

The FrameNavigationService is an INavigationService implementation that allows you to navigate between Views within a NavigationFrame.

Note

The service also implements the IDocumentManagerService interface. It allows you to interact with a FrameNavigationService instance as with a document manager service. See Document Services to learn more.

Assume that you need to implement a slide navigation between Views in your MVVM application. To accomplish this task, you can use the FrameNavigationService. Add the FrameNavigationService to NavigationFrame’s Interaction.Behaviors.

xaml
xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
xmlns:dxwuin="http://schemas.devexpress.com/winfx/2008/xaml/windowsui/navigation"
...
<dxwui:NavigationFrame>
    <dxmvvm:Interaction.Behaviors>
        <dxwuin:FrameNavigationService />
    </dxmvvm:Interaction.Behaviors>
</dxwui:NavigationFrame>

Access the FrameNavigationService in our View Model defined as a POCO object and navigate to the required View by using the INavigationService.Navigate method. If the View Model is inherited from the ViewModelBase, use the approach from Services in ViewModelBase descendants.

csharp
public class MainViewModel {
    private INavigationService NavigationService { get { return this.GetService<INavigationService>(); } }
    public MainViewModel() { }
    public void OnViewLoaded() {
        NavigationService.Navigate("HomeView", null, this);
    }
}

In the code snippet above, you can see how to navigate to the HomeView.

In addition to the Navigate method, the INavigationService interface also provides the following navigation methods.

  • GoBack - performs a navigation to the previous view, if permitted.
  • GoForward - performs a navigation to the next view, if permitted.
  • ClearNavigationHistory - clears the navigation journal to disable navigation to the previous view.

Views caching support

The NavigationFrame associated with the FrameNavigationService allows you to cache the shown Views. Depending on the NavigationFrame.NavigationCacheMode property value, a NavigationFrame can cache Views to which it navigates in multiple modes: cache always, cache until the cache size exceeds the defined value, or do not cache at all. The NavigationPages provide the attached NavigationPage.NavigationCacheMode property that overrides the NavigationCacheMode method for specific elements.

To clear view cache at the View Model level, invoke the INavigationService.ClearCache method.

Processing navigation in ViewModel

To support the navigation processing at ViewModels’ level, you can implement the ISupportNavigation interface in your ViewModels. The ISupportNavigation members that occur when navigating to an object and when navigating away from it.

Splash Screen Showing

If you are navigating between content-heavy Views with complex structure, you can show a splash screen by using the FrameNavigationService.ShowSplashScreen while the NavigationFrame content is loading.

Example

The FrameNavigationService provides methods to navigate between Views within a NavigationFrame. This example shows how to use this service. In this example, the MainWindow contains a NavigationFrame, which shows a HomeView at startup. The HomeView contains a Tile, which invokes a command to navigate to a DetailView when clicked. The DetailView contains the Back button for backward navigation.

View Example

xaml
<UserControl x:Class="DXSample.View.MainView" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
    xmlns:dxwuin="http://schemas.devexpress.com/winfx/2008/xaml/windowsui/navigation"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:ViewModel="clr-namespace:DXSample.ViewModel" 
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" 
    DataContext="{dxmvvm:ViewModelSource Type={x:Type ViewModel:MainViewModel}}">
    <Grid>
        <dxwui:NavigationFrame AnimationType="SlideHorizontal" NavigationCacheMode="Required">
            <dxmvvm:Interaction.Behaviors>
                <dxmvvm:EventToCommand EventName="Loaded" Command="{Binding OnViewLoadedCommand}" />
                <dxwuin:FrameNavigationService />
            </dxmvvm:Interaction.Behaviors>
        </dxwui:NavigationFrame>
    </Grid>
</UserControl>
csharp
using DevExpress.Mvvm;
using DevExpress.Mvvm.POCO;

namespace DXSample.ViewModel {
    public class MainViewModel {
        private INavigationService NavigationService { get { return this.GetService<INavigationService>(); } }

        public MainViewModel() { }

        public void OnViewLoaded() {
            NavigationService.Navigate("HomeView", null, this);
        }
    }
}
xaml
<UserControl x:Class="DXSample.View.HomeView" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" 
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
    xmlns:ViewModel="clr-namespace:DXSample.ViewModel" 
    DataContext="{dxmvvm:ViewModelSource Type={x:Type ViewModel:HomeViewModel}}">
        <dxwui:PageAdornerControl Header="Home View">
            <lc:TileLayoutControl>
                <lc:Tile Size="Small" Command="{Binding NavigateDetailsCommand}">
                    <TextBlock Text="Details" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </lc:Tile>
            </lc:TileLayoutControl>
        </dxwui:PageAdornerControl>
</UserControl>
csharp
using DevExpress.Mvvm;
using DevExpress.Mvvm.POCO;

namespace DXSample.ViewModel {
    public class DetailViewModel {
        private INavigationService NavigationService { get { return this.GetService<INavigationService>(); } }
        public void NavigateNextDetail() {
            NavigationService.Navigate("NextDetailView", null, this);
        }
        public void NavigateBack() {
            NavigationService.GoBack();
        }
        public bool CanNavigateBack() {
            return NavigationService.CanGoBack;
        }
        public void NavigateForward() {
            NavigationService.GoForward();
        }
        public bool CanNavigateForward() {
            return NavigationService != null && NavigationService.CanGoForward;
        }
    }
}
xaml
<UserControl x:Class="DXSample.View.DetailView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
    xmlns:dxwuii="http://schemas.devexpress.com/winfx/2008/xaml/windowsui/internal"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:ViewModel="clr-namespace:DXSample.ViewModel" 
    DataContext="{dxmvvm:ViewModelSource Type={x:Type ViewModel:DetailViewModel}}">
    <Grid>
        <dxwui:PageAdornerControl Header="Detail View">
            <dxwui:PageAdornerControl.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding}" />
                        <Button Grid.Column="1" Content="Go Forward" HorizontalAlignment="Right" FontSize="14" Command="{Binding DataContext.NavigateForwardCommand, RelativeSource={RelativeSource AncestorType=dxwuii:NavigationHeaderControl}}" />
                    </Grid>
                </DataTemplate>
            </dxwui:PageAdornerControl.HeaderTemplate>
            <Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="Next Detail View" Padding="4" Margin="2" Command="{Binding NavigateNextDetailCommand}"/>
        </dxwui:PageAdornerControl>
    </Grid>
</UserControl>
csharp
using DevExpress.Mvvm;
using DevExpress.Mvvm.POCO;

namespace DXSample.ViewModel {
    public class HomeViewModel {
        private INavigationService NavigationService { get { return this.GetService<INavigationService>(); } }

        public HomeViewModel() { }

        public void NavigateDetails() {
            NavigationService.Navigate("DetailView", null, this);
        }
    }
}
vb
Imports Microsoft.VisualBasic
Imports System
Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.POCO

Namespace DXSample.ViewModel
    Public Class HomeViewModel
        Private ReadOnly Property NavigationService() As INavigationService
            Get
                Return Me.GetService(Of INavigationService)()
            End Get
        End Property

        Public Sub New()
        End Sub

        Public Sub NavigateDetails()
            NavigationService.Navigate("DetailView", Nothing, Me)
        End Sub
    End Class
End Namespace
vb
Imports Microsoft.VisualBasic
Imports System
Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.POCO

Namespace DXSample.ViewModel
    Public Class MainViewModel
        Private ReadOnly Property NavigationService() As INavigationService
            Get
                Return Me.GetService(Of INavigationService)()
            End Get
        End Property

        Public Sub New()
        End Sub

        Public Sub OnViewLoaded()
            NavigationService.Navigate("HomeView", Nothing, Me)
        End Sub
    End Class
End Namespace
vb
Imports Microsoft.VisualBasic
Imports System
Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.POCO

Namespace DXSample.ViewModel
    Public Class DetailViewModel
        Private ReadOnly Property NavigationService() As INavigationService
            Get
                Return Me.GetService(Of INavigationService)()
            End Get
        End Property
        Public Sub NavigateNextDetail()
            NavigationService.Navigate("NextDetailView", Nothing, Me)
        End Sub
        Public Sub NavigateBack()
            NavigationService.GoBack()
        End Sub
        Public Function CanNavigateBack() As Boolean
            Return NavigationService.CanGoBack
        End Function
        Public Sub NavigateForward()
            NavigationService.GoForward()
        End Sub
        Public Function CanNavigateForward() As Boolean
            Return NavigationService IsNot Nothing AndAlso NavigationService.CanGoForward
        End Function
    End Class
End Namespace