Xamarin.Forms のチュートリアル
このチュートリアルを試行する前に、以下を正常に完了しておく必要があります。
- 初めての Xamarin.Forms アプリのビルドに関するクイックスタート。
このチュートリアルでは、以下の内容を学習します。
- XAML で Xamarin.Forms
Gridを作成する。 Gridの列と行を指定する。Gridでコンテンツを複数の列または複数の行にまたがって配置する。
Grid 内にコントロールをレイアウトする方法を示す簡単なアプリケーションを作成するには、Visual Studio 2019 または Visual Studio for Mac を使用します。 次のスクリーンショットは、最終的なアプリケーションです。
また、Xamarin.Forms 向け XAML ホット リロードを使用して、アプリケーションをリビルドせずに UI の変更を確認することもできます。
グリッドを作成する
Grid は、比例サイズと絶対サイズにできるように、その子が行と列に整理されるレイアウトです。 既定では、Grid には 1 つの行と 1 つの列が含まれます。
このチュートリアルを完了するには、 .NET によるモバイル開発ワークロードがインストールされた、Visual Studio 2019 (最新リリース) が必要です。 さらに、iOS でチュートリアル アプリケーションを構築するには、ペアリング済みの Mac が必要になります。 Xamarin プラットフォームのインストールについては、「Xamarin のインストール」を参照してください。 Mac ビルド ホストへの Visual Studio 2019 の接続については、「Xamarin.iOS 開発のために Mac とペアリングする」を参照してください。
Visual Studio を起動し、GridTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。
重要
このチュートリアルの C# スニペットと XAML スニペットでは、GridTutorial という名前のソリューションが必要です。 別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルド エラーが発生します。
作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
ソリューション エクスプローラーの [GridTutorial] プロジェクトで、 [MainPage.xaml] をダブルクリックして開きます。 次に、 [MainPage.xaml] のテンプレート コードをすべて削除し、次のコードに置き換えます。
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="GridTutorial.MainPage"> <Grid Margin="20,35,20,20"> <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." /> </Grid> </ContentPage>このコードでは、
Gridの中のLabelから構成されるページのユーザー インターフェイスを宣言によって定義します。 既定では、Gridで 1 つの場所にその子ビューが配置されます。 そのため、複数の子を含むGridでは、列と行を指定する必要があります。これについては、次の演習で説明します。 さらに、Marginプロパティは、ContentPage内のGridのレンダリング位置を示します。注意
Marginプロパティに加え、PaddingプロパティをGridに設定することもできます。Paddingプロパティ値では、Gridとその子の境界間の距離を指定します。 詳細については「Margin and Padding」 (余白とスペース) を参照してください。Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS リモート シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。
Gridの詳細については、「Xamarin.Forms Grid」を参照してください。
列と行を指定する
MainPage.xaml で、
Grid宣言を変更して列と行を定義し、列と行にコンテンツを配置します。<Grid Margin="20,35,20,20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.5*" /> <ColumnDefinition Width="0.5*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="50" /> </Grid.RowDefinitions> <Label Text="Column 0, Row 0" /> <Label Grid.Column="1" Text="Column 1, Row 0" /> <Label Grid.Row="1" Text="Column 0, Row 1" /> <Label Grid.Column="1" Grid.Row="1" Text="Column 1, Row 1" /> </Grid>このコードは、
Gridの列と行を定義し、Labelインスタンスを特定の列と行に配置します。 列と行のデータは、ColumnDefinitionsプロパティとRowDefinitionsプロパティに格納されます。これらのプロパティはそれぞれ、ColumnDefinitionオブジェクトとRowDefinitionオブジェクトのコレクションです。 各ColumnDefinitionの幅は、ColumnDefinition.Widthプロパティによって設定され、各RowDefinitionの高さはRowDefinition.Heightプロパティによって設定されます。 有効な幅と高さの値は次のとおりです。Auto: コンテンツに合わせて行または列のサイズを設定します。- 比例値: 残りのスペースに比例して、列と行のサイズを設定します。 比例値は、末尾に
*を付けて示されます。 - 絶対値: 特定の固定値で列または行のサイズを設定します。
そのため、上記のコードでは、各列の幅は
Gridの半分ですが、各行の高さは 50 (デバイスに依存しない単位) になっています。Grid内の各Labelの位置は、0 から始まるインデックスを使用して、Grid.ColumnとGrid.Rowの添付プロパティで指定されます。 したがって、最初の列は列 0 で、最初の行は行 0 です。 最初のLabelには、これらの添付プロパティがありません。これは、添付プロパティを設定しない子ビューはすべて自動的に列 0 と行 0 にレンダリングされるためです。Note
Grid内の列と行の間隔は、ColumnSpacingプロパティとRowSpacingプロパティで設定できます。 詳細については、「Xamarin.Forms Grid」ガイドの「Spacing」 (間隔) を参照してください。アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。
複数の列または行にまたがる
MainPage.xaml で、
Grid宣言を変更して列と行を定義し、列と行にまたがるコンテンツを配置します。<Grid Margin="20,35,20,20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.5*" /> <ColumnDefinition Width="0.5*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="30" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> <Label Grid.ColumnSpan="2" Text="This text uses the ColumnSpan property to span both columns." /> <Label Grid.Row="1" Grid.RowSpan="2" Text="This text uses the RowSpan property to span two rows." /> </Grid>このコードは、
Gridの列と行を定義し、Labelインスタンスを特定の列と行に配置します。 最初のLabelではColumnSpan添付プロパティを設定し、そのテキストが複数の列にまたがるようにします。ColumnSpanプロパティは 2 に設定されます。これは、Labelがまたがる列の数を表します。 2 番目のLabelではRowSpan添付プロパティを設定し、そのテキストが複数の行にまたがるようにします。RowSpanプロパティは 2 に設定されます。これは、Labelがまたがる行の数を表します。アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS リモート シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。
Visual Studio で、アプリケーションを停止します。
列と行のスパニングの詳細については、「Xamarin.Forms Grid」ガイドの「Rows and columns」 (行および列) を参照してください。
おめでとうございます。
これでこのチュートリアルは完了です。ここでは以下の方法を学習しました。
- XAML で Xamarin.Forms
Gridを作成する。 Gridの列と行を指定する。Gridで複数の列または複数の行にまたがるコンテンツ。
次の手順
Xamarin.Forms を使用してモバイル アプリケーションを作成する基本についてさらに学習するには、CollectionView のチュートリアルに進んでください。
関連リンク
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。