ImageButton

.NET マルチプラットフォーム アプリ UI (.NET MAUI) ImageButton ビューは、Button ビューと Image ビューを組み合わせて、コンテンツが画像であるボタンを作成します。 ImageButton を指で押すか、マウスでクリックすると、タスクを実行するようにアプリに指示します。 ただし、Button とは異なり、ImageButton ビューにはテキストとテキストの外観の概念はありません。

ImageButton には、次のプロパティが定義されています。

• Aspect 型の Aspectは、表示領域に合わせてイメージを拡大縮小する方法を指定します。
• Color 型の BorderColor は、ボタンの境界線の色を表します。
• double 型の BorderWidth は、ボタンの境界線の幅を定義します。
• ICommand 型の Command は、ボタンがタップされたときに実行されるコマンドを定義します。
• object 型の CommandParameter は、Command に渡されるパラメーターです。
• int 型の CornerRadius は、ボタンの境界線の角の半径を表します。
• bool 型の IsLoading は、イメージの読み込み状態を表します。 このプロパティの既定値は false です。
• bool 型の IsOpaque は、.NET MAUI が画像をレンダリングするときに不透明として扱うかどうかを決定します。 このプロパティの既定値は false です。
• bool 型の IsPressed は、ボタンが押されているかどうかを表します。 このプロパティの既定値は false です。
• Thickness 型の Padding は、ボタンのパディングを決定します。
• ImageSource 型の Source は、ボタンの内容として表示する画像を指定します。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

Aspect プロパティは、Aspect 列挙型メンバーのいずれかに設定する必要があります。

• Fill - ImageButton を完全かつ正確に埋めるように画像を伸ばします。 これにより、画像の歪みが発生する可能性があります。
• AspectFill - 縦横比を維持したまま、ImageButton を満たすように画像をクリップします。
• AspectFit - 画像全体が ImageButton に収まるように画像をレターボックス化します（必要に応じて）。画像の幅が広いか高いかに応じて、上下または左右に空白スペースが追加されます。 これは、Aspect 列挙型の既定値です。
• Center - 縦横比を維持しながら、画像を ImageButton の中央に表示します。

さらに、ImageButton は Pressed、Clicked、Released の各イベントを定義します。 Clicked イベントは、指またはマウス ポインターを使った ImageButton のタップがボタンの表面から離されると発生します。 Pressed イベントは、指が ImageButton を押すか、ポインターが ImageButton に置かれた状態でマウス ボタンが押されたときに発生します。 Released イベントは、指またはマウス ボタンが離されると発生します。 通常、Clicked イベントは Released イベントと同時に発生しますが、指またはマウス ポインターが放される前に ImageButton の表面からスライドすると、Clicked イベントが発生しない可能性があります。

重要

ImageButton がタップに応答するには、IsEnabled プロパティが true に設定されている必要があります。

ImageButton の作成

イメージ ボタンを作成するには、ImageButton オブジェクトを作成して Source プロパティを設定し、Clicked イベントを処理します。

以下の XAML の例では、ImageButton を作成する方法示します。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlGallery.Views.XAML.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
       <ImageButton Source="image.png"
                    Clicked="OnImageButtonClicked"
                    HorizontalOptions="Center"
                    VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

Source プロパティでは、ImageButton に表示するテキストを指定します。 Clicked イベントは、OnImageButtonClicked という名前のイベント ハンドラーに設定されます。 このハンドラーは、分離コード ファイルにあります。

public partial class ImageButtonDemoPage : ContentPage
{
    int clickTotal;

    public ImageButtonDemoPage()
    {
        InitializeComponent();
    }

    void OnImageButtonClicked(object sender, EventArgs e)
    {
        clickTotal += 1;
        label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
    }
}

この例では、ImageButton をタップすると、OnImageButtonClicked メソッドが実行されます。 引数 sender は、このイベントに責任を持つ ImageButton です。 これを使用して、ImageButton オブジェクトにアクセスしたり、同じ Clicked イベントを共有する複数の ImageButton オブジェクトを区別したりできます。 Clicked ハンドラーはカウンターをインクリメントし、カウンター値を Label で表示します。

ImageButton を作成するための同等の C# コードは次のとおりです。

Label label;
int clickTotal = 0;
...

ImageButton imageButton = new ImageButton
{
    Source = "XamarinLogo.png",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.CenterAndExpand
};
imageButton.Clicked += (s, e) =>
{
  clickTotal += 1;
  label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
};

コマンド インターフェイスの使用

アプリは、Clicked イベントを処理せずに ImageButton のタップに応答できます。 ImageButton は、コマンド インターフェイスまたはコマンド実行インターフェイスと呼ばれる別の通知メカニズムを実装します。 これは、次の 2 つのプロパティで構成されます。

• ICommand 型の Command (System.Windows.Input 名前空間で定義されたインターフェイス)
• Object 型の CommandParameter プロパティ

この方法は、データ バインディングに関連して、特に Model-View-ViewModel (MVVM) パターンを実装する場合に適しています。 コマンドの詳細については、「ボタン」の記事の「コマンド インターフェイスを使用する」を参照してください。

ImageButton を押して放す

Pressed イベントは、指で ImageButton を押すか、ポインターを ImageButton の上に置いてマウス ボタンを押すと発生します。 Released イベントは、指またはマウス ボタンが離されると発生します。 通常、Clicked イベントは Released イベントと同時に発生しますが、指またはマウス ポインターが放される前に ImageButton の表面からスライドすると、Clicked イベントが発生しない可能性があります。

これらのイベントの詳細については、「ボタン」の記事の「ボタンを押して放す」を参照してください。

ImageButton の表示状態

ImageButton には Pressed VisualState があり、これが有効な場合、押されると ImageButton への視覚的変更を開始するために使用できます。

次の XAML の例は、Pressed 状態の表示状態を定義する方法を示しています。

<ImageButton Source="image.png"
             ...>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Pressed">
                <VisualState.Setters>
                    <Setter Property="Scale"
                            Value="0.8" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PointerOver" />            
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

この例では、Pressed VisualState は ImageButton が押された場合に、その Scale プロパティがその既定値の 1 から 0.8 に変更されることを指定します。 Normal VisualState は ImageButton が通常状態の場合、その Scale プロパティが 1 に設定されることを指定します。 したがって、全体的な効果は、ImageButton が押されると、少し小さいサイズに再スケーリングされ、ImageButton が離されると既定のサイズに再スケーリングされることです。

重要

ImageButton が Normal 状態に戻るには、VisualStateGroup に PointerOver 状態も定義されている必要があります。 .NET MAUI アプリ プロジェクト テンプレートによって作成された ResourceDictionary スタイルを使用する場合は、PointerOver 状態が定義されている暗黙的な ImageButton スタイルが既にあります。

表示状態の詳細については、「表示状態」をご覧ください。

ImageButton を無効にする

アプリが ImageButton クリックが有効な操作ではない状態になる場合があります。 そのような場合は、ImageButton の IsEnabled プロパティを false に設定して無効にする必要があります。