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

[アーティクル]
Developer (初級)
完了まで 7 分

このチュートリアルを試行する前に、以下を正常に完了しておく必要があります。

初めての Xamarin.Forms アプリのビルドに関するクイックスタート。
StackLayout のチュートリアル。

このチュートリアルでは、次の作業を行う方法について説明します。

XAML で Xamarin.FormsButton を作成する。
タップされた Button に応答する。
Button の外観を変更する。

Button をカスタマイズする方法を示す簡単なアプリケーションを作成するには、Visual Studio 2019 または Visual Studio for Mac を使用します。次のスクリーンショットは、最終的なアプリケーションです。

また、Xamarin.Forms 向け XAML ホットリロードを使用して、アプリケーションをリビルドせずに UI の変更を確認することもできます。

ボタンを作成する

残り 6 分

Visual Studio
Visual Studio for Mac

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

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

重要

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

作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイックスタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
ソリューションエクスプローラーの [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 に表示するテキストを指定します。
Visual Studio ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

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

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

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

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

重要

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

作成される .NET Standard ライブラリの詳細については、Xamarin.Forms クイックスタート Deep Dive の「Xamarin.Forms アプリケーションの構造」を参照してください。
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 に表示するテキストを指定します。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。

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

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

クリックを処理する

残り 4 分

Visual Studio
Visual Studio for Mac

MainPage.xaml で、Clicked イベント用のハンドラーを設定するように Button 宣言を変更します。
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
このコードは、Clicked イベントを次の手順で作成する OnButtonClicked という名前のイベントハンドラーに設定します。
ソリューションエクスプローラーの 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」 (ボタンを押して放す) を参照してください。
Visual Studio ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択したリモート iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 Button をクリックして、表示されるテキストが変わっていることを確認します。

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

MainPage.xaml で、Clicked イベント用のハンドラーを設定するように Button 宣言を変更します。
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
このコードは、Clicked イベントを次の手順で作成する OnButtonClicked という名前のイベントハンドラーに設定します。
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」 (ボタンを押して放す) を参照してください。
Visual Studio for Mac ツールバーで、 [開始] ボタン ([再生] ボタンに似た三角形のボタン) を押し、選択した iOS シミュレーターまたは Android エミュレーター内でアプリケーションを起動します。 Button をクリックして、表示されるテキストが変わっていることを確認します。

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

外観を変更する

残り 2 分

Visual Studio
Visual Studio for Mac

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

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

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

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

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

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

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

ボタンを作成する

クリックを処理する

外観を変更する

おめでとうございます。

次のステップ

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

ボタンを作成する

クリックを処理する

外観を変更する

おめでとうございます。

次のステップ

関連リンク