使用UWP 設計 MVVM 軟體架構(二) 處理View頁面的轉換

前言:

上一篇文章"使用UWP 設計 MVVM 軟體架構(一) " , 我們以電影清單程式, 簡單地表示MVVM的架構及實作方法, 程式中View會把所有的電影資訊顯示在螢幕上, 但若現在我們想要再加一個功能, 讓使用者點擊ListBox上的Item(Movie)時, 頁面能夠導向另一個View去顯示詳細的電影資訊, 那我們該如何實作?


以下就是說明, 如何使用NavigationService來幫助我們去切換每個View元件, 基本上有幾個步驟

1. 修改App.cs
2. 建立ViewModel, MovieDetailViewModel
3. 建立View, MovieDetailView
4. 修改MovieDetailView
5. 修改MovieListViewModel
6. 修改MovieListView

前置作業

在開始動工之前我們先在Common的資料夾裡加入以下的類別

1. INavigationService.cs
2. NavigationService.cs
3. NavigationHelper.cs
4. SuspensionManager.cs

	using System;
	namespace Common
	{
	public interface INavigationService
	{
	bool Navigate<T>(object parameter = null);
	bool Navigate(Type source, object parameter = null);
	void GoBack();
	}
	}

view raw INavigationService.cs hosted with ❤ by GitHub

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using System.Windows.Input;
	using Windows.System;
	using Windows.UI.Core;
	using Windows.UI.Xaml;
	using Windows.UI.Xaml.Controls;
	using Windows.UI.Xaml.Navigation;
	namespace Common
	{
	[Windows.Foundation.Metadata.WebHostHidden]
	public class NavigationHelper : DependencyObject
	{
	private Page Page { get; set; }
	private Frame Frame { get { return this.Page.Frame; } }
	public NavigationHelper(Page page)
	{
	this.Page = page;
	}
	#region Process lifetime management
	private String _pageKey;
	public event SaveStateEventHandler SaveState;
	public void OnNavigatedTo(NavigationEventArgs e)
	{
	var frameState = SuspensionManager.SessionStateForFrame(this.Frame);
	this._pageKey = "Page-" + this.Frame.BackStackDepth;
	if (e.NavigationMode == NavigationMode.New)
	{
	// Clear existing state for forward navigation when adding a new page to the
	// navigation stack
	var nextPageKey = this._pageKey;
	int nextPageIndex = this.Frame.BackStackDepth;
	while (frameState.Remove(nextPageKey))
	{
	nextPageIndex++;
	nextPageKey = "Page-" + nextPageIndex;
	}
	// Pass the navigation parameter to the new page
	if (this.LoadState != null)
	{
	this.LoadState(this, new LoadStateEventArgs(e.Parameter, null));
	}
	}
	else
	{
	if (this.LoadState != null)
	{
	this.LoadState(this, new LoadStateEventArgs(e.Parameter, (Dictionary<String, Object>)frameState[this._pageKey]));
	}
	}
	}
	public void OnNavigatedFrom(NavigationEventArgs e)
	{
	var frameState = SuspensionManager.SessionStateForFrame(this.Frame);
	var pageState = new Dictionary<String, Object>();
	if (this.SaveState != null)
	{
	this.SaveState(this, new SaveStateEventArgs(pageState));
	}
	frameState[_pageKey] = pageState;
	}
	#endregion
	}
	[Windows.Foundation.Metadata.WebHostHidden]
	public class RootFrameNavigationHelper
	{
	private Frame Frame { get; set; }
	SystemNavigationManager systemNavigationManager;
	public RootFrameNavigationHelper(Frame rootFrame)
	{
	this.Frame = rootFrame;
	// Handle keyboard and mouse navigation requests
	this.systemNavigationManager = SystemNavigationManager.GetForCurrentView();
	systemNavigationManager.BackRequested += SystemNavigationManager_BackRequested;
	UpdateBackButton();
	// Listen to the window directly so we will respond to hotkeys regardless
	// of which element has focus.
	Window.Current.CoreWindow.Dispatcher.AcceleratorKeyActivated +=
	CoreDispatcher_AcceleratorKeyActivated;
	Window.Current.CoreWindow.PointerPressed +=
	this.CoreWindow_PointerPressed;
	// Update the Back button whenever a navigation occurs.
	this.Frame.Navigated += (s, e) => UpdateBackButton();
	}
	private bool TryGoBack()
	{
	bool navigated = false;
	if (this.Frame.CanGoBack)
	{
	this.Frame.GoBack();
	navigated = true;
	}
	return navigated;
	}
	private bool TryGoForward()
	{
	bool navigated = false;
	if (this.Frame.CanGoForward)
	{
	this.Frame.GoForward();
	navigated = true;
	}
	return navigated;
	}
	private void SystemNavigationManager_BackRequested(object sender, BackRequestedEventArgs e)
	{
	if (!e.Handled)
	{
	e.Handled = TryGoBack();
	}
	}
	private void UpdateBackButton()
	{
	systemNavigationManager.AppViewBackButtonVisibility =
	this.Frame.CanGoBack ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
	}
	private void CoreDispatcher_AcceleratorKeyActivated(CoreDispatcher sender,
	AcceleratorKeyEventArgs e)
	{
	var virtualKey = e.VirtualKey;
	// Only investigate further when Left, Right, or the dedicated Previous or Next keys
	// are pressed
	if ((e.EventType == CoreAcceleratorKeyEventType.SystemKeyDown ||
	e.EventType == CoreAcceleratorKeyEventType.KeyDown) &&
	(virtualKey == VirtualKey.Left || virtualKey == VirtualKey.Right ||
	(int)virtualKey == 166 || (int)virtualKey == 167))
	{
	var coreWindow = Window.Current.CoreWindow;
	var downState = CoreVirtualKeyStates.Down;
	bool menuKey = (coreWindow.GetKeyState(VirtualKey.Menu) & downState) == downState;
	bool controlKey = (coreWindow.GetKeyState(VirtualKey.Control) & downState) == downState;
	bool shiftKey = (coreWindow.GetKeyState(VirtualKey.Shift) & downState) == downState;
	bool noModifiers = !menuKey && !controlKey && !shiftKey;
	bool onlyAlt = menuKey && !controlKey && !shiftKey;
	if (((int)virtualKey == 166 && noModifiers) ||
	(virtualKey == VirtualKey.Left && onlyAlt))
	{
	// When the previous key or Alt+Left are pressed navigate back
	e.Handled = TryGoBack();
	}
	else if (((int)virtualKey == 167 && noModifiers) ||
	(virtualKey == VirtualKey.Right && onlyAlt))
	{
	// When the next key or Alt+Right are pressed navigate forward
	e.Handled = TryGoForward();
	}
	}
	}
	private void CoreWindow_PointerPressed(CoreWindow sender,
	PointerEventArgs e)
	{
	var properties = e.CurrentPoint.Properties;
	// Ignore button chords with the left, right, and middle buttons
	if (properties.IsLeftButtonPressed || properties.IsRightButtonPressed ||
	properties.IsMiddleButtonPressed)
	return;
	// If back or foward are pressed (but not both) navigate appropriately
	bool backPressed = properties.IsXButton1Pressed;
	bool forwardPressed = properties.IsXButton2Pressed;
	if (backPressed ^ forwardPressed)
	{
	e.Handled = true;
	if (backPressed) this.TryGoBack();
	if (forwardPressed) this.TryGoForward();
	}
	}
	}
	public delegate void LoadStateEventHandler(object sender, LoadStateEventArgs e);
	public delegate void SaveStateEventHandler(object sender, SaveStateEventArgs e);
	public class LoadStateEventArgs : EventArgs
	{
	public Object NavigationParameter { get; private set; }
	public Dictionary<string, Object> PageState { get; private set; }
	public LoadStateEventArgs(Object navigationParameter, Dictionary<string, Object> pageState)
	: base()
	{
	this.NavigationParameter = navigationParameter;
	this.PageState = pageState;
	}
	}
	public class SaveStateEventArgs : EventArgs
	{
	public Dictionary<string, Object> PageState { get; private set; }
	public SaveStateEventArgs(Dictionary<string, Object> pageState)
	: base()
	{
	this.PageState = pageState;
	}
	}
	}

view raw NavigationHelper.cs hosted with ❤ by GitHub

	using System;
	using Windows.UI.Xaml.Controls;
	namespace Common
	{
	public class NavigationService : INavigationService
	{
	private readonly Frame frame;
	public NavigationService(Frame frame)
	{
	this.frame = frame;
	}
	public bool Navigate<T>(object parameter = null)
	{
	var type = typeof(T);
	return Navigate(type, parameter);
	}
	public bool Navigate(Type t, object parameter = null)
	{
	return frame.Navigate(t, parameter);
	}
	public void GoBack()
	{
	frame.GoBack();
	}
	}
	}

view raw NavigationService.cs hosted with ❤ by GitHub

	using System;
	using System.Collections.Generic;
	using System.IO;
	using System.Runtime.Serialization;
	using System.Threading.Tasks;
	using Windows.Storage;
	using Windows.Storage.Streams;
	using Windows.UI.Xaml;
	using Windows.UI.Xaml.Controls;
	namespace Common
	{
	internal sealed class SuspensionManager
	{
	private static Dictionary<string, object> _sessionState = new Dictionary<string, object>();
	private static List<Type> _knownTypes = new List<Type>();
	private const string sessionStateFilename = "_sessionState.xml";
	public static Dictionary<string, object> SessionState
	{
	get { return _sessionState; }
	}
	public static List<Type> KnownTypes
	{
	get { return _knownTypes; }
	}
	public static async Task SaveAsync()
	{
	try
	{
	// Save the navigation state for all registered frames
	foreach (var weakFrameReference in _registeredFrames)
	{
	Frame frame;
	if (weakFrameReference.TryGetTarget(out frame))
	{
	SaveFrameNavigationState(frame);
	}
	}
	// Serialize the session state synchronously to avoid asynchronous access to shared
	// state
	MemoryStream sessionData = new MemoryStream();
	DataContractSerializer serializer = new DataContractSerializer(typeof(Dictionary<string, object>), _knownTypes);
	serializer.WriteObject(sessionData, _sessionState);
	// Get an output stream for the SessionState file and write the state asynchronously
	StorageFile file = await ApplicationData.Current.LocalFolder.CreateFileAsync(sessionStateFilename, CreationCollisionOption.ReplaceExisting);
	using (Stream fileStream = await file.OpenStreamForWriteAsync())
	{
	sessionData.Seek(0, SeekOrigin.Begin);
	await sessionData.CopyToAsync(fileStream);
	}
	}
	catch (Exception e)
	{
	throw new SuspensionManagerException(e);
	}
	}
	public static async Task RestoreAsync(String sessionBaseKey = null)
	{
	_sessionState = new Dictionary<String, Object>();
	try
	{
	// Get the input stream for the SessionState file
	StorageFile file = await ApplicationData.Current.LocalFolder.GetFileAsync(sessionStateFilename);
	using (IInputStream inStream = await file.OpenSequentialReadAsync())
	{
	// Deserialize the Session State
	DataContractSerializer serializer = new DataContractSerializer(typeof(Dictionary<string, object>), _knownTypes);
	_sessionState = (Dictionary<string, object>)serializer.ReadObject(inStream.AsStreamForRead());
	}
	// Restore any registered frames to their saved state
	foreach (var weakFrameReference in _registeredFrames)
	{
	Frame frame;
	if (weakFrameReference.TryGetTarget(out frame) && (string)frame.GetValue(FrameSessionBaseKeyProperty) == sessionBaseKey)
	{
	frame.ClearValue(FrameSessionStateProperty);
	RestoreFrameNavigationState(frame);
	}
	}
	}
	catch (Exception e)
	{
	throw new SuspensionManagerException(e);
	}
	}
	private static DependencyProperty FrameSessionStateKeyProperty =
	DependencyProperty.RegisterAttached("_FrameSessionStateKey", typeof(String), typeof(SuspensionManager), null);
	private static DependencyProperty FrameSessionBaseKeyProperty =
	DependencyProperty.RegisterAttached("_FrameSessionBaseKeyParams", typeof(String), typeof(SuspensionManager), null);
	private static DependencyProperty FrameSessionStateProperty =
	DependencyProperty.RegisterAttached("_FrameSessionState", typeof(Dictionary<String, Object>), typeof(SuspensionManager), null);
	private static List<WeakReference<Frame>> _registeredFrames = new List<WeakReference<Frame>>();
	public static void RegisterFrame(Frame frame, String sessionStateKey, String sessionBaseKey = null)
	{
	if (frame.GetValue(FrameSessionStateKeyProperty) != null)
	{
	throw new InvalidOperationException("Frames can only be registered to one session state key");
	}
	if (frame.GetValue(FrameSessionStateProperty) != null)
	{
	throw new InvalidOperationException("Frames must be either be registered before accessing frame session state, or not registered at all");
	}
	if (!string.IsNullOrEmpty(sessionBaseKey))
	{
	frame.SetValue(FrameSessionBaseKeyProperty, sessionBaseKey);
	sessionStateKey = sessionBaseKey + "_" + sessionStateKey;
	}
	// Use a dependency property to associate the session key with a frame, and keep a list of frames whose
	// navigation state should be managed
	frame.SetValue(FrameSessionStateKeyProperty, sessionStateKey);
	_registeredFrames.Add(new WeakReference<Frame>(frame));
	// Check to see if navigation state can be restored
	RestoreFrameNavigationState(frame);
	}
	public static void UnregisterFrame(Frame frame)
	{
	// Remove session state and remove the frame from the list of frames whose navigation
	// state will be saved (along with any weak references that are no longer reachable)
	SessionState.Remove((String)frame.GetValue(FrameSessionStateKeyProperty));
	_registeredFrames.RemoveAll((weakFrameReference) =>
	{
	Frame testFrame;
	return !weakFrameReference.TryGetTarget(out testFrame) || testFrame == frame;
	});
	}
	public static Dictionary<String, Object> SessionStateForFrame(Frame frame)
	{
	var frameState = (Dictionary<String, Object>)frame.GetValue(FrameSessionStateProperty);
	if (frameState == null)
	{
	var frameSessionKey = (String)frame.GetValue(FrameSessionStateKeyProperty);
	if (frameSessionKey != null)
	{
	// Registered frames reflect the corresponding session state
	if (!_sessionState.ContainsKey(frameSessionKey))
	{
	_sessionState[frameSessionKey] = new Dictionary<String, Object>();
	}
	frameState = (Dictionary<String, Object>)_sessionState[frameSessionKey];
	}
	else
	{
	// Frames that aren't registered have transient state
	frameState = new Dictionary<String, Object>();
	}
	frame.SetValue(FrameSessionStateProperty, frameState);
	}
	return frameState;
	}
	private static void RestoreFrameNavigationState(Frame frame)
	{
	var frameState = SessionStateForFrame(frame);
	if (frameState.ContainsKey("Navigation"))
	{
	frame.SetNavigationState((String)frameState["Navigation"]);
	}
	}
	private static void SaveFrameNavigationState(Frame frame)
	{
	var frameState = SessionStateForFrame(frame);
	frameState["Navigation"] = frame.GetNavigationState();
	}
	}
	public class SuspensionManagerException : Exception
	{
	public SuspensionManagerException()
	{
	}
	public SuspensionManagerException(Exception e)
	: base("SuspensionManager failed", e)
	{
	}
	}
	}

view raw SuspensionManager.cs hosted with ❤ by GitHub

修改App.xaml.cs

• 我們在這邊宣告NavigationService的靜態變數方便將來使用

	public static NavigationService NavigationService;
	/// <summary>
	/// Invoked when the application is launched normally by the end user. Other entry points
	/// will be used such as when the application is launched to open a specific file.
	/// </summary>
	/// <param name="e">Details about the launch request and process.</param>
	protected override void OnLaunched(LaunchActivatedEventArgs e)
	{
	Frame rootFrame = Window.Current.Content as Frame;
	// Do not repeat app initialization when the Window already has content,
	// just ensure that the window is active
	if (rootFrame == null)
	{
	// Create a Frame to act as the navigation context and navigate to the first page
	rootFrame = new Frame();
	NavigationService = new NavigationService(rootFrame);
	rootFrame.NavigationFailed += OnNavigationFailed;
	if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
	{
	//TODO: Load state from previously suspended application
	}
	// Place the frame in the current Window
	Window.Current.Content = rootFrame;
	}
	if (e.PrelaunchActivated == false)
	{
	if (rootFrame.Content == null)
	{
	// When the navigation stack isn't restored navigate to the first page,
	// configuring the new page by passing required information as a navigation
	// parameter
	rootFrame.Navigate(typeof(MainPage), e.Arguments);
	}
	// Ensure the current window is active
	Window.Current.Activate();
	}
	}

view raw partial App.cs hosted with ❤ by GitHub

建立MovieDetailViewModel

• 為了簡化範例, 基本上這個ViewModel沒什麼特別功能, 單純就是開放Movie的Model讓View做Data Binding而已

	using SimpleMVVM.Data;
	using SimpleMVVM.Models;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using System.Windows.Input;
	namespace SimpleMVVM.ViewModels
	{
	public class MovieDetailViewModel: ViewModelBase
	{
	private Movie movie;
	public Movie Movie
	{
	get => movie;
	set
	{
	movie = value;
	NotifyPropertyChanged("Movie");
	}
	}
	}
	}

view raw MovieDetailViewModel.cs hosted with ❤ by GitHub
• 將MovieDetailViewModel的實體加到ViewModelLocator裡

	using SimpleMVVM.Data;
	using System.Collections.Generic;
	namespace SimpleMVVM.ViewModels
	{
	public class ViewModelLocator
	{
	private Dictionary<string, ViewModelBase> modSet;
	private FakeDatabase dbContext;
	public ViewModelLocator()
	{
	modSet = new Dictionary<string, ViewModelBase>();
	dbContext = new FakeDatabase();
	InitializeDatabase();
	MovieListViewModel movieListViewModel = new MovieListViewModel(dbContext);
	modSet.Add("MovieListViewModel", movieListViewModel);
	MovieDetailViewModel movieDetailViewModel = new MovieDetailViewModel();
	modSet.Add("MovieDetailViewModel", movieDetailViewModel);
	}
	public MovieListViewModel MovieListViewModel
	{
	get => (MovieListViewModel)modSet["MovieListViewModel"];
	}
	public MovieDetailViewModel MovieDetailViewModel
	{
	get => (MovieDetailViewModel)modSet["MovieDetailViewModel"];
	}
	public async void InitializeDatabase()
	{
	await dbContext.LoadMoviesFromFile();
	}
	}
	}

view raw Updated ViewModelLocator.cs hosted with ❤ by GitHub

建立MovieDetailView

• 這邊我們建立一個全新的View Page顯示電影名稱, 電影價錢

	<Page
	x:Class="SimpleMVVM.MovieDetailView"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SimpleMVVM"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	HorizontalAlignment="Left"
	DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=MovieDetailViewModel}"
	Width="300"
	NavigationCacheMode="Disabled">
	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	<Grid.RowDefinitions>
	<RowDefinition Height="60"/>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	</Grid.RowDefinitions>
	<TextBlock Grid.Row="0" Text="Movie Detail" Margin="10"/>
	<Grid Grid.Row="1" Margin="10">
	<Grid.RowDefinitions>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*"/>
	<ColumnDefinition Width="4*"/>
	</Grid.ColumnDefinitions>
	<TextBlock Grid.Row="0" Grid.Column="0" Margin="5" Text="Name"/>
	<TextBlock Grid.Row="1" Grid.Column="0" Margin="5" Text="Price"/>
	<TextBox Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Margin="5" Width="150" Text="{Binding Movie.Name, Mode=TwoWay}"/>
	<TextBox Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Margin="5" Width="150" Text="{Binding Movie.Price, Mode=TwoWay}"/>
	</Grid>
	</Grid>
	</Page>

view raw MovieDetailView.xaml hosted with ❤ by GitHub
• 修改MovieDetailView.xaml.cs 處理頁面轉換
• 實作NavigationHelper.LoadState事件, 處理當頁面被載入時的動作, 讓MovieListView傳過來的Model能設定給MovieDetailViewModel

	using Common;
	using SimpleMVVM.Models;
	using SimpleMVVM.ViewModels;
	using Windows.UI.Xaml.Controls;
	using Windows.UI.Xaml.Navigation;
	// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
	namespace SimpleMVVM
	{
	/// <summary>
	/// An empty page that can be used on its own or navigated to within a Frame.
	/// </summary>
	public sealed partial class MovieDetailView : Page
	{
	private NavigationHelper navigationHelper;
	private MovieDetailViewModel defaultViewModel;
	public MovieDetailView()
	{
	this.InitializeComponent();
	this.defaultViewModel = (MovieDetailViewModel)DataContext;
	this.navigationHelper = new NavigationHelper(this);
	this.navigationHelper.LoadState += navigationHelper_LoadState;
	this.navigationHelper.SaveState += navigationHelper_SaveState;
	}
	private void navigationHelper_SaveState(object sender, SaveStateEventArgs e)
	{
	}
	private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
	{
	if( e.NavigationParameter is Movie)
	{
	defaultViewModel.Movie = (Movie)e.NavigationParameter;
	}
	}
	public NavigationHelper NavigationHelper { get => navigationHelper; }
	protected override void OnNavigatedFrom(NavigationEventArgs e)
	{
	this.NavigationHelper.OnNavigatedFrom(e);
	}
	protected override void OnNavigatedTo(NavigationEventArgs e)
	{
	this.navigationHelper.OnNavigatedTo(e);
	}
	}
	}

view raw MovieDetailView.xaml.cs hosted with ❤ by GitHub

修改MovieListViewModel

• 加入一個新的方法, 提供ListBox 上點擊Item時的事件處理邏輯
• 主要是去呼叫NavigationService做頁面切換

	public void selectedMovieChanged()
	{
	if(SelectedMovie !=null)
	App.NavigationService.Navigate<MovieDetailView>(SelectedMovie);
	}

view raw partial of MovieListviewModel.cs hosted with ❤ by GitHub

修改MovieListView.xaml.cs

• 建立ListBox的SelectionChanged 的事件處理方法ListBox_SelectionChanged
• 我們會在這方法的實作內去呼叫原本綁定的MovieListViewModel 的 selectedMovieChanged()方法
• 以NavigationHelper來處理頁面轉換
• 實作當頁面被導航至此頁時的事件  public void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
• 目的是當頁面被導航至MovieListView時, 先將 SelectedMovie的直給清掉

	using Common;
	using SimpleMVVM.ViewModels;
	using System;
	using System.Collections.Generic;
	using System.IO;
	using System.Linq;
	using System.Runtime.InteropServices.WindowsRuntime;
	using Windows.Foundation;
	using Windows.Foundation.Collections;
	using Windows.UI.Xaml;
	using Windows.UI.Xaml.Controls;
	using Windows.UI.Xaml.Controls.Primitives;
	using Windows.UI.Xaml.Data;
	using Windows.UI.Xaml.Input;
	using Windows.UI.Xaml.Media;
	using Windows.UI.Xaml.Navigation;
	using Windows.UI.Core;
	// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
	namespace SimpleMVVM
	{
	/// <summary>
	/// An empty page that can be used on its own or navigated to within a Frame.
	/// </summary>
	public sealed partial class MainPage : Page
	{
	private MovieListViewModel defaultViewModel;
	private NavigationHelper navigationHelper;
	public MainPage()
	{
	this.InitializeComponent();
	defaultViewModel = (MovieListViewModel) DataContext;
	navigationHelper = new NavigationHelper(this);
	navigationHelper.LoadState += navigationHelper_LoadState;
	navigationHelper.SaveState += navigationHelper_SaveState;
	}
	private void navigationHelper_SaveState(object sender, SaveStateEventArgs e)
	{
	}
	private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
	{
	defaultViewModel.SelectedMovie = null;
	}
	public NavigationHelper NavigationHelper { get => navigationHelper; }
	protected override void OnNavigatedFrom(NavigationEventArgs e)
	{
	this.NavigationHelper.OnNavigatedFrom(e);
	}
	protected override void OnNavigatedTo(NavigationEventArgs e)
	{
	this.NavigationHelper.OnNavigatedTo(e);
	}
	private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
	{
	defaultViewModel.selectedMovieChanged();
	}
	}
	}

view raw Updated MovieListView.xaml.cs hosted with ❤ by GitHub

修改MovieListView.xaml

• 在ListBox 的標籤內註冊SelectionChanged 的事件處理方法

	<Page
	x:Class="SimpleMVVM.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:SimpleMVVM"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	DataContext="{Binding Source= {StaticResource ViewModelLocator}, Path=MovieListViewModel}"
	>
	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	<Grid.RowDefinitions>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	<RowDefinition Height="Auto"/>
	</Grid.RowDefinitions>
	<TextBlock Grid.Row="0" Text="Movie List" Margin="10" />
	<StackPanel Orientation="Vertical" Grid.Row="1">
	<ListBox Margin="10"
	ItemsSource="{Binding Movies, Mode=TwoWay}"
	SelectedItem="{Binding SelectedMovie, Mode=TwoWay}"
	Height="250"
	Width="Auto"
	MaxWidth="450"
	HorizontalAlignment="Left"
	ScrollViewer.VerticalScrollBarVisibility="Auto"
	SelectionChanged="ListBox_SelectionChanged"
	>
	<ListBox.ItemTemplate>
	<DataTemplate>
	<StackPanel Orientation="Vertical">
	<TextBlock Text="{Binding Name, Mode=TwoWay}"/>
	<TextBlock Text="{Binding Price, Mode=TwoWay}"/>
	</StackPanel>
	</DataTemplate>
	</ListBox.ItemTemplate>
	</ListBox>
	<Button Margin="10" Command="{Binding DeleteAllMoviesCommand}" Content="Clear all"/>
	</StackPanel>
	</Grid>
	</Page>

view raw Updated MovieListView.xaml hosted with ❤ by GitHub

結果示範: