Windows Phone 系列- Simple MVVM Navigation 页面导航的实现

在wp7开发中

step1 :建立uri映射，如下

在app.xaml加入

 <Application.Resources>
        <Locators:WindowsPhoneViewModelLocator x:Key="Locator" />

        <!-- STEP: Create UriMapper -->
        <navigation:UriMapper x:Key="UriMapper">
            <navigation:UriMapper.UriMappings>
                <navigation:UriMapping Uri="" MappedUri="/MainPage.xaml"/>
                <navigation:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
            </navigation:UriMapper.UriMappings>
        </navigation:UriMapper>
    </Application.Resources>

复制代码

 

step 2，在代码中设置uri

在app.xaml.cs的CompleteInitializePhoneApplication方法中加入

// STEP1: Set frame's UriMapper
var frame = (PhoneApplicationFrame)Current.RootVisual;
frame.UriMapper = (UriMapper)Current.Resources["UriMapper"];

复制代码

 

 

step3,实现导航接口

   // STEP 3: Create a MockNavigator that Implements System.Windows.Controls.INavigate
    public class MockNavigator : INavigator
    {
        public void NavigateTo(string pageName)
        {
            Debug.WriteLine("Navigating to " + pageName);
        }
    }

复制代码

step 4,定义导航名称：

 // STEP 4: set page name
    public class PageNames
    {
        public const string Customer = "CustomerView";
        public const string Page2 = "Page2";
    }

复制代码

 

step 5 传送导航器:

     public CustomerViewModel CustomerViewModel
        {
            get
            {
                // Specify service agent
                ICustomerServiceAgent serviceAgent = new MockCustomerServiceAgent();

                //STEP 5: Create navigator
                INavigator navigator = CreateNavigator();

                // Create ViewModel passing service agent
                return new CustomerViewModel(serviceAgent, navigator);
            }

复制代码

step 6:添加导航属性到view model

    // STEP 6: Add an INavigate property to CustomerViewModel
        public INavigator Navigator { get; set; }

复制代码

step 7:

   // STEP 7: Ctor that accepts ICustomerServiceAgent and INavigator
        public CustomerViewModel(ICustomerServiceAgent serviceAgent, INavigator navigator)
        {
            this.serviceAgent = serviceAgent;
            this.Navigator = navigator;
        }

复制代码

 

step 8:在view设置导航命令

   <!-- STEP 8: Use EventToCommand to bind Click event to view-model NavigateToPage2 command -->
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                        <mvvm:EventToCommand Command="{Binding NavigateToPage2Command}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>

复制代码

 

step 9:在view model创建导航命令

 // STEP 9: Create NavigateToPage2Command
        private DelegateCommand navigateToPage2Command;
        public DelegateCommand NavigateToPage2Command
        {
            get
            {
                return navigateToPage2Command ?? (navigateToPage2Command
                    = new DelegateCommand(NavigateToPage2));
            }
            private set { navigateToPage2Command = value; }
        }

复制代码

step 10:添加导航方法，导航到指定的页面。

// STEP 10: Add a Navigate method accepting a page name
        public void Navigate(string pageName)
        {
            Debug.Assert(Navigator != null, "INavigator not set");
            Navigator.NavigateTo(pageName);
        }

复制代码

完。

 

总结：通过对 simple mvvm的使用，以下几点

1.需要用到URImapper,

2.导航可以实现不同的接口，灵活

3.导航在使用时，可以在直接创建navigator

如：

public void InitNavigator()
{
INavigator navigator = new Navigator();
this.Navigator = navigator;
}

4.导航如果有参数，则需要在各个view model中切换，这时可以发送消息。（这一点，如果有更好的方法请留言告诉我，谢谢）。

作者：johnny 出处：http://www.cnblogs.com/sunjunlin 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

http://www.hugwp.com

http://www.hugwp.com