silverlight開發實例(Prism+MVVM+RIA)(三)--創建頁面導航

在實現了頁面登陸後,下面接着就是關於相應用戶操作了!

首先在此項目中Shell頁定義了兩個Region區域,一個NavRegion導航區域,一個MainContentRegion內容區域。導航區域是爲了能夠快速在視圖間切換,內容區域自然是操作的界面了。


如圖,下方是各模塊的導航,在點擊模塊後會加載該模塊對應的功能菜單。在上圖右上角加入了兩個導航按鈕,分別爲“上一項”,“下一項”用來切換視圖。

導航的實現:

1、首先目前還沒有添加其他模塊僅還在Shell模塊下進行測試,測試時加入的視圖能夠正確導航,至於新增模塊是否可以導航,今後再進一步測試。

2、註冊模塊需要在內容頁上加載的視圖,此例是在完成用戶登錄後開始註冊視圖,如果是在模塊中註冊可以再模塊初始化函數中註冊即可。

[ImportingConstructor]
        public ShellViewModel(IEventAggregator _eventAggregator, IRegionManager _regionManager,ModuleService _moduleService)
        {
            eventAggregator = _eventAggregator;
            regionManager = _regionManager;
            this.eventAggregator.GetEvent<CommandEvent>().Subscribe(OnLoginComplete, ThreadOption.UIThread, true, p => p.CommandName == "LoginSucceed");
            _moduleService.GetModuleListQueryComplete += new EventHandler<EntityResultsArgs<T_SYS_MODULE>>(_moduleService_GetModuleListQueryComplete);
            _moduleService.GetModuleListAsync();
            
        }

 void OnLoginComplete(CommandEventPara para)
        {
            if (para.Entity is Exception)
            {

            }
            else
            {
                if (this.regionManager.Regions[RegionNames.NavRegion].GetView("NavView") == null)
                    this.regionManager.RegisterViewWithRegion(RegionNames.NavRegion, typeof(NavView)); ;
                if (this.regionManager.Regions[RegionNames.NavRegion].GetView("TestView") == null)
                    this.regionManager.RegisterViewWithRegion(RegionNames.MainContentRegion, typeof(TestView)); ;
                if (this.regionManager.Regions[RegionNames.MainContentRegion].GetView("ApplicationView") == null)
                    this.regionManager.RegisterViewWithRegion(RegionNames.MainContentRegion, typeof(ApplicationView));
                this.regionManager.RequestNavigate(RegionNames.NavRegion, "NavView");
                
            }
        }
3、菜單事件響應則是通過在事件綁定,將選擇的菜單項傳遞給事件函數即可,另外如果有一些複雜參數也可通過事件參數進行傳遞。

private ICommand selectedchanged;
        public ICommand SelectedChanged
        {
            get
            {
                if (selectedchanged == null)
                {
                    selectedchanged = new DelegateCommand<T_SYS_APPLICATION>(OnAppSelectedChanged);
                }
                return selectedchanged;
            }
        }

 void OnAppSelectedChanged(T_SYS_APPLICATION selectedApp)
        {
            if (selectedApp != null && !string.IsNullOrEmpty(selectedApp.SURL))
            {
                
                this.regionManager.RequestNavigate(RegionNames.MainContentRegion, selectedApp.SURL);
                this.eventAggregator.GetEvent<CommandEvent>().Publish(new CommandEventPara() { CommandName = "ApplicationSelectedChanged", Entity = selectedApp });
            }
        }

此例中的CommandEvent,CommandEventPara是自定義的事件及事件參數類,此處需要注意在菜單項被切換時要發出消息以便讓導航頁知道頁面發生了變化。

4、導航頁ViewModel中定義兩個屬性用於說明是否可以向前、向後導航,同時定義導航事件。在此ViewModel的構造中加入頁面變化的消息接收處理。

    [Export]
    public class NavViewModel:MyViewModelBase
    {
        [ImportingConstructor]
        public NavViewModel(IEventAggregator _eventAggregator, IRegionManager _regionManager)
        {
            eventAggregator = _eventAggregator;
            regionManager = _regionManager;
            
            this.MainRegion = regionManager.Regions[RegionNames.MainContentRegion];

            this.eventAggregator.GetEvent<CommandEvent>().Subscribe(OnPageChanged, ThreadOption.UIThread, true, p => p.CommandName == "ModuleChanged");
            this.eventAggregator.GetEvent<CommandEvent>().Subscribe(OnPageChanged, ThreadOption.UIThread, true, p => p.CommandName == "ApplicationSelectedChanged");

        }
        IRegion MainRegion;
        IEventAggregator eventAggregator;
        IRegionManager regionManager;

        #region 綁定屬性
       
        public V_SYS_USERINFO CurrentUser
        {
            get
            {
                
                    return ServiceLocator.Current.GetInstance<UserAccessService>().CurrentUser;
              
            }
          
        }
        public bool CanGoBack
        {
            get
            {
                return this.MainRegion.NavigationService.Journal.CanGoBack;
            }
        }

        public bool CanGoForward
        {
            get
            {
                return this.MainRegion.NavigationService.Journal.CanGoForward;
            }
        }
        #endregion

        #region 私有方法
        void OnPageChanged(CommandEventPara para)
        {
            ResetNavigationButtonState();
        }
        void ResetNavigationButtonState()
        {
            RaisePropertyChanged(() => this.CanGoBack);
            RaisePropertyChanged(() => this.CanGoForward);
        }
        #endregion

        #region 綁定事件
        private ICommand toBack;
        public ICommand ToBack
        {
            get
            {
                if (toBack == null)
                {
                    toBack = new DelegateCommand(OnToBack);
                    
                }
                return toBack;
            }
        }
        void OnToBack()
        {
            this.MainRegion.NavigationService.Journal.GoBack();
            ResetNavigationButtonState();
        }

        private ICommand toForword;
        public ICommand ToForword
        {
            get
            {
                if (toForword == null)
                {
                    toForword = new DelegateCommand(OnToForword);

                }
                return toForword;
            }
        }
        void OnToForword()
        {
            this.MainRegion.NavigationService.Journal.GoForward();
            ResetNavigationButtonState();
        }
        #endregion

    }

將上面的CanGoBack和CanGoForward兩個屬性綁定到導航按鈕的IsEnabled屬性中,同時將ToBack、ToForword兩個事件綁定到導航按鈕的觸發事件中。需要注意的是,只要頁面發生變化要使用ResetNavigationButtonState及時刷新這兩個屬性。

通過以上辦法基本能實現頁面間的導航了!

寫程序不累,做個界面把人折磨的,不會美工的悲哀。。。

待續。。。。。。

發佈了57 篇原創文章 · 獲贊 7 · 訪問量 37萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章