This example shows you how to use the FrameNavigationService to navigate between Views within a NavigationFrame.
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.
Files to Look At
- DetailView.xaml (VB: DetailView.xaml)
- HomeView.xaml (VB: HomeView.xaml)
- MainView.xaml (VB: MainView.xaml)
- DetailViewModel.cs (VB: DetailViewModel.vb)
- HomeViewModel.cs (VB: HomeViewModel.vb)
- MainViewModel.cs (VB: MainViewModel.vb)
Documentation
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
DXSample/View/DetailView.xaml
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: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: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"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"
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>
DXSample/View/HomeView.xaml
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
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"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"
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>
DXSample/View/MainView.xaml
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.Triggers>
<dxmvvm:EventToCommand EventName="Loaded" Command="{Binding OnViewLoadedCommand}" />
</dxmvvm:Interaction.Triggers>
<dxmvvm:Interaction.Behaviors>
<dxwuin:FrameNavigationService />
</dxmvvm:Interaction.Behaviors>
</dxwui:NavigationFrame>
</Grid>
</UserControl>
DXSample/ViewModel/DetailViewModel.cs(vb)
C#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;
}
}
}
DXSample/ViewModel/HomeViewModel.cs(vb)
C#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);
}
}
}
DXSample/ViewModel/MainViewModel.cs(vb)
C#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);
}
}
}