:::no-loc(Xamarin.Forms)::: レイアウト:::no-loc(Xamarin.Forms)::: Layouts

サンプルのダウンロードサンプルのダウンロードDownload Sample Download the sample

:::no-loc(Xamarin.Forms)::: レイアウトは、ユーザーインターフェイスコントロールをビジュアル構造に作成するために使用されます。:::no-loc(Xamarin.Forms)::: Layouts are used to compose user-interface controls into visual structures.

Layout Layout<T> のクラスとクラス :::no-loc(Xamarin.Forms)::: は、ビューおよびその他のレイアウトのコンテナーとして機能するビューの特殊なサブタイプです。The Layout and Layout<T> classes in :::no-loc(Xamarin.Forms)::: are specialized subtypes of views that act as containers for views and other layouts. Layoutクラス自体は、から派生 View します。The Layout class itself derives from View. 通常、派生には、 Layout アプリケーション内の子要素の位置とサイズを設定するロジックが含まれ :::no-loc(Xamarin.Forms)::: ます。A Layout derivative typically contains logic to set the position and size of child elements in :::no-loc(Xamarin.Forms)::: applications.

::: no-loc (Xamarin. Forms)::: Layout 型:::no-loc(Xamarin.Forms)::: Layout Types

から派生するクラスは、 Layout 次の2つのカテゴリに分けることができます。The classes that derive from Layout can be divided into two categories:

コンテンツが1つのレイアウトLayouts with Single Content

これらのクラス Layout Padding は、プロパティとプロパティを定義するから派生し IsClippedToBounds ます。These classes derive from Layout, which defines Padding and IsClippedToBounds properties:

TypeType 説明Description 外観Appearance
ContentView ContentView プロパティで設定された1つの子が含まれ Content ます。ContentView contains a single child that is set with the Content property. プロパティは、 Content View 他の派生を含む任意の派生物に設定でき Layout ます。The Content property can be set to any View derivative, including other Layout derivatives. ContentView は、主に構造的要素として使用され、の基本クラスとして機能し Frame ます。ContentView is mostly used as a structural element and serves as a base class to Frame.

API ドキュメント / ガイド / サンプルAPI Documentation / Guide / Sample
ContentView の例ContentView Example
このページ / の C# コードXAML ページC# code for this page / XAML page
Frame Frameクラスはから派生 ContentView し、その子の周りに境界線またはフレームを表示します。The Frame class derives from ContentView and displays a border, or frame, around its child. Frameクラスの既定値は Padding 20 で、、、およびの各プロパティも定義し BorderColor CornerRadius HasShadow ます。The Frame class has a default Padding value of 20, and also defines BorderColor, CornerRadius, and HasShadow properties.

API ドキュメント / ガイド / サンプルAPI Documentation / Guide / Sample
フレームの例Frame Example
このページ / の C# コードXAML ページC# code for this page / XAML page
ScrollView ScrollView はその内容をスクロールできます。ScrollView is capable of scrolling its contents. プロパティを Content ビューまたはレイアウトが大きすぎて画面に収まりません。Set the Content property to a view or layout too large to fit on the screen. (のコンテンツは ScrollView 非常によくあり StackLayout ます)。 Orientation 垂直方向、水平方向、または両方のスクロールを使用するかどうかを示すプロパティを設定します。(The content of a ScrollView is very often a StackLayout.) Set the Orientation property to indicate if scrolling should be vertical, horizontal, or both.

API ドキュメント / ガイド / サンプルAPI Documentation / Guide / Sample
ScrollView の例ScrollView Example
このページ / の C# コードXAML ページC# code for this page / XAML page
TemplatedView TemplatedView コントロールテンプレートを使用してコンテンツを表示します。これはの基本クラスです ContentViewTemplatedView displays content with a control template, and is the base class for ContentView.

API ドキュメント / ガイドAPI Documentation / Guide
TemplatedView の例TemplatedView Example
ContentPresenter ContentPresenter は、テンプレートビューのレイアウトマネージャーであり、内で使用され、表示 ControlTemplate されるコンテンツの場所をマークします。ContentPresenter is a layout manager for templated views, used within a ControlTemplate to mark where the content that is to be presented appears.

API ドキュメント / ガイドAPI Documentation / Guide
ContentPresenter の例ContentPresenter Example

複数の子を持つレイアウトLayouts with Multiple Children

これらのクラスはから派生し Layout<View> ます。These classes derive from Layout<View>:

TypeType 説明Description 外観Appearance
StackLayout StackLayout プロパティに基づいて、スタック内の子要素を水平方向または垂直方向に配置 Orientation します。StackLayout positions child elements in a stack either horizontally or vertically based on the Orientation property. プロパティは、 Spacing 子間の間隔を制御し、既定値は6です。The Spacing property governs the spacing between the children, and has a default value of 6.

API ドキュメント / ガイド / サンプルAPI Documentation / Guide / Sample
StackLayout の例StackLayout Example
このページ / の C# コードXAML ページC# code for this page / XAML page
Grid Grid 行と列のグリッドに子要素を配置します。Grid positions its child elements in a grid of rows and columns. 子の位置は、 添付プロパティ、、、およびを使用して示され Row Column RowSpan ColumnSpan ます。A child's position is indicated using the attached properties Row, Column, RowSpan, and ColumnSpan.

API ドキュメント / ガイド / サンプルAPI Documentation / Guide / Sample
グリッドの例Grid Example
このページ / の C# コードXAML ページC# code for this page / XAML page
AbsoluteLayout AbsoluteLayout 親を基準として、特定の場所に子要素を配置します。AbsoluteLayout positions child elements at specific locations relative to its parent. 子の位置は、 添付プロパティとを使用して示され LayoutBounds LayoutFlags ます。A child's position is indicated using the attached properties LayoutBounds and LayoutFlags. AbsoluteLayoutは、ビューの位置をアニメーション化する場合に便利です。An AbsoluteLayout is useful for animating the positions of views.

API ドキュメント / ガイド / サンプルAPI Documentation / Guide / Sample
AbsoluteLayout の例AbsoluteLayout Example
このページ / の C# コード分離コード付きXAML ページC# code for this page / XAML page with code-behind
RelativeLayout RelativeLayout 子要素を RelativeLayout それ自体またはその兄弟に相対的に配置します。RelativeLayout positions child elements relative to the RelativeLayout itself or to their siblings. 子の位置は、型および型のオブジェクトに設定されている 添付プロパティ を使用して示され Constraint BoundsConstraint ます。A child's position is indicated using the attached properties that are set to objects of type Constraint and BoundsConstraint.

API ドキュメント / ガイド / サンプルAPI Documentation / Guide / Sample
RelativeLayout の例RelativeLayout Example
このページ / の C# コードXAML ページC# code for this page / XAML page
FlexLayout FlexLayout は、CSS フレキシブルボックスレイアウトモジュールに基づいています。これは、通常、 フレックスレイアウト または フレックスボックス と呼ばれます。FlexLayout is based on the CSS Flexible Box Layout Module, commonly known as flex layout or flex-box. FlexLayout 6つのバインド可能なプロパティと5つのアタッチ可能なバインド可能なプロパティを定義します。これにより、複数の配置および向きのオプションで子を積み上げたりラップしたりできます。FlexLayout defines six bindable properties and five attached bindable properties that allow children to be stacked or wrapped with many alignment and orientation options.

API ドキュメント / ガイド / サンプルAPI Documentation / Guide / Sample
FlexLayout の例FlexLayout Example
このページ / の C# コードXAML ページC# code for this page / XAML page