2017-08-28 1 views
2

xamarin.formsに以下のようにポップアップをデザインする可能性はありますか?xamarin.formsのポップアップ

enter image description here

+0

あなたがCAのプラグインがありますしかし、もしあなたが特にiOSのポップオーバーダイアログのように見せたいのであれば、おそらくカスタムレンダラーを使用する必要があります。 – Jason

答えて

4

これを行うには多く方法がありますが、ここではカスタムは、各プラットフォーム用のレンダリング書い避ける一方が...

NControl/Ngraphicsを使用して、あなたは(あなたのポップオーバーを描くNControlViewサブクラスを作成することができますiOSポップオーバー)。その後、XAMLにそれを埋め込むことができますし、

enter image description here

public class PopDownControl : NControlView 
{ 
    public PopDownControl() 
    { 
     BackgroundColor = Xamarin.Forms.Color.Transparent; 
    } 

    public static BindableProperty CornerRadiusProperty = 
     BindableProperty.Create(nameof(CornerRadius), typeof(int), typeof(PopDownControl), 0, 
      BindingMode.OneWay, null, (bindable, oldValue, newValue) => 
      { 
       (bindable as PopDownControl).Invalidate(); 
      }); 

    public int CornerRadius 
    { 
     get { return (int)GetValue(CornerRadiusProperty); } 
     set { SetValue(CornerRadiusProperty, value); } 
    } 

    public static BindableProperty InsetPositionProperty = 
     BindableProperty.Create(nameof(InsetPosition), typeof(int), typeof(PopDownControl), 0, 
      BindingMode.OneWay, null, (bindable, oldValue, newValue) => 
      { 
       (bindable as PopDownControl).Invalidate(); 
      }); 

    public int InsetPosition 
    { 
     get { return (int)GetValue(InsetPositionProperty); } 
     set { SetValue(InsetPositionProperty, value); } 
    } 

    public override void Draw(ICanvas canvas, Rect rect) 
    { 
     base.Draw(canvas, rect); 

     var backgroundBrush = new SolidBrush(Colors.White); 
     var pen = new Pen(Colors.White, 2); 

     var width = rect.Width - CornerRadius; 
     var height = rect.Height; 
     var arcdia = CornerRadius * 2; 
     var inset = InsetPosition; 
     var insetWidth = 30; 
     canvas.DrawPath(
      new PathOp[] 
      { 
       new MoveTo (arcdia + CornerRadius, CornerRadius), 
       new LineTo (inset, CornerRadius), 
       new LineTo (inset + (insetWidth/2), 0), 
       new LineTo (inset + insetWidth, CornerRadius), 
       new LineTo (width-arcdia, CornerRadius), 
       new ArcTo (new Size (arcdia), false, true, new Point (width, arcdia + CornerRadius)), 
       new LineTo (width, height-arcdia), 
       new ArcTo (new Size (arcdia), false, true, new Point (width-arcdia, height)), 
       new LineTo (arcdia + CornerRadius, height), 
       new ArcTo (new Size (arcdia), false, true, new Point (CornerRadius, height-arcdia)), 
       new LineTo (arcdia/2, arcdia + CornerRadius), 
       new ArcTo (new Size (arcdia), false, true, new Point (arcdia + CornerRadius, CornerRadius)), 
       new LineTo (arcdia + CornerRadius, CornerRadius), 
       new ClosePath(), 
      }, pen, backgroundBrush); 
    } 
} 
+0

@ SushiHanover、私はあなたのアプローチを試しましたが、私が望んでいないようになっています。このためのいくつかの詳細。 – sahithi

1

Rg.Plugins.Popupはあなたの条件のための最高のプラグインです。それはXamarin.Formsのための素晴らしいプラグインです。 詳細はhereです。

enter image description here

0

あなたの設計どおりslideover popupを実装するためにXamarin.FormsでslideOverkitコンポーネントを使用することができます。