popup message box in xamarin.form

Question

Co próbuję zrobić jest podobny do DisplayAlert, wyskakuj stronę wyświetlającą, która zawiera obraz, zawartość i mały przycisk zamykania w prawym górnym rogu. Strona wyświetlacza nie powinna obejmować całego telefonu, ale tylko około 80% interfejsu telefonu, tło pozostaje jako strona nadrzędna.

Próbuję odtwarzać z PushModalAsync i PopModalAsync, jednak bez powodzenia. Wynik nie jest taki, jak się spodziewałem.

Zasadniczo mam listview, gdy element jest wybrany z ekranu będzie wymagać popUpMethod:

list.ItemSelected += MyMethod; 

wewnątrz myMethod wezwę popUpPage

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

i to jest moja metoda 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; 
} 

Próbuję ustawić wysokość i szerokość wewnątrz mojej strony podręcznej. Jednak nadal obejmuje cały ekran, który nie jest tym, czego chcę. daj mi znać, jeśli potrzebujesz dodatkowych informacji, dziękuję.

P/S: i zaprojektowali go w xamarin.Form (przenośny)

Answer 1

PushModalAsync będzie naciskać stronę na bieżącej stronie. Zamiast tego użyj tej samej strony, dodaj jedną ramkę. skonfiguruj ramkę przy użyciu dowolnych elementów sterujących. 1. Ustaw ramkę Widoczność na fałsz i na elemencie Wybrana klatka make widoczna. LUB 2. Dodaj ramkę dynamicznie w ItemSelected (nie próbowałem drugiego podejścia.).

Answer 2

Możesz użyć XLabs-PopUp-Control. Za pomocą tej kontroli można wyświetlić stronę PopUp ze strony, w której można określić rozmiar bez problemów. Używam go na różnych stronach. Link how to use it

Link how to install and setup XLabs

Answer 3

jak zmienić swój kod w następujący sposób.

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

Można tworzyć niestandardowe pop-up, aby osiągnąć ten cel w Xamarin.Forms

Oto zwyczaj ContentView które stworzyłem. Używa on BoxView, aby nadać wygląd blaknięciu tła i używa Frame do dodawania cienia do wyskakującego okienka.

Używam również animacji, aby pop-up wyglądał tak, jakby wyskakiwał z ekranu!

Próbka App

Kod dla tej przykładowej aplikacji jest dostępny na Github:

https://github.com/brminnick/InvestmentDataSampleApp

Code Snippet

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); 
     }); 
    } 
}