web-dev-qa-db-ja.com

Xamarin Forms Margins

Xamarin.Forms documentation でいくつかのマージンの類似物を見つけようとしています。誰かが何かを知っているか、パディングが私たちが持っているすべてですか?

更新:マージンとは何かを最もよく理解するために(MSF for WPFから): enter image description here

26
ad1Dima

やっと! Xamarin Forms 2.2. 含まれています マージン サポート!

ドキュメントはこちら 素晴らしいビジュアル enter image description here

[〜#〜] upd [〜#〜]@AUSTX_RJLの特別なマージン値は Thickness 他のXAMLフレームワークと同様です。

XAMLでThicknessを設定するには、1つ、2つ、または4つの値をコンマまたは空白で区切って設定します。"1 2 3 4""1, 2, 3, 4"と同じで、以下を設定します。

  • Leftの場合は1
  • Topの場合は2
  • Rightの場合は3
  • Bottomの場合は4

Thicknessのフィールド

"1 2"セット:

  • LeftおよびRightフィールドの場合は1
  • TopおよびBottomフィールドの場合は2

"1"は、Thicknessのすべてのフィールドに1を設定します

24
ad1Dima

2014-06-05現在、Xamarin.Formsにマージンはありません。 ContentViewFrame、またはその他のレイアウトでコンテンツをラップし、Paddingプロパティを使用します。

15
 StackLayout components = new StackLayout
        {
            Orientation = StackOrientation.Vertical,
            Spacing=10,
            Padding = new Thickness (10, 10, 10, 20),
            Children = {
                new Label {Text = "Hello"},
                new Label {Text = "World"}
            }
        };  

Spacingプロパティを使用すると、レイアウト内のすべての子ビューの間にスペースを追加できます。

Paddingプロパティを使用すると、レイアウトの(左、上、右、下)位置にスペースを追加できます。

各ラベルの子ビューに異なるマージンを持たせたい場合、以下を行うことができます。 1)次のようなカスタムラベルを作成して使用します。

using System;
using Xamarin.Forms;

namespace SharedViews
{

/// <summary>
/// Label propertis that will be rendered in native iOS and native Android Renderers.
/// </summary>
public class MyLabel : Label
{
    /// <summary>
    /// The x position of the label.
    /// </summary>
    public static readonly BindableProperty xProperty = BindableProperty.Create<MyLabel,int>(p => p.X,0);

    public int X{
        get{ return (int)base.GetValue(xProperty);}
        set {base.SetValue(xProperty,value);}
    }

    /// <summary>
    /// The y position of the label.
    /// </summary>
    public static readonly BindableProperty yProperty = BindableProperty.Create<MyLabel,int>(p => p.Y,0);

    public int Y{
        get{ return (int)base.GetValue(yProperty);}
        set {base.SetValue(yProperty,value);}
    }

   }
}

2)iOSとAndroidレンダラーを作成します

Androidレンダラー:

using System;
using Android.Widget;
using Android.Graphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[Assembly: ExportRenderer (typeof (MyLabel), typeof (MyLabelRenderer))]
namespace ChessGame.Android{
/// <summary>
/// Android label renderer:
/// here we set native Android label properties that can't be accessed in xamarin label.
/// </summary>
public class MyLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged (ElementChangedEventArgs<Label> e) {
        base.OnElementChanged (e);
        MyLabel element = (MyLabel)this.Element;
        var nativeLabelView = (TextView)Control;
        nativeLabelView.SetX (element.X);
        nativeLabelView.SetY (element.Y);
    }
  }
}
12
Ahmed Hesham

レイアウトは、レイアウトに含まれる子に適用される Padding プロパティをサポートします。これは、現在サポートしているマージンの概念に最も近いと思います

  var stackLayout = new StackLayout {
    Padding = new Thickness (10, 10, 10, 20),
    Children = {
      new Label {Text = "Hello"},
      new Label {Text = "World"}
    }
  }
5
Jason

アイテムにパディングを追加するためのXamarin.Forms.Viewの拡張機能を次に示します。

public static class XamarinFormsUtil
{
    public static View WithPadding(this View view, double all)
    {
        return WithPadding (view, all, all, all, all);
    }

    public static View WithPadding(this View view, double left, double top, double right, double bottom)
    {
        return new Frame () {
            Content = view,
            Padding = new Thickness(left, top, right, bottom)
        };
    }
}

この静的クラスが参照されると、便利なようにWithPaddingを使用して、コンストラクター内でページのコンテンツを作成できるようになりました。

Content = new StackLayout () {
    Orientation = StackOrientation.Vertical,
    Children = {
        welcome.WithPadding(10),
        stars.WithPadding(10),
        starCount.WithPadding(10)
    }
};
2
instantiator

マージン-コントロール間のスペースを制御します。
Padding-親コントロールとその子コントロール間の間隔を制御します。

@ ad1dimaが述べたように、Xamarin Forms 2.2(4月27日リリース)はマージンを導入しました。 marginプロパティに関するドキュメントは、 https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/margin-and-padding/ にあります。

1
lyndon hughey