ImageButton

项目
02/13/2024

.NET Multi-platform App UI (.NET MAUI) ImageButton 视图将 Button 视图和 Image 视图组合在一起，以创建内容为图像的按钮。用手指按下 ImageButton 或用鼠标单击它时，它会指示应用执行任务。但是，与 Button 不同的是，ImageButton 视图没有文本和文本外观的概念。

ImageButton 定义以下属性:

Aspect，类型为 Aspect，确定图像的缩放方式以适应显示区域。
BorderColor，类型为 Color，描述按钮的边框颜色。
BorderWidth，类型为 double，定义按钮边框的宽度。
Command，类型为 ICommand，定义在点击按钮时执行的命令。
CommandParameter，类型为 object，是传递给 Command 的参数。
CornerRadius，类型为 int，描述按钮边框的角半径。
IsLoading，类型为 bool，表示图像的加载状态。此属性的默认值为 false。
IsOpaque，类型为 bool，确定 .NET MAUI 在呈现图像时是否应将图像视为不透明。此属性的默认值为 false。
IsPressed，类型为 bool，表示是否按下了按钮。此属性的默认值为 false。
Padding，类型为 Thickness，确定按钮的填充。
Source，类型为 ImageSource，指定要显示为按钮内容的图像。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

可以将 Aspect 属性设置为 Aspect 枚举的其中一个成员：

Fill - 拉伸图像以完全、准确地填充 ImageButton。这可能会导致图像失真。
AspectFill - 剪裁图像，使其填充 ImageButton，同时保持纵横比。
AspectFit - 为图像设置上下黑边（如有必要），以使整个图像适合 ImageButton，并根据图像的宽度或高度，在其上下以及两侧添加空白区域。这是 Aspect 枚举的默认值。
Center - 将图像居中置于 ImageButton，同时保持纵横比。

此外，ImageButton 还定义 Clicked、Pressed 和 Released 事件。用手指点击 ImageButton 或在按钮表面上松开鼠标指针时，将引发 Clicked 事件。如果用手指按下 ImageButton，或在指针位于 ImageButton 上时按下鼠标按钮，将引发 Pressed 事件。松开手指或鼠标按钮时，将引发 Released 事件。通常，引发 Released 事件的同时也会引发 Clicked 事件，但如果手指或鼠标指针在松开之前从 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 中显示计数器值：

Screenshot of an ImageButton.

用于创建 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 实现一种称为命令或发送命令接口的替代通知机制。这包含两个属性：

Command，类型为 ICommand，System.Windows.Input 命名空间中定义的接口。
Object 类型的 CommandParameter 属性。

此方法适用于数据绑定，尤其是在实现模型-视图-视图模型 (MVVM) 模式时。有关命令的详细信息，请参阅按钮一文中的使用命令接口。

按下并松开 ImageButton

用手指按下 ImageButton 或在鼠标指针位于 ImageButton 上时按下鼠标按钮，就会触发 Pressed 事件。松开手指或鼠标按钮时，将引发 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。