Button はユーザーにタップもしくはクリックしてもらうことで、何らかのアクションを行うトリガーとして使用されます。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/e56ec73b6d7f58149ee47d26203ccd25.png)
アプリには必ずと言っていいほど使われており、なくてはならない UI コントロールの1つとも言えます。
![](https://marunaka-blog.com/wp-content/uploads/2021/04/6a0f96fa975cc64c18fa90be906602e6.png)
.NET MAUでButtonを使う方法を知りたい。
この記事では、.NET MAUI の UI コントロールの1つである Button の使い方をサンプルコードと画像を用いて分かりやすく解説します。
Button のプロパティやイベント、コマンドのことを知りたい方は、ぜひ参考にしてみて下さい。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/732f4c1bbc64fca859d0210c642e2a3f-300x200.jpg)
オススメの参考書
丁寧に解説された1冊。リリースされて間もない.NET MAUI の基礎が学べるので、これから Android や iOS などをターゲットとして開発するなら非常に参考になる書籍です。
Button(ボタン)とは
![](https://marunaka-blog.com/wp-content/uploads/2022/03/e79f61a6baca46b24df8b1f92d141ae5-2.png)
Button とはテキストを表示し、タップまたはクリックをトリガーとして処理を実行する UI コントロールの1つです。
<Button …/>
処理を実行するには、Clicked イベントもしくは Command プロパティを使います。MVVM パターンでアプリ開発する際は、Command プロパティを使うことになります。
また、テキスト以外にも画像データを Button 上に表示することができます。テキストと画像を組み合わせることも可能です。
Buttonの使い方
![](https://marunaka-blog.com/wp-content/uploads/2022/03/091184bcda645b76415dad025b422929-1024x358.jpg)
ここからは .NET MAUI で Button を使う方法について紹介します。
XAML ファイルを開いて、次のようにコードを記述すると Button を表示することができます。
<StackLayout>
<Button Text="ボタン" HorizontalOptions="Center" VerticalOptions="Center"/>
</StackLayout>
Android エミュレーターで実行すると、次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/e56ec73b6d7f58149ee47d26203ccd25.png)
アプリの画面に Button を表示することができました。
境界線を設定する
Buttonの境界線を設定するには、BorderColor や BorderWidth、CornerRadius などのプロパティを使います。
- BorderColor プロパティ:境界線の色を設定または取得する
- BorderWidth プロパティ:境界線の幅を設定または取得する
- CornerRadius プロパティ:角の半径を設定または取得する
次の例は境界線の色を赤、幅を5、角の半径を20にしたサンプルです。
<StackLayout>
<Button
BorderColor="Red"
BorderWidth="5"
CornerRadius="20"
HorizontalOptions="Center"
Text="ボタン"
VerticalOptions="Center" />
</StackLayout>
Android エミュレーターで実行すると、次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/1146a959d2b477a759c120cd0a345366.png)
テキストのスタイルを設定する
Button のテキストのスタイルを設定するには、FontAttributes や FontSize、TextColor などのプロパティを使います。
- FontAttributes プロパティ:文字を強調する太字・斜体を設定または取得する
- FontSize プロパティ:フォントのサイズを設定または取得する
- TextColor プロパティ:テキストの色を設定または取得する
次の例は境界線の色を赤、幅を5、角の半径を20にしたサンプルです。
<StackLayout>
<Button
FontAttributes="Bold"
FontSize="Medium"
HorizontalOptions="Center"
Text="ボタン"
TextColor="Yellow"
VerticalOptions="Center" />
</StackLayout>
Android エミュレーターで実行すると、次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/e82a17bf7f4b647c8be117f23de2cce1.png)
画像を設定する
Button に画像を設定するには、ImageSource プロパティを使います。
- ImageSource プロパティ:画像データを設定または取得する
ImageSource に設定する画像データを準備します。ここでは、home.svg という画像データを用意しました。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/69b8b8e7f0c3dd430b323956997626ee.png)
プロジェクトのソリューションエクスプローラーを開いて、Resources フォルダの Images フォルダに home.svg を追加します。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/360761504af480a20756b09c4de3ae1f.png)
次の例は ImageSource プロパティに home.svg を設定したサンプルです。
<StackLayout>
<Button
HorizontalOptions="Center"
ImageSource="home.svg"
VerticalOptions="Center" />
</StackLayout>
Android エミュレーターで実行すると、次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/7361e7a40e5858a62b5015c78c724db8.png)
イベントを設定する
Button には、Button が押された時に発生する Pressed イベントや 指またはマウスポインタが離れた時に発生する Released イベント等があります。
ここではタップまたはクリックした後に発生する Clicked イベントを設定します。XAML に Clicked イベントのイベントハンドラを登録します。
<StackLayout>
<Button
Clicked="Button_Clicked"
HorizontalOptions="Center"
Text="ボタン"
VerticalOptions="Center" />
</StackLayout>
先ほど XAML に登録したイベントハンドラはコードビハインドに記述します。
第1引数の sender はイベントを実行したオブジェクトが渡されるので、CheckBox でキャストすると プロパティにアクセスできます。第2引数の e にはチェック状態が渡されます。
次の例では、イベントを発生させた Button の背景色を変更するサンプルです。
private void Button_Clicked(object sender, EventArgs e)
{
var button = sender as Button;
button.BackgroundColor = Color.FromRgba("28C2D1");
}
Android エミュレーターで実行すると、次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/e56ec73b6d7f58149ee47d26203ccd25.gif)
コマンドを設定する
MVVM パターンでアプリ開発する際は、View と View 以外を分離するために Command を使用します。
Command は Clicked イベントの代わりとして利用することができます。
Command を実装する前にプロジェクトに、ViewModels というフォルダを作成し、そのフォルダ内に MainViewModel.cs を作成します。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/9aaebab6bc6d38d32732976fc53ffb68.png)
続いて、MainViewModel.cs を開いて、ICommand 型で ClickedCommand プロパティを定義します。クラスのコンストラクタでは、コマンドのインスタンスを生成し、コマンドの実行処理部分を実装します。
using System.Windows.Input;
namespace Sample.ViewModels
{
public class MainViewModel
{
// ボタンのコマンド
public ICommand ClickedCommand { get; set; }
// コンストラクタ
public MainViewModel()
{
// コマンドのインスタンス化
ClickedCommand = new Command(obj =>
{
// コマンドの実行処理
var button = (Button)obj;
button.Background = Color.FromRgba("28C2D1");
});
}
}
}
MainPage.xaml を開きます。Button に Command プロパティを追加して、ClickedCommand をバインディングします。CommandParameter プロパティには Button のオブジェクトを設定します。(12 ~ 13行目)
View と ViewModel を紐づけるために BindingContext に MainViewModel を設定します。(6 ~ 8行目)
<ContentPage
x:Class="Sample.MainPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:Sample.ViewModels" >
<ContentPage.BindingContext>
<vm:MainViewModel />
</ContentPage.BindingContext>
<StackLayout>
<Button
x:Name="MyButton"
Command="{Binding ClickedCommand}"
CommandParameter="{Binding Source={x:Reference MyButton}}"
HorizontalOptions="Center"
Text="ボタン"
VerticalOptions="Center" />
</StackLayout>
</ContentPage>
Android エミュレーターで実行すると、次のような結果になります。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/e56ec73b6d7f58149ee47d26203ccd25.gif)
アニメーションをカスタマイズする
Microsoft が提供している CommunityToolkit.Maui ライブラリと ViewExtensions クラスのメソッドを組み合わせることで、次のように Button のアニメーションをカスタマイズできます。
![](https://marunaka-blog.com/wp-content/uploads/2023/05/1146a959d2b477a759c120cd0a345366.gif)
Button のアニメーションをカスタマイズしたい方は、次の記事を参照してください。
![](https://marunaka-blog.com/wp-content/uploads/2023/05/2ffa0dda7dd8e8cd3ed54b59a5b7e3bf-300x200.jpg)
まとめ
![](https://marunaka-blog.com/wp-content/uploads/2023/04/c35f903f10ed2371757ca77d9f41dce9.png)
この記事では .NET MAUI の Button を使う方法を紹介しました。
Button はテキストを表示し、タップまたはクリックをトリガーとして処理を実行する UI コントロールです。
Clicked イベントを使って、タップまたはクリックの処理を記述することができます。また、Command プロパティを利用することで MVVM パターンに従ったアプリ開発が可能になります。
この記事が Button を使用する際の参考になれば幸いです。
以上、最後まで読んで頂きありがとうございました。
![](https://marunaka-blog.com/wp-content/uploads/2023/04/259c955856c5bdc619d88605c3a5c583-300x200.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/03/2f5a8ba6b1682610f773da3b2f1516f9-300x169.jpg)
![](https://marunaka-blog.com/wp-content/uploads/2022/09/1c0278efd52188a8154c18b8b21f1be2-300x169.jpg)