WPFのページ遷移では、NavigationWindow、Frame、NavigationServiceなどといったコントロールやクラスが用意されてます。
Frameにpage.xaml割り当てることでSPA(SimglePageApplication)の構造を作ることができます。
ファイル構成は下記の通りです。
- MainWindow.xaml `--- MainWindow.xaml.cs - MainWindowViewModel.cs - pages/ |--- Page1.xaml |--- Page2.xaml `--- Page3.xaml
<Window x:Class="WpfPrismMvvm.MainWindow"
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"
Title="MainWindow" Height="400" Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="*"/>
<RowDefinition Height="32"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Background="DimGray">
<TextBlock Margin="10,0,0,0" VerticalAlignment="Center" Text="フレーム" Foreground="White"/>
</StackPanel>
<Frame Grid.Row="1" NavigationUIVisibility="Hidden" Name="myFrame" />
<StackPanel Orientation="Horizontal" Background="DimGray" Grid.Row="2">
<Button Name="prevButton" Content="Prev" HorizontalAlignment="Left"
VerticalAlignment="Center" Width="50" Margin="10,0,0,0"
Command="{Binding PrevButtonClickedCommand}" />
<Button Name="nextButton" Content="Next" HorizontalAlignment="Left"
VerticalAlignment="Center" Width="50"
Command="{Binding NextButtonClickedCommand}" />
</StackPanel>
</Grid>
</Window>
frameをViewModelへ登録するようにします。
using System.Windows;
namespace WpfPrismMvvm
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// フレームのNavigationServiceを渡す
MainWindowViewModel vm = new MainWindowViewModel(this.myFrame.NavigationService);
this.DataContext = vm;
}
}
}
navigationService.Navigate()に相対パスでxamlファイルを指定してページ遷移します。
using Prism.Commands;
using Prism.Mvvm;
using System;
using System.Collections.Generic;
using System.Windows.Navigation;
namespace WpfPrismMvvm
{
public class MainWindowViewModel : BindableBase
{
private List<Uri> _uriList = new List<Uri>() {
new Uri("pages/Page1.xaml", UriKind.Relative),
new Uri("pages/Page2.xaml", UriKind.Relative),
new Uri("pages/Page3.xaml", UriKind.Relative),
};
private NavigationService navigationService;
public DelegateCommand NextButtonClickedCommand { get; private set; }
public DelegateCommand PrevButtonClickedCommand { get; private set; }
public MainWindowViewModel(NavigationService navigationService)
{
this.navigationService = navigationService;
navigationService.Navigate(_uriList[0]);
NextButtonClickedCommand = new DelegateCommand(LoadNextPage);
PrevButtonClickedCommand = new DelegateCommand(LoadPrevPage);
}
private void LoadNextPage()
{
if (navigationService.CurrentSource == null)
{
navigationService.Navigate(_uriList[0]);
return;
}
switch(navigationService.CurrentSource.ToString())
{
case "pages/Page1.xaml":
navigationService.Navigate(_uriList[1]);
break;
case "pages/Page2.xaml":
navigationService.Navigate(_uriList[2]);
break;
case "pages/Page3.xaml":
default:
break;
}
}
private void LoadPrevPage()
{
if (navigationService.CurrentSource == null)
{
return;
}
switch (navigationService.CurrentSource.ToString())
{
case "pages/Page3.xaml":
navigationService.Navigate(_uriList[1]);
break;
case "pages/Page2.xaml":
navigationService.Navigate(_uriList[0]);
break;
case "pages/Page1.xaml":
default:
break;
}
}
}
}
ページ部品となります。ページ遷移が分かりやすいように背景色を変えています。
<Page x:Class="WpfPrismMvvm.pages.Page1"
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:local="clr-namespace:WpfPrismMvvm.pages"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="300"
Title="Page1">
<Grid Background="Blue">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="ページ 1"/>
</Grid>
</Page>
ページ部品となります。ページ遷移が分かりやすいように背景色を変えています。
<Page x:Class="WpfPrismMvvm.pages.Page2"
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:local="clr-namespace:WpfPrismMvvm.pages"
mc:Ignorable="d"
d:DesignHeight="200" d:DesignWidth="300"
Title="Page2">
<Grid Background="Yellow">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="ページ 2"/>
</Grid>
</Page>
ページ部品となります。ページ遷移が分かりやすいように背景色を変えています。
<Page x:Class="WpfPrismMvvm.pages.Page3"
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:local="clr-namespace:WpfPrismMvvm.pages"
mc:Ignorable="d"
d:DesignHeight="240" d:DesignWidth="360"
Title="Page3">
<Grid Background="Red">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="ページ 3"/>
</Grid>
</Page>