Xamarin.Forms 導航抽屜頁面的資料綁定與抽屜面板控制

在這份筆記中，將會記錄下底下三件事情是如何做到的

• 如何透過 Data Binding 在 ViewModel 內來設定導航頁面中的頁面名稱
• 如何得知抽屜的設計尺寸與內容頁面的設計尺寸
• 最後，如何在詳細頁面的 ViewModel 內，關閉與顯示導航抽屜面

參考專案
https://github.com/vulcanlee/XF-Course/tree/master/DrawerPresent

透過 Data Binding 在 ViewModel 內來設定導航頁面中的頁面名稱

先在 ViewModel 定義一個字串型別的屬性(Property)
在 Detail 頁面的 ContentPage 根結點的屬性 Title，使用 Data Binding 綁定 ViewModel 內的屬性。Title="{Binding PageTitle}"
之後，只要在 ViewModel 內去變更綁定的屬性值，頁面上的顯示名稱就會跟著變更了。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="PrismUnityApp1.Views.MainPage"
             x:Name="contentPage"
             Title="{Binding PageTitle}">

得知抽屜的設計尺寸與內容頁面的設計尺寸

在 Master 與 Detail 的 ContentPage 頁面中，使用底下 XAML 宣告標記，其中， currentPage 將會指向當時所在的 ContentPage
底下為模擬器的執行結果
Android
iOS

UWP for Mobile

    <StackLayout 
        Orientation="Vertical" Spacing="0" 
        HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="{Binding Title}" />
        <Label Text="{Binding Source={x:Reference currentPage}, Path=Width, StringFormat='Page: {0:F0}'}" FontSize="Large" />
        <Label Text="{Binding Source={x:Reference currentPage}, Path=Height, StringFormat=' &#x00D7; {0:F0}'}" FontSize="Large" />

        <Button Text="顯示抽屜" Command="{Binding 顯示抽屜Command}" />
    </StackLayout>

在詳細頁面的 ViewModel 內，關閉與顯示導航抽屜面

想要在 Detail 頁面內來控制 Master 的導航抽屜是要開啟還是要關閉，這個時候，就需要透過 Prism 提供的 IEventAggregator 介面，使用建構式注入的方式，取得實際的事件處理物件，就可以透過這個物件，在不同頁面進行非同步的訊息通訊。也就是，在 Detail 頁面的 ViewModel，將會 Publish 方法，送出一個事件訊息，而在 Master 頁面的 ViewModel ViewModel 內，就可以使用 Subscribe 方法來訂閱這個事件，一旦收到了要關閉或者展開抽屜面版的時候，就可以變更 ViewModel 內的特定 Property，而 該 Property 會綁定到 MasterDetailPage 的 IsPresented 屬性。
綁定方式如下：

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                  prism:ViewModelLocator.AutowireViewModel="True"
                  x:Name="masterPage"
                  x:Class="PrismUnityApp1.Views.MDPage"
                  IsPresented="{Binding IsPresented, Mode=TwoWay}"
                  >

在 Detail 頁面，可以發出要顯示抽屜的訊息

       private readonly IEventAggregator _eventAggregator;
       public MainPageViewModel(IEventAggregator eventAggregator)
        {

            _eventAggregator = eventAggregator;
            顯示抽屜Command = new DelegateCommand(()=>
            {
                _eventAggregator.GetEvent<OpenDrawer>().Publish(true);
            });
        }

在 Master 頁面，可以訂閱這個事件，並且更新相關屬性

        private readonly IEventAggregator _eventAggregator;
        public MDPageViewModel(IEventAggregator eventAggregator)
        {

            _eventAggregator = eventAggregator;

            _eventAggregator.GetEvent<OpenDrawer>().Subscribe(
                (s) =>
                {
                    IsPresented = s;
                });
        }