Smobiler實現手機彈窗

前言

在實際項目中有不少場景須要用到彈窗，如圖1

那麼這些彈窗在Smobiler中如何實現呢？

正文

Smobiler實現彈窗有兩種方式：1.MessageBox.Show 2.ShowDialog和ShowContextDialog。前者適合簡易彈窗，後者適合自定義彈窗。

MessageBox

實現代碼 

MessageBox.Show("這是個彈窗", "彈窗標題", MessageBoxButtons.YesNo, (obj, args) =>
             {
                 if (args.Result == ShowResult.No) { }
             });
效果圖

MessageBox的屬性方法具體說明參照（https://www.smobiler.com/Help/html/T_Smobiler_Core_Controls_MobileMessageBox.htm）  MessageBoxButtons用於指定 MessageBox 上將顯示的按鈕，這種彈窗適合做爲提示框或者二次確認框。

成員名稱	說明
MessageBoxButtons.AbortRetryIgnore	顯示「停止」、「重試」和「忽略」按鈕
MessageBoxButtons.OK	顯示肯定」按鈕
MessageBoxButtons.OKCancel	顯示肯定」和「取消」按鈕按鈕
MessageBoxButtons.RetryCancel	顯示「重試」和「取消」按鈕
MessageBoxButtons.YesNo	顯示「是」和「否」按鈕
MessageBoxButtons. YesNoCancel	顯示是」、「否」和「取消」按鈕

ShowDialog和ShowContextDialog

ShowDialog和ShowContextDialog具體方法詳見文檔（https://www.smobiler.com/Help/html/Methods_T_Smobiler_Core_Controls_MobileLayoutControl.htm） 該方法彈窗樣式是新建UserControl類，在UserControl類實現樣式並經過ShowDialog或者ShowDialog彈出UserControl，ShowDialog與ShowContextDialog用法相同，區別在與ShowContextDialog是用在戶點擊處彈出彈窗，而ShowDialog彈出的位置則是固定的。
接下來實現圖1(b),帶輸入框的彈窗。首先新建一個SmobilerUserControl類，命名爲EditPwd，佈局以下
  
   在Button的press事件中寫入以下代碼

     ShowDialog(new EditPwd());// ShowContextDialog(new EditPwd());
效果圖
     

圖1(c)的彈窗是從底部彈出，首先新建一個SmobilerUserControl類，命名爲TipLayout，佈局仿照圖1(c)，此處省略，具體代碼

/* DialogOptions參數說明
  * justifyAlign: LayoutJustifyAlign.FlexEnd 佈局顯示在最下面
  * backColor: System.Drawing.Color.FromArgb(128, 128, 128, 128) 整個Dialog的背景色
  * padding: Padding.Empty 設置內邊框爲空，就是全屏顯示
  * touchClosed: true 是否點擊空白處關閉
                          */
  DialogOptions footerDialogOptions;
             footerDialogOptions = new DialogOptions(LayoutJustifyAlign.FlexEnd, 128), Padding.Empty, true);
             ShowDialog(new TipLayout(), footerDialogOptions);
效果圖
      默認的DialogOptions爲： JustifyAlign = Center, Padding = 20, BackColor = 200,128,128,128, AnimationType = None, TouchClosed = true，因此ShowDialog(new EditPwd())的彈窗是在中間。