xamarin.form中的彈出消息框

Question

我想要做的與DisplayAlert類似，彈出一個包含圖像，內容和右上角的小關閉按鈕的顯示頁面。顯示頁面不應該覆蓋整個手機，而只是手機用戶界面的80％左右，背景仍然是父頁面。

我想玩PushModalAsync和PopModalAsync，但沒有運氣。輸出不是我所期望的。

基本上，我有一個列表視圖，當項目從屏幕上選擇它，就需要popUpMethod：

list.ItemSelected += MyMethod; 

內的MyMethod我會打電話給popUpPage

async void MyMethod(object sender, SelectedItemChangedEventArgs e){ 
Content = await PopUpPage(); 
} 

，這是我PopUpPage方法

private async Task<StackLayout> PopUpPage() 
{ 
    StackLayout objPopUp = new StackLayout() { HeightRequest = 100, WidthRequest= 100, VerticalOptions = LayoutOptions.CenterAndExpand}; 

    Label lblMessage = new Label(); 
    lblMessage.Text = "Welcome"; 

    objPopUp.Children.Add(lblMessage); 

    return objPopUp; 
} 

我想設置我的彈出頁面內的高度和寬度。但是，它仍然覆蓋了整個屏幕，這不是我想要的。讓我知道是否需要任何充值信息，謝謝。

P/S：我設計的xamarin.Form（便攜式）

Answer 1

PushModalAsync會推頁中有超過當前網頁。而是使用相同的頁面在其中添加一個框架。用你想要的任何控制配置幀。 1.設置框架可見性爲false，並在ItemSelected使框架可見。 OR 2.在ItemSelected上動態添加框架（尚未嘗試第二種方法）。

Answer 2

您可以使用XLabs-PopUp-Control。 使用該控件，您可以顯示一個PopUp頁面，您可以在其中定義大小而不會出現任何問題。我在不同的頁面上使用它。 Link how to use it

Link how to install and setup XLabs

Answer 3

更改代碼就像如下。

private async Task<StackLayout> PopUpPage() { 
    StackLayout objPopUp = new StackLayout() {HeightRequest = 0, WidthRequest = 0, VerticalOptions = LayoutOptions.Center, Padding = 10 }; 
    Label lblMessage = new Label(); 
    lblMessage.Text = "Welcome"; 
    objPopUp.Children.Add (lblMessage); 
    return objPopUp; 
} 

Answer 4

您可以創建一個自定義彈出的Xamarin.Forms

做到這一點這是一個自定義ContentView，我創建的。它使用BoxView給出背景淡化的外觀，並使用Frame向彈出式窗口添加陰影。

我還使用動畫使自定義彈出窗口看起來好像正在跳出屏幕！

示例應用程序

這個示例應用程序的代碼可以在Github上：

https://github.com/brminnick/InvestmentDataSampleApp

代碼段

public class WelcomeView : ContentView 
{ 
    readonly BoxView _backgroundOverlayBoxView; 
    readonly Frame _overlayFrame; 
    readonly StackLayout _textAndButtonStack; 

    readonly RelativeLayout _relativeLayout; 

    public WelcomeView() 
    { 
     const string titleText = "Welcome"; 
     const string bodyText = "Enjoy InvestmentDataSampleApp"; 
     const string okButtonText = "Ok, thanks!"; 

     var whiteWith75Opacity = new Color(255, 255, 255, 0.75); 
     _backgroundOverlayBoxView = new BoxView 
     { 
      BackgroundColor = whiteWith75Opacity 
     }; 
     _backgroundOverlayBoxView.Opacity = 0; 

     _overlayFrame = new Frame 
     { 
      HasShadow = true, 
      BackgroundColor = Color.White 
     }; 
     _overlayFrame.Scale = 0; 

     var titleLabel = new Label 
     { 
      FontAttributes = FontAttributes.Bold, 
      Text = titleText, 
      HorizontalTextAlignment = TextAlignment.Center 
     }; 

     var bodyLabel = new Label 
     { 
      Text = bodyText, 
      HorizontalTextAlignment = TextAlignment.Center 
     }; 

     var blackWith75PercentOpacity = new Color(0, 0, 0, 0.75); 
     var okButton = new Button 
     { 
      BackgroundColor = blackWith75PercentOpacity, 
      TextColor = Color.White, 
      BorderWidth = 1, 
      BorderColor = blackWith75PercentOpacity, 
      FontAttributes = FontAttributes.Bold, 
      Margin = new Thickness(5), 
      Text = okButtonText 
     }; 
     okButton.Clicked += (sender, e) => 
     { 
      Device.BeginInvokeOnMainThread(async() => 
      { 
       await this.FadeTo(0); 
       this.IsVisible = false; 
       this.InputTransparent = true; 
      }); 
     } 

     _textAndButtonStack = new StackLayout 
     { 
      HorizontalOptions = LayoutOptions.CenterAndExpand, 
      Spacing = 20, 
      Children = { 
       titleLabel, 
       bodyLabel, 
       okButton 
      } 
     }; 
     _textAndButtonStack.Scale = 0; 

     _relativeLayout = new RelativeLayout(); 
     Func<RelativeLayout, double> gettextAndButtonStackHeight = (p) => _textAndButtonStack.Measure(_relativeLayout.Width, _relativeLayout.Height).Request.Height; 
     Func<RelativeLayout, double> gettextAndButtonStackWidth = (p) => _textAndButtonStack.Measure(_relativeLayout.Width, _relativeLayout.Height).Request.Width; 


     _relativeLayout.Children.Add(_backgroundOverlayBoxView, 
      Constraint.Constant(-10), 
      Constraint.Constant(0), 
      Constraint.RelativeToParent(parent => parent.Width + 20), 
      Constraint.RelativeToParent(parent => parent.Height) 
     ); 
     _relativeLayout.Children.Add(_overlayFrame, 
      Constraint.RelativeToParent(parent => parent.Width/2 - gettextAndButtonStackWidth(parent)/2 - 20), 
      Constraint.RelativeToParent(parent => parent.Height/2 - gettextAndButtonStackHeight(parent)/2 - 10), 
      Constraint.RelativeToParent(parent => gettextAndButtonStackWidth(parent) + 30), 
      Constraint.RelativeToParent(parent => gettextAndButtonStackHeight(parent) + 30) 
     ); 

     _relativeLayout.Children.Add(_textAndButtonStack, 
      Constraint.RelativeToView(_overlayFrame, (parent, view) => view.X + 15), 
      Constraint.RelativeToView(_overlayFrame, (parent, view) => view.Y + 15) 
     ); 

     if (Device.OS == TargetPlatform.Android) 
     { 
      _overlayFrame.IsVisible = false; 
      _textAndButtonStack.BackgroundColor = whiteWith90Opacity; 
     } 

     Content = _relativeLayout; 
    } 

    public void DisplayView() 
    { 
     Device.BeginInvokeOnMainThread(async() => 
     { 
      var animationList = new List<Task> 
      { 
       _backgroundOverlayBoxView.FadeTo(1,AnimationConstants.WelcomeViewAnimationTime), 
       _textAndButtonStack.ScaleTo(AnimationConstants.WelcomeViewMaxSize, AnimationConstants.WelcomeViewAnimationTime), 
       _overlayFrame.ScaleTo(AnimationConstants.WelcomeViewMaxSize,AnimationConstants.WelcomeViewAnimationTime) 
      }; 
      await Task.WhenAll(animationList); 

      animationList = new List<Task> 
      { 
       _textAndButtonStack.ScaleTo(AnimationConstants.WelcomeViewNormalSize, AnimationConstants.WelcomeViewAnimationTime), 
       _overlayFrame.ScaleTo(AnimationConstants.WelcomeViewNormalSize, AnimationConstants.WelcomeViewAnimationTime) 
      }; 
      await Task.WhenAll(animationList); 
     }); 
    } 
}