Xamarin.Forms のチュートリアル

このチュートリアルを完了するには、 .NET によるモバイル開発ワークロードがインストールされた、Visual Studio 2019 (最新リリース) が必要です。 さらに、iOS でチュートリアル アプリケーションを構築するには、ペアリング済みの Mac が必要になります。 Xamarin プラットフォームのインストールについては、「Xamarin のインストール」を参照してください。 Mac ビルド ホストへの Visual Studio 2019 の接続については、「Xamarin.iOS 開発のために Mac とペアリングする」を参照してください。

1. Visual Studio を起動し、GridTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。

   重要

   このチュートリアルの C# スニペットと XAML スニペットでは、GridTutorial という名前のソリューションが必要です。 別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルド エラーが発生します。

   作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。

2. ソリューション エクスプローラーの [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」 (余白とスペース) を参照してください。

3. Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS リモート シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

   

   Grid の詳細については、「Xamarin.Forms Grid」を参照してください。

このチュートリアルを完了するには、iOS と Android のプラットフォームのサポートがインストールされた Visual Studio for Mac (最新リリース) が必要です。 さらに、Xcode (最新リリース) も必要になります。 Xamarin プラットフォームのインストールについて詳しくは、「Xamarin のインストール」を参照してください。

1. Visual Studio for Mac を起動し、GridTutorial という名前の新しい空の Xamarin.Forms アプリを作成します。

   重要

   このチュートリアルの C# スニペットと XAML スニペットでは、GridTutorial という名前のソリューションが必要です。 別の名前を使用すると、コードをこのチュートリアルからソリューションにコピーするときに、ビルド エラーが発生します。

   作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイック スタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。

2. Solution Pad の [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」 (余白とスペース) を参照してください。

3. Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

   

   Grid の詳細については、「Xamarin.Forms Grid」を参照してください。

1. 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」 (間隔) を参照してください。

2. アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

   

1. 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」 (間隔) を参照してください。

2. アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

   

1. 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 がまたがる行の数を表します。

2. アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS リモート シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

   

   Visual Studio で、アプリケーションを停止します。

   列と行のスパニングの詳細については、「Xamarin.Forms Grid」ガイドの「Rows and columns」 (行および列) を参照してください。

1. 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 がまたがる行の数を表します。

2. アプリケーションがまだ実行されている場合は、変更内容をファイルに保存すると、アプリケーションのユーザー インターフェイスがシミュレーターまたはエミュレーターで自動的に更新されます。 もしくは、Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

   

   Visual Studio for Mac で、アプリケーションを停止します。

   列と行のスパニングの詳細については、「Xamarin.Forms Grid」ガイドの「Rows and columns」 (行および列) を参照してください。