ImageButton

.NET Multi-platform App 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 は Clicked、Pressed、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 つのプロパティで構成されます。

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

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

ImageButton を押して放す

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

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

ImageButton の表示状態

ImageButton には PressedVisualState があり、有効になっている場合に、押されたときに 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>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

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

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

ImageButton を無効にする

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