2015-04-20 16 views
6

Yapmaya çalıştığım şey, DisplayAlert'e benzer, açılan görüntü, içerik ve sağ üstte küçük bir kapatma düğmesi içeren bir görüntü sayfasıdır. Görüntü sayfası telefonun tamamını kapsamayabilir ancak telefon kullanıcı arayüzünün yaklaşık% 80'ini oluşturmamalıdır, arka plan ana sayfa olarak kalır.xamarin.form dosyasında açılır ileti kutusu

Şanssız bir şekilde, PushModalAsync ve PopModalAsync ile oynamaya çalışıyorum. Çıktı beklediğim gibi değil.

list.ItemSelected += MyMethod; 

MyMethod içeride i

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

popUpPage arayacak ve bu benim PopUpPage yöntemi

geçerli: Temelde

, bir liste görünümü var, öğe ekranından seçildiğinde o popUpMethod arayacak

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

Açılır sayfamın içinde yükseklik ve genişlik ayarlamaya çalışıyorum. Ancak, hala istediğim gibi olmayan tüm ekranı kaplıyor. Herhangi bir bilgi toplamanın gerekli olup olmadığını bana bildirin, teşekkür ederim.

P/S: i (taşınabilir) xamarin.Form tasarladım

+0

Belki de (bu gerçi Bir hack - "güzel" versiyonu daha iyi olurdu, Bir uyarı iletişim kutusu gibi) bir AbsoluteLayout kullanın ve UI öğesi hiyerarşisini (AbsoluteLayout sayfanıza öğeler ekleyerek) işleyerek öğeleri geçerli sayfanızın üzerine yerleştirin. –

+1

Özel pop-up'ı doğal olarak oluşturun ve DependencyService veya MessangingCenter üzerinden etkinleştirin. Aksi halde Brandon Minnick'in cevabı bunu yapmanın doğru yolu. Sayfanın içeriğini pop'unuza ayarlamak istemezsiniz çünkü bu her şeyi kaldırır. – BrewMate

cevap

0

PushModalAsync geçerli sayfanız üzerinden sayfayı itecektir. Bunun yerine aynı sayfayı bir çerçeve ekleyin. İstediğiniz kontrolleri ile çerçeve yapılandırın. 1. set frame Yanlış görünürlük ve ItemSelected make frame görünür. VEYA 2. ItemSelected öğesine dinamik olarak çerçeve ekleyin (ikinci yaklaşımı denemeyin.).

0

değiştirin kodu.

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; 
} 
+1

HeightRequest ve WidthRequest öğelerini 0 olarak ayarlamak istenen etkiyi vermez – BrewMate

3

Sen Xamarin.Forms

yılında bunu gerçekleştirmek için özel bir pop-up oluşturabilir Burada oluşturulan özel ContentView olduğunu. Arka planın solma görünümünü vermek için BoxView kullanır ve açılır pencereye gölge eklemek için Frame kullanır.

Ayrıca, özel açılır pencerenin ekrandan çıkarılmış gibi görünmesini sağlamak için animasyonları da kullanıyorum!

Numune Uygulama

bu örnek uygulaması için kod Github geçerli:

https://github.com/brminnick/InvestmentDataSampleApp

Custom Pop-up In Xamarin.Forms

Kod Parçacığı

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); 
     }); 
    } 
} 
İlgili konular