Xamarin.Forms 警告與動作表對話窗
這份筆將將會整理出 警告 Alert 對話窗與 動作表 Action Sheet 對話窗的使用；由於 Xamarin.Forms 提供了這兩種方法的使用 ( DisplayAlert / DisplayActionSheet )，不過，這兩種方法卻是定義在 Page 類別中，因此，這兩個方法僅能夠在程式碼後置 (code-behind) 的地方使用。
若您是採用了 Prism 的框架來進行開發 Xamarin.Forms 應用程式，根據 MVVM 的規範，您應該要在 檢視模型(ViewModel) 內來使用兩個方法，而在檢視模型內，因為 MVVM 的規範，是無法存取到 檢視 內的物件(當然，也是有辦法的，不過，有點違反 MVVM 設計模式了)，因此，Prism 提供了 IPageDialogService 介面，您可以在建構式內注入這個介面，並取得其執行個體(Instance)，就可以透過這個執行個體進行這兩個對話窗的操作了。
這份筆記的範例專案可以底下網址取得
IPageDialogService 介面，您可以在建構式內注入這個介面，並取得其執行個體(Instance)，就可以透過這個執行個體進行這兩個對話窗的操作了。傳統的 Xamarin.Forms 的用法
-
在範例專案中的 檢視(View)，定義了這個應用程式所有的使用者介面，其 XAML 宣告如下，而這個範例的執行畫面也如下圖。
-
這個頁面中，定義了四個按鈕與四個標籤(Label)，前兩個按鈕的按下事件將會定義在 code-behind 程式碼內，後兩個按鈕的按下事件，將會透過 ICommand 資料繫結到 檢視模型內的
DelegateCommand 物件。
<?xml version="1.0" encoding="utf-8" ?>
<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="XFAlert.Views.MainPage"
Title="MainPage">
<StackLayout
HorizontalOptions="Center" VerticalOptions="Center">
<Button
x:Name="btnAlert"
Text="顯示 Xamarin.Forms 警告視窗"
/>
<Label
x:Name="lblXF選擇結果"
Text="Xamarin.Forms 選擇結果"
/>
<Button
x:Name="btnActionSheet"
Text="顯示 Xamarin.Forms 動作表單"
/>
<Label
x:Name="lblXF動作表單選擇結果"
Text="Xamarin.Forms 動作表單 選擇結果"
/>
<Button
Text="顯示 Prism 警告視窗"
Command="{Binding PrismAlertCommand}"
/>
<Label
Text="{Binding PrismAlert輸出結果}"
/>
<Button
Text="顯示 Prism 動作表單"
Command="{Binding PrismActionSheetCommand}"
/>
<Label
Text="{Binding PrismActionSheet輸出結果}"
/>
</StackLayout>
</ContentPage>
-
MainPage.xaml 的 code-behind 定義如下：
-
btnAlert.Clicked 事件展示了 DisplayAlert 的用法
-
btnActionSheet.Clicked 事件展示了 DisplayActionSheet 的用法
using Xamarin.Forms;
namespace XFAlert.Views
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
btnAlert.Clicked += async (s, e) =>
{
await DisplayAlert("警告", "您確定要繼續執行嗎?", "確定");
bool 選擇結果 = await DisplayAlert("通知", "您要開始下載這個檔案嗎?", "是", "否");
lblXF選擇結果.Text = 選擇結果.ToString();
};
btnActionSheet.Clicked += async (s, e) =>
{
var 選擇結果 = await DisplayActionSheet("請選擇您要分享的目的應用程式?", "取消", "Google+", "Email", "Twitter", "Facebook");
lblXF動作表單選擇結果.Text = 選擇結果;
};
}
}
}
在範例專案中的 檢視(View)，定義了這個應用程式所有的使用者介面，其 XAML 宣告如下，而這個範例的執行畫面也如下圖。
這個頁面中，定義了四個按鈕與四個標籤(Label)，前兩個按鈕的按下事件將會定義在 code-behind 程式碼內，後兩個按鈕的按下事件，將會透過 ICommand 資料繫結到 檢視模型內的
DelegateCommand 物件。<?xml version="1.0" encoding="utf-8" ?>
<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="XFAlert.Views.MainPage"
Title="MainPage">
<StackLayout
HorizontalOptions="Center" VerticalOptions="Center">
<Button
x:Name="btnAlert"
Text="顯示 Xamarin.Forms 警告視窗"
/>
<Label
x:Name="lblXF選擇結果"
Text="Xamarin.Forms 選擇結果"
/>
<Button
x:Name="btnActionSheet"
Text="顯示 Xamarin.Forms 動作表單"
/>
<Label
x:Name="lblXF動作表單選擇結果"
Text="Xamarin.Forms 動作表單 選擇結果"
/>
<Button
Text="顯示 Prism 警告視窗"
Command="{Binding PrismAlertCommand}"
/>
<Label
Text="{Binding PrismAlert輸出結果}"
/>
<Button
Text="顯示 Prism 動作表單"
Command="{Binding PrismActionSheetCommand}"
/>
<Label
Text="{Binding PrismActionSheet輸出結果}"
/>
</StackLayout>
</ContentPage>
MainPage.xaml 的 code-behind 定義如下：
btnAlert.Clicked 事件展示了 DisplayAlert 的用法btnActionSheet.Clicked 事件展示了 DisplayActionSheet 的用法using Xamarin.Forms;
namespace XFAlert.Views
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
btnAlert.Clicked += async (s, e) =>
{
await DisplayAlert("警告", "您確定要繼續執行嗎?", "確定");
bool 選擇結果 = await DisplayAlert("通知", "您要開始下載這個檔案嗎?", "是", "否");
lblXF選擇結果.Text = 選擇結果.ToString();
};
btnActionSheet.Clicked += async (s, e) =>
{
var 選擇結果 = await DisplayActionSheet("請選擇您要分享的目的應用程式?", "取消", "Google+", "Email", "Twitter", "Facebook");
lblXF動作表單選擇結果.Text = 選擇結果;
};
}
}
}
Prism 提供的功能
-
底下為 MainPage 的檢視模型程式碼
-
Prism 提供了
IPageDialogService 頁面，讓您可以使用者兩個對話窗功能，因此，您需要透過建構式注入的方法，取得這個介面的執行個體。
-
您也需要定義兩個
DelegateCommand 屬性，用於資料繫結到 XAML 上的 Button.Command 屬性上。
-
另外，也定義了兩個
string 的屬性，並且要實作出 INotifyPropertyChanged 介面的功能，在這裡使用的是 SetProperty
-
不論是使用 Xamarin.Forms 提供的方法或者 Prism 提供的方法，都需要使用非同步的方式來呼叫。
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Services;
using System;
using System.Collections.Generic;
using System.Linq;
namespace XFAlert.ViewModels
{
public class MainPageViewModel : BindableBase, INavigationAware
{
public IPageDialogService _dialogService { get; set; }
public DelegateCommand PrismAlertCommand { get; set; }
public DelegateCommand PrismActionSheetCommand { get; set; }
#region PrismAlert輸出結果
private string _PrismAlert輸出結果;
public string PrismAlert輸出結果
{
get { return _PrismAlert輸出結果; }
set { SetProperty(ref _PrismAlert輸出結果, value); }
}
#endregion
#region PrismActionSheet輸出結果
private string _PrismActionSheet輸出結果;
public string PrismActionSheet輸出結果
{
get { return _PrismActionSheet輸出結果; }
set { SetProperty(ref _PrismActionSheet輸出結果, value); }
}
#endregion
public MainPageViewModel(IPageDialogService dialogService)
{
_dialogService = dialogService;
PrismAlertCommand = new DelegateCommand(PrismAlert);
PrismActionSheetCommand = new DelegateCommand(PrismActionSheet);
PrismAlert輸出結果 = "Prism 選擇結果";
PrismActionSheet輸出結果 = "Prism 動作表單 選擇結果";
}
private async void PrismAlert()
{
await _dialogService.DisplayAlertAsync("警告", "您確定要繼續執行嗎?", "確定");
bool 選擇結果 =await _dialogService.DisplayAlertAsync("通知", "您要開始下載這個檔案嗎?", "是", "否");
PrismAlert輸出結果 = 選擇結果.ToString();
}
private async void PrismActionSheet()
{
var 選擇結果 = await _dialogService.DisplayActionSheetAsync("請選擇您要分享的目的應用程式?", "取消", "Google+", "Email", "Twitter", "Facebook");
PrismActionSheet輸出結果 = 選擇結果;
}
public void OnNavigatedFrom(NavigationParameters parameters)
{
}
public void OnNavigatedTo(NavigationParameters parameters)
{
}
}
}
底下為 MainPage 的檢視模型程式碼
Prism 提供了
IPageDialogService 頁面，讓您可以使用者兩個對話窗功能，因此，您需要透過建構式注入的方法，取得這個介面的執行個體。
您也需要定義兩個
DelegateCommand 屬性，用於資料繫結到 XAML 上的 Button.Command 屬性上。
另外，也定義了兩個
string 的屬性，並且要實作出 INotifyPropertyChanged 介面的功能，在這裡使用的是 SetProperty
不論是使用 Xamarin.Forms 提供的方法或者 Prism 提供的方法，都需要使用非同步的方式來呼叫。
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Services;
using System;
using System.Collections.Generic;
using System.Linq;
namespace XFAlert.ViewModels
{
public class MainPageViewModel : BindableBase, INavigationAware
{
public IPageDialogService _dialogService { get; set; }
public DelegateCommand PrismAlertCommand { get; set; }
public DelegateCommand PrismActionSheetCommand { get; set; }
#region PrismAlert輸出結果
private string _PrismAlert輸出結果;
public string PrismAlert輸出結果
{
get { return _PrismAlert輸出結果; }
set { SetProperty(ref _PrismAlert輸出結果, value); }
}
#endregion
#region PrismActionSheet輸出結果
private string _PrismActionSheet輸出結果;
public string PrismActionSheet輸出結果
{
get { return _PrismActionSheet輸出結果; }
set { SetProperty(ref _PrismActionSheet輸出結果, value); }
}
#endregion
public MainPageViewModel(IPageDialogService dialogService)
{
_dialogService = dialogService;
PrismAlertCommand = new DelegateCommand(PrismAlert);
PrismActionSheetCommand = new DelegateCommand(PrismActionSheet);
PrismAlert輸出結果 = "Prism 選擇結果";
PrismActionSheet輸出結果 = "Prism 動作表單 選擇結果";
}
private async void PrismAlert()
{
await _dialogService.DisplayAlertAsync("警告", "您確定要繼續執行嗎?", "確定");
bool 選擇結果 =await _dialogService.DisplayAlertAsync("通知", "您要開始下載這個檔案嗎?", "是", "否");
PrismAlert輸出結果 = 選擇結果.ToString();
}
private async void PrismActionSheet()
{
var 選擇結果 = await _dialogService.DisplayActionSheetAsync("請選擇您要分享的目的應用程式?", "取消", "Google+", "Email", "Twitter", "Facebook");
PrismActionSheet輸出結果 = 選擇結果;
}
public void OnNavigatedFrom(NavigationParameters parameters)
{
}
public void OnNavigatedTo(NavigationParameters parameters)
{
}
}
}
