ImageButton

项目
08/30/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 事件。通常，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 的屏幕截图。

创建 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 执行称作命令或发布命令接口的替代通知机制。这包含两个属性：

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

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

按下和释放 ImageButton

手指按下 ImageButton 或鼠标指针位于 ImageButton 上时按下鼠标按钮，就会触发 Pressed 事件。释放手指或鼠标按钮时，将引发 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 单击无效操作的状态。在这些情况下，应将 IsEnabled 属性设置为 false，从而禁用 ImageButton。

通过