Xamarin.Forms
Xamarinフォームレイアウト

.NET Framework Android ASP.NET C# Language F# firebase iOS uwp wpf Xamarin.iOS
サーチ…


ContentPresenter

テンプレートビューのレイアウトマネージャ。 ControlTemplate内で、表示するコンテンツの表示位置を示すために使用されます。

ContentPresenterレイアウト（Xamarinによる画像）

ContentView

単一の内容を持つ要素。 ContentViewは独自のものをほとんど使用していません。その目的は、ユーザー定義の複合ビューの基本クラスとして機能することです。

ContentViewレイアウト（Xamarinによる画像）

XAML 

<ContentView>
<Label Text="Hi, I'm a simple Label inside of a simple ContentView"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</ContentView>

コード 

var contentView = new ContentView {
Content = new Label {
 Text = "Hi, I'm a simple Label inside of a simple ContentView",
 HorizontalOptions = LayoutOptions.Center,
 VerticalOptions = LayoutOptions.Center
}
};

フレーム

単一の子を含む要素で、いくつかのフレームオプションがあります。フレームのデフォルトのXamarin.Forms.Layout.Paddingが20です。

フレームレイアウト（image by Xamarin）

XAML 

<Frame>
<Label Text="I've been framed!"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Frame>

コード 

var frameView = new Frame {
Content = new Label {
 Text = "I've been framed!",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
},
OutlineColor = Color.Red
};

ScrollView

Contentあればスクロールできる要素。

ScrollViewはレイアウトが含まれており、オフスクリーンでスクロールできます。 ScrollViewは、キーボードが表示されているときに画面の表示部分に自動的に移動するビューを許可するためにも使用されます。

ScrollView Layout（Xamarinによる画像）

注意： ScrollViewsをネストしないでください 。さらに、 ScrollViewsは、 ListViewやWebViewようなスクロールを提供する他のコントロールとネストすることはできません。

ScrollViewは簡単に定義できます。 XAMLの場合： 

<ContentPage.Content>
    <ScrollView>
        <StackLayout>
            <BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" />
            <Entry />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

コード内の同じ定義： 

var scroll = new ScrollView();
Content = scroll;
var stack = new StackLayout();
stack.Children.Add(new BoxView { BackgroundColor = Color.Red,   HeightRequest = 600, WidthRequest = 600 });
stack.Children.Add(new Entry());

TemplatedView

コントロールテンプレートを使用してコンテンツを表示する要素、およびContentView基本クラス。

テンプレートビューレイアウト（Xamarinによる画像）

AbsoluteLayout

AbsoluteLayout 、自身のサイズと位置に比例する子要素の位置とサイズを決定します。子ビューは、比例値または静的値を使用して配置およびサイズ設定することができ、比例および静的値を混合することができます。

AbsoluteLayout（Xamarinによる画像）

XAMLでのAbsoluteLayout定義は次のようになります。 

<AbsoluteLayout>
    <Label Text="I'm centered on iPhone 4 but no other device"
        AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap"  />
    <Label Text="I'm bottom center on every device."
        AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
        LineBreakMode="WordWrap"  />
    <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,1,25"
        AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" />
</AbsoluteLayout>

同じレイアウトがコード内で次のようになります。 

Title = "Absolute Layout Exploration - Code";
var layout = new AbsoluteLayout();

var centerLabel = new Label {
Text = "I'm centered on iPhone 4 but no other device.",
LineBreakMode = LineBreakMode.WordWrap};

AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
// No need to set layout flags, absolute positioning is the default

var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);

var rightBox = new BoxView{ Color = Color.Olive };
AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);

var leftBox = new BoxView{ Color = Color.Red };
AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);

var topBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);

var twoFlagsBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayout.WidthProportional);

layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);

Xamarin.FormsのAbsoluteLayoutコントロールを使用すると、子要素を表示する場所と、サイズと形状（境界）を正確に画面上で指定できます。

このプロセスで使用されるAbsoluteLayoutFlags列挙に基づいて、子要素の境界を設定する方法はいくつかあります。 AbsoluteLayoutFlags列挙には、次の値が含まれます。

  • すべて ：すべての次元は比例します。
  • HeightProportional ：高さはレイアウトに比例します。
  • なし ：解釈は行われません。
  • PositionProportional ：XProportionalとYproportionalを結合します。
  • SizeProportional ：WidthProportionalとHeightProportionalを結合します。
  • WidthProportional ：幅はレイアウトに比例します。
  • XProportional ：Xプロパティはレイアウトに比例します。
  • Y プロポーショナル ：Yプロパティはレイアウトに比例します。

AbsoluteLayoutコンテナのレイアウトを処理するプロセスは、最初は少し直感的に思えるかもしれませんが、少し使いこなすと分かります。子要素を作成したら、それらをコンテナ内の絶対位置に設定するには、3つの手順を実行する必要があります。 AbsoluteLayout.SetLayoutFlags（）メソッドを使用して、要素に割り当てられたフラグを設定する必要があります。また、 AbsoluteLayout.SetLayoutBounds（）メソッドを使用して、要素に範囲を割り当てることもできます。最後に、子要素を子コレクションに追加する必要があります。 Xamarin.FormsはXamarinとデバイス固有の実装の間の抽象化レイヤであるため、位置の値はデバイスのピクセルとは無関係にすることができます。これは、前述のレイアウトフラグが有効になる場所です。 Xamarin.Formsコントロールのレイアウトプロセスで定義した値を解釈する方法を選択できます。

グリッド

行と列に配置されたビューを含むレイアウト。

グリッドレイアウト（Xamarinによる画像）

これは、XAMLの一般的なGrid定義です。 

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="2*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="200" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
    
  <ContentView Grid.Row="0" Grid.Column="0"/>
  <ContentView Grid.Row="1" Grid.Column="0"/>
  <ContentView Grid.Row="2" Grid.Column="0"/>

  <ContentView Grid.Row="0" Grid.Column="1"/>
  <ContentView Grid.Row="1" Grid.Column="1"/>
  <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

コードで定義されている同じGridは、次のようになります。 

var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});
grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });

グリッドに項目を追加するには： XAML ： 

<Grid>
      
   <--DEFINITIONS...--!>
        
   <ContentView Grid.Row="0" Grid.Column="0"/>
   <ContentView Grid.Row="1" Grid.Column="0"/>
   <ContentView Grid.Row="2" Grid.Column="0"/>

   <ContentView Grid.Row="0" Grid.Column="1"/>
   <ContentView Grid.Row="1" Grid.Column="1"/>
   <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

C＃コードでは： 

var grid = new Grid();
//DEFINITIONS...
var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);

HeightとWidth 、いくつかの単位があります。

  • 自動 - 行または列の内容に合わせて自動的にサイズを変更します。 C＃ではGridUnitType.Auto、XAMLではAutoと指定されています。
  • 比例 - 残りのスペースの割合として列と行のサイズを設定します。値として指定され、C＃ではGridUnitType.Star、XAMLでは＃*として指定され、＃が希望する値になります。 *で1つの行/列を指定すると、使用可能な領域がいっぱいになります。
  • 絶対サイズ - 特定の固定高さと幅の値を持つ列と行のサイズを設定します。値として指定し、C＃ではGridUnitType.Absolute、XAMLでは＃を使用し、＃を希望の値にします。

注意：列の幅の値は、デフォルトでXamarin.Formsに自動設定されています。つまり、幅は子のサイズから決定されます。これは、MicrosoftプラットフォームでのXAMLの実装とは異なります。既定の幅は*で、使用可能な領域を埋めることになります。

RelativeLayout

Layout使用Constraintsその子をレイアウトします。

RelativeLayoutは、レイアウトまたは兄弟ビューのプロパティに関連したビューの配置およびサイズ設定に使用されます。 AbsoluteLayoutとは異なり、 RelativeLayoutは移動アンカーの概念がなく、レイアウトの下端または右端を基準に要素を配置する機能がありません。 RelativeLayoutは、それ自身の範囲外の位置指定要素をサポートしています。

RelativeLayout（Xamarinによる画像）

XAMLのRelativeLayoutは次のようなものです： 

<RelativeLayout>
    <BoxView Color="Red" x:Name="redBox"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.15,Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
    <BoxView Color="Blue"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=Y,Factor=1,Constant=20}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=X,Factor=1,Constant=20}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>

このコードで同じレイアウトを実現できます： 

layout.Children.Add (redBox, Constraint.RelativeToParent ((parent) => {
        return parent.X;
    }), Constraint.RelativeToParent ((parent) => {
        return parent.Y * .15;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .8;
    }));
layout.Children.Add (blueBox, Constraint.RelativeToView (redBox, (Parent, sibling) => {
        return sibling.X + 20;
    }), Constraint.RelativeToView (blueBox, (parent, sibling) => {
        return sibling.Y + 20;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width * .5;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .5;
    }));

StackLayout

StackLayoutは、ビューを水平または垂直の1次元線（「スタック」）で整理します。 StackLayout内のViewsは、レイアウトオプションを使用してレイアウト内のスペースに基づいてサイズをStackLayoutできます。配置は、ビューのレイアウトおよびレイアウトオプションにオーダービューを追加することによって決定されます。

StackLayout（Xamarinによる画像）

XAMLでの使用法

<StackLayout>
    <Label Text="This will be on top" />
    <Button Text="This will be on the bottom" />
</StackLayout>

コードでの使用

StackLayout stackLayout = new StackLayout
{
    Spacing = 0,
    VerticalOptions = LayoutOptions.FillAndExpand,
    Children = 
    {
        new Label
        {
            Text = "StackLayout",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "stacks its children",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "vertically",
            HorizontalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "by default,",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "but horizontal placement",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "can be controlled with",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "the HorizontalOptions property.",
            HorizontalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "An Expand option allows one or more children " +
                   "to occupy the an area within the remaining " +
                   "space of the StackLayout after it's been sized " +
                   "to the height of its parent.",
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.End
        },
        new StackLayout
        {
            Spacing = 0,
            Orientation = StackOrientation.Horizontal,
            Children = 
            {
                new Label
                {
                    Text = "Stacking",
                },
                new Label
                {
                    Text = "can also be",
                    HorizontalOptions = LayoutOptions.CenterAndExpand
                },
                new Label
                {
                    Text = "horizontal.",
                },
            }
        }
    }
};


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow