Prism4學習筆記（七）：State-Based Navigation QuickStart

2019-11-11 05:38:46

字體：大中小

來源：轉載

供稿：網友

本節學習了Navigation的一些基本知識，覺得這節比較難。這里講學習和理解點的東西記錄下來。覺得本節應該弄清楚的問題的關鍵詞

(1)CallMethodAction用于事件和行為的綁定。

（2）InteractionRequest<T> 在交互請求時協調ViewModel和View

（3）Notification用于交互式單向通知用戶，所以ViewModel不能預測用戶對Notification中Title和Content的更改

(4)學會自定義行為和操作

（一）在ChatView.xaml，代碼如下

View Code

<Grid Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><Button x:Name="SendMessageButton" Grid.Column="0" Grid.Row="0" Margin="4" VerticalAlignment="Center"AutomationProperties.AutomationId="SendMessageButton"><i:Interaction.Triggers><i:EventTrigger EventName="Click" ><ei:CallMethodAction TargetObject="{Binding DataContext, ElementName=userControl}"MethodName="SendMessage"/></i:EventTrigger></i:Interaction.Triggers>Send Message</Button><GuidanceTools:InfoTipToggleButton VerticalAlignment="Center"Grid.Column="1" Grid.Row="0" Margin="4"><StackPanel MaxWidth="400"><TextBlock TextWrapping="Wrap">This button executes the SendMessage method on the view model,and is only enabled when no other message is being sent. Executing the method causes a child window to be opened to capture the message to send. Accepting the message causes the view modelto send the message to the chat service, which in turnscauses an update on the view model that is represented by showinga progress bar until a confirmation that the message has been sentis issued by the chat service.</TextBlock></StackPanel></GuidanceTools:InfoTipToggleButton><Button Grid.Column="0" Grid.Row="1" Margin="4" Command="{Binding ShowDetailsCommand}" VerticalAlignment="Center"><Button.CommandParameter><sys:Boolean>False</sys:Boolean></Button.CommandParameter>Go Back</Button><GuidanceTools:InfoTipToggleButton VerticalAlignment="Center"Grid.Column="1" Grid.Row="1" Margin="4"><StackPanel MaxWidth="400"><TextBlock TextWrapping="Wrap">This button uses the ShowDetailsCommand, which is only availablewhen a contact has been selected. Executing the command setsone of the 'ShowDetails' and 'ShowContacts' visual states.Transitions to this state are implemented with a flip visual effect.</TextBlock><TextBlock TextWrapping="Wrap">Visual state transitions for the detail visualization mode are triggered by changes in the view model.</TextBlock></StackPanel></GuidanceTools:InfoTipToggleButton ></Grid> 復制代碼

(二)在ChatViewModel.cs

ublic class ChatViewModel : ViewModel{private readonly IChatService chatService;//InteractionRequest<T> 在交互請求時協調ViewModel和View//（1）Raise方法允許ViewModel初始化交互和指定一個對象上下文(類型為T),并且回調方法在交互完成后被調用// 上下文對象允許ViewModel傳遞數據和狀態到View上在用交互期間//(2)如果回調方法被指定,上下文對象將被傳遞回ViewModel,this允許交互期間用戶的任何改變都可以回傳到ViewModelprivate readonly InteractionRequest<SendMessageViewModel> sendMessageRequest;private readonly InteractionRequest<ReceivedMessage> showReceivedMessageRequest;private readonly ObservableCollection<Contact> contacts;private readonly PagedCollectionView contactsView;private readonly ShowDetailsCommandImplementation showDetailsCommand;private bool showDetails;private bool sendingMessage;public ChatViewModel(IChatService chatService){this.contacts = new ObservableCollection<Contact>();this.contactsView = new PagedCollectionView(this.contacts);this.sendMessageRequest = new InteractionRequest<SendMessageViewModel>();this.showReceivedMessageRequest = new InteractionRequest<ReceivedMessage>();this.showDetailsCommand = new ShowDetailsCommandImplementation(this);this.contactsView.CurrentChanged += this.OnCurrentContactChanged;this.chatService = chatService;this.chatService.Connected = true;this.chatService.ConnectionStatusChanged += (s, e) => this.RaisePropertyChanged(() => this.ConnectionStatus);this.chatService.MessageReceived += this.OnMessageReceived;this.chatService.GetContacts(result =>{if (result.Error == null){foreach (var item in result.Result){this.contacts.Add(item);}}});}public ObservableCollection<Contact> Contacts{get { return this.contacts; }}public ICollectionView ContactsView{get { return this.contactsView; }}public IInteractionRequest SendMessageRequest{get { return this.sendMessageRequest; }}public IInteractionRequest ShowReceivedMessageRequest{get { return this.showReceivedMessageRequest; }}public string ConnectionStatus{get{return this.chatService.Connected ? "Available" : "Unavailable";}set{this.chatService.Connected = value == "Available";}}public Contact CurrentContact{get{return this.contactsView.CurrentItem as Contact;}}public bool ShowDetails{get{return this.showDetails;}set{if (this.showDetails != value){this.showDetails = value;this.RaisePropertyChanged(() => this.ShowDetails);}}}public bool SendingMessage{get{return this.sendingMessage;}private set{if (this.sendingMessage != value){this.sendingMessage = value;this.RaisePropertyChanged(() => this.SendingMessage);}}}public ICommand ShowDetailsCommand{get { return this.showDetailsCommand; }}//SendMessage綁定到Send Message按鈕public void SendMessage(){var contact = this.CurrentContact;this.sendMessageRequest.Raise(new SendMessageViewModel(contact, this),sendMessage =>{if (sendMessage.Result.HasValue && sendMessage.Result.Value){this.SendingMessage = true;this.chatService.SendMessage(contact,sendMessage.Message,result =>{this.SendingMessage = false;});}});}private void OnCurrentContactChanged(object sender, EventArgs a){this.RaisePropertyChanged(() => this.CurrentContact);this.showDetailsCommand.RaiseCanExecuteChanged();}private void OnMessageReceived(object sender, MessageReceivedEventArgs a){this.showReceivedMessageRequest.Raise(a.Message);}#region 類ShowDetailsCommandImplementationprivate class ShowDetailsCommandImplementation : ICommand{private readonly ChatViewModel owner;public ShowDetailsCommandImplementation(ChatViewModel owner){this.owner = owner;}public event EventHandler CanExecuteChanged;public bool CanExecute(object parameter){return this.owner.ContactsView.CurrentItem != null;}public void Execute(object parameter){this.owner.ShowDetails = (bool)parameter;}public void RaiseCanExecuteChanged(){var handler = this.CanExecuteChanged;if (handler != null){handler(this, EventArgs.Empty);}}}#endregion} 復制代碼

(三)在SendMessageModel.cs

//Notification介紹//(1)Notification類支持普通交互請求服務//(2)Notification類是作為對象上下文最基本得類//(3)用于交互請求時通知用戶。//(4)提供了兩個屬性Title和Content被顯示給用戶//(5)通常,通知是單向的,所以Notification在交互期間不能預測用戶將會改變Title和Content//(6)Confirmation類繼承自Notification類和添加了第三個屬性Cofirmed--被用于表示用戶已經確認或者拒絕操作//(7)Confirmation類用于實現MessageBox樣式交互，當用戶想獲取yes/no相應從呼呼那里。//(8)你自定一個上下文類繼承自Notification封裝成無論是支持交互的數據還是狀態你需要public class SendMessageViewModel : Notification, INotifyPropertyChanged{private readonly Contact contact;private readonly ChatViewModel parent;private bool? result;private string message;public SendMessageViewModel(Contact contact, ChatViewModel parent){this.contact = contact;this.parent = parent;}public Contact Contact{get { return this.contact; }}public string Message{get{return this.message;}set{if (value != this.message){this.message = value; RaisePropertyChanged(() => this.Message);}}}public bool? Result{get{return this.result;}set{if (value != this.result){this.result = value;RaisePropertyChanged(() => this.Result);}}}public event PropertyChangedEventHandler PropertyChanged;protected virtual void OnPropertyChanged(string propertyName){PropertyChangedEventHandler handler = PropertyChanged;if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));}private void RaisePropertyChanged<T>(Expression<Func<T>> lambda){var name = PropertySupport.ExtractPropertyName<T>(lambda);OnPropertyChanged(name);}} 復制代碼

(四)在Infrastructure文件夾下的ViewModel.cs代碼如下：

/// <summary>/// Base class for view models./// </summary>/// <remarks>/// This class provides basic support for implementing the <see cref="INotifyPropertyChanged"/> interface./// </remarks>public class ViewModel : INotifyPropertyChanged{/// <summary>/// Raised when a property on this object has a new value./// </summary>public event PropertyChangedEventHandler PropertyChanged;/// <summary>/// Raises this object's PropertyChanged event./// </summary>/// <typeparam name="T">The type of the property that has a new value</typeparam>/// <param name="propertyExpresssion">A Lambda expression representing the property that has a new value.</param>protected void RaisePropertyChanged<T>(Expression<Func<T>> propertyExpresssion){var propertyName = PropertySupport.ExtractPropertyName(propertyExpresssion);this.RaisePropertyChanged(propertyName);}/// <summary>/// Raises this object's PropertyChanged event./// </summary>/// <param name="propertyName">The property that has a new value.</param>protected virtual void RaisePropertyChanged(string propertyName){var handler = this.PropertyChanged;if (handler != null){handler(this, new PropertyChangedEventArgs(propertyName));}}protected void ExecuteOnUIThread(Action action){var dispatcher = Deployment.Current.Dispatcher;if (dispatcher.Check access()){action();}else{dispatcher.BeginInvoke(action);}}} 復制代碼

（五）在Infrastructure文件夾下的Behavior文件夾下，有自己定義行為(Behavior)和操作（Action）

（1） RelocatePopupBehavior行為類

//該自定義行為：確保彈出串口定位在父視圖的右下角/// <summary>/// Behavior that ensures a popup is located at the bottom-right corner of its parent./// </summary>public class RelocatePopupBehavior : Behavior<Popup>{protected override void OnAttached(){base.OnAttached();this.AssociatedObject.Opened += this.OnPopupOpened;this.AssociatedObject.Closed += this.OnPopupClosed;}protected override void OnDetaching(){this.AssociatedObject.Opened -= this.OnPopupOpened;this.AssociatedObject.Closed -= this.OnPopupClosed;this.DetachSizeChangeHandlers();base.OnDetaching();}private void OnPopupOpened(object sender, EventArgs e){this.UpdatePopupOffsets();this.AttachSizeChangeHandlers();}private void OnPopupClosed(object sender, EventArgs e){this.DetachSizeChangeHandlers();}private void AttachSizeChangeHandlers(){var child = this.AssociatedObject.Child as FrameworkElement;if (child != null){child.SizeChanged += this.OnChildSizeChanged;}var parent = this.AssociatedObject.Parent as FrameworkElement;if (parent != null){parent.SizeChanged += this.OnParentSizeChanged;}}private void DetachSizeChangeHandlers(){var child = this.AssociatedObject.Child as FrameworkElement;if (child != null){child.SizeChanged -= this.OnChildSizeChanged;}var parent = this.AssociatedObject.Parent as FrameworkElement;if (parent != null){parent.SizeChanged -= this.OnParentSizeChanged;}}private void OnChildSizeChanged(object sender, EventArgs e){this.UpdatePopupOffsets();}private void OnParentSizeChanged(object sender, EventArgs e){this.UpdatePopupOffsets();}private void UpdatePopupOffsets(){if (this.AssociatedObject != null){var child = this.AssociatedObject.Child as FrameworkElement;var parent = this.AssociatedObject.Parent as FrameworkElement;if (child != null && parent != null){var anchor = new Point(parent.ActualWidth, parent.ActualHeight);this.AssociatedObject.HorizontalOffset = anchor.X - child.ActualWidth;this.AssociatedObject.VerticalOffset = anchor.Y - child.ActualHeight;}}}} 復制代碼

（2） ShowNotificationAction.cs定義了行為

/行為是功能單元容器。有兩種類型的行為//(1)不具有調用概念的行為，以附加的方式添加到對象上//(2)觸發器和動作更接近調用模型//你可以重復利用事件的句柄或者粗發起到UI上。namespace StateBasedNavigation.Infrastructure.Behaviors{//這個自定義行為允許ViewModel推一個通知到目標元素UI上，通過用戶接受在在右下角處 public class ShowNotificationAction : TargetedTriggerAction<FrameworkElement>{//注冊依賴屬性NotificationTimeoutPropertypublic static readonly DependencyProperty NotificationTimeoutProperty =DependencyProperty.Register("NotificationTimeout", typeof(TimeSpan), typeof(ShowNotificationAction), new PropertyMetadata(newTimeSpan(0, 0, 5)));private ObservableCollection<object> notifications;public ShowNotificationAction(){ this.notifications = new ObservableCollection<object>();}public TimeSpan NotificationTimeout{get { return (TimeSpan)GetValue(NotificationTimeoutProperty); }set { SetValue(NotificationTimeoutProperty, value); }}protected override void OnTargetChanged(FrameworkElement oldTarget, FrameworkElement newTarget){base.OnTargetChanged(oldTarget, newTarget);if (oldTarget != null){this.Target.ClearValue(FrameworkElement.DataContextProperty);}if (newTarget != null){this.Target.DataContext = this.notifications;}}protected override void Invoke(object parameter){var args = parameter as InteractionRequestedEventArgs;if (args == null){return;}var notification = args.Context;this.notifications.Insert(0, notification);var timer = new DispatcherTimer { Interval = this.NotificationTimeout };EventHandler timerCallback = null;timerCallback =(o, e) =>{timer.Stop();timer.Tick -= timerCallback;this.notifications.Remove(notification);};timer.Tick += timerCallback;timer.Start();args.Callback();}}} 復制代碼

(七 )項目組織結構及運行截圖