Xamarin.Forms Button のチュートリアル

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

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

   重要

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

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

2. ソリューション エクスプローラーの [ButtonTutorial] プロジェクトで、[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="ButtonTutorial.MainPage">
      <StackLayout Margin="20,35,20,20">
          <Button Text="Click me" />
      </StackLayout>
   </ContentPage>
   

   このコードは、StackLayout の中の Button から構成されるページのユーザー インターフェイスを宣言によって定義します。 Button.Text プロパティでは、Button に表示するテキストを指定します。

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

   

   既定では、Button によって、許可されるすべてのスペース、この場合はその親 (StackLayout) の幅全体が占有される傾向があることに注意してください。

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

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

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

   重要

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

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

2. Solution Pad の [ButtonTutorial] プロジェクトで、[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="ButtonTutorial.MainPage">
      <StackLayout Margin="20,35,20,20">
          <Button Text="Click me" />
      </StackLayout>
   </ContentPage>
   

   このコードは、StackLayout の中の Button から構成されるページのユーザー インターフェイスを宣言によって定義します。 Button.Text プロパティでは、Button に表示するテキストを指定します。

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

   

   既定では、Button によって、許可されるすべてのスペース、この場合はその親 (StackLayout) の幅全体が占有される傾向があることに注意してください。

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

1. MainPage.xaml で、Clicked イベント用のハンドラーを設定するように Button 宣言を変更します。

   <Button Text="Click me"
           Clicked="OnButtonClicked" />
   

   このコードは、Clicked イベントを次の手順で作成する OnButtonClicked という名前のイベント ハンドラーに設定します。

2. ソリューション エクスプローラーの ButtonTutorial プロジェクトで [MainPage.xaml] を展開し、[MainPage.xaml.cs] をダブルクリックして開きます。 次に、MainPage.xaml.cs で、OnButtonClicked イベント ハンドラーをクラスに追加します。

   void OnButtonClicked(object sender, EventArgs e)
   {
       (sender as Button).Text = "Click me again!";
   }
   

   Button をタップすると、OnButtonClicked メソッドが実行されます。 sender 引数は、Clicked イベントの発生を担当する Button オブジェクトであり、Button オブジェクトへのアクセスに使用できます。 このイベント ハンドラーは、Button によって表示されるテキストを更新します。

   Note

   Clicked イベントのほかに、Button は Pressed イベントと Released イベントも定義します。 詳細については、「Xamarin.Forms Button」ガイドの「Pressing and releasing the button」 (ボタンを押して放す) を参照してください。

3. Visual Studio ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 Button をクリックして、表示されるテキストが変わっていることを確認します。

   

   ボタン クリックの処理の詳細については、「Xamarin.Forms Button」ガイドの「Handling button clicks」 (ボタン クリックの処理) を参照してください。

1. MainPage.xaml で、Clicked イベント用のハンドラーを設定するように Button 宣言を変更します。

   <Button Text="Click me"
           Clicked="OnButtonClicked" />
   

   このコードは、Clicked イベントを次の手順で作成する OnButtonClicked という名前のイベント ハンドラーに設定します。

2. Solution Pad の ButtonTutorial プロジェクトで [MainPage.xaml] を展開し、[MainPage.xaml.cs] をダブルクリックして開きます。 次に、MainPage.xaml.cs で、OnButtonClicked イベント ハンドラーをクラスに追加します。

   void OnButtonClicked(object sender, EventArgs e)
   {
       (sender as Button).Text = "Click me again!";
   }
   

   Button をタップすると、OnButtonClicked メソッドが実行されます。 sender 引数は、Clicked イベントの発生を担当する Button オブジェクトであり、Button オブジェクトへのアクセスに使用できます。 このイベント ハンドラーは、Button によって表示されるテキストを更新します。

   Note

   Clicked イベントのほかに、Button は Pressed イベントと Released イベントも定義します。 詳細については、「Xamarin.Forms Button」ガイドの「Pressing and releasing the button」 (ボタンを押して放す) を参照してください。

3. Visual Studio for Mac ツール バーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 Button をクリックして、表示されるテキストが変わっていることを確認します。

   

   ボタン クリックの処理の詳細については、「Xamarin.Forms Button」ガイドの「Handling button clicks」 (ボタン クリックの処理) を参照してください。

1. MainPage.xaml で、Button 宣言を変更してその外観を変更します。

   <Button Text="Click me"
           Clicked="OnButtonClicked"
           TextColor="Blue"
           BackgroundColor="Aqua"
           BorderColor="Red"
           BorderWidth="5"
           CornerRadius="5"
           WidthRequest="150"
           HeightRequest="75" />
   

   このコードでは、Button の外観を変更するプロパティを設定します。 TextColor プロパティでは Button テキストの色を設定し、BackgroundColor プロパティではテキストの背景色を設定します。 BorderColor プロパティでは、Button の周りの領域の色を設定し、BorderWidth プロパティでは罫線の幅を設定します。 既定では、Button は四角形ですが、CornerRadius プロパティを適切な値に設定することで、角を丸くすることができます。 また、Button のサイズは、その WidthRequest および HeightRequest プロパティを設定して変更します。

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

   

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

   Button の外観の設定について詳しくは、「Xamarin.Forms Button」ガイドの「Button appearance」 (ボタンの外観) を参照してください。

1. MainPage.xaml で、Button 宣言を変更してその外観を変更します。

   <Button Text="Click me"
           Clicked="OnButtonClicked"
           TextColor="Blue"
           BackgroundColor="Aqua"
           BorderColor="Red"
           BorderWidth="5"
           CornerRadius="5"
           WidthRequest="150"
           HeightRequest="75" />
   

   このコードでは、Button の外観を変更するプロパティを設定します。 TextColor プロパティでは Button テキストの色を設定し、BackgroundColor プロパティではテキストの背景色を設定します。 BorderColor プロパティでは、Button の周りの領域の色を設定し、BorderWidth プロパティでは罫線の幅を設定します。 既定では、Button は四角形ですが、CornerRadius プロパティを適切な値に設定することで、角を丸くすることができます。 また、Button のサイズは、その WidthRequest および HeightRequest プロパティを設定して変更します。

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

   

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

   Button の外観の設定について詳しくは、「Xamarin.Forms Button」ガイドの「Button appearance」 (ボタンの外観) を参照してください。