Xamarin.Forms ImageButton

2019-12-04

ImageButton 显示图像并对指示应用程序执行特定任务的点击或单击做出响应。

ImageButton 视图结合了 Button 视图和 Image 视图，以创建内容为图像的按钮。用户用手指按下 ImageButton 或用鼠标单击它可指示应用程序执行特定任务。但是，与 Button 视图不同，ImageButton 视图没有文本和文本外观的概念。

注意

虽然 Button 视图定义了一个 Image 属性，允许您在 Button 上显示图像，但此属性旨在显示 Button 文本旁边的小图标时使用。

选择图像源

ImageButton 定义一个 Source 属性，应将该属性设置为要在按钮中显示的图像，图像源为文件、URI、资源或流。有关从不同源加载图像的详细信息，请参阅 Xamarin.Forms 中的图像。

以下示例演示如何在 XAML 中实例化 ImageButton：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

       <ImageButton Source="XamarinLogo.png"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Source 属性指定在 ImageButton 中显示的图像。在本示例中，其设置为将要从每个平台项目加载的本地文件，生成的屏幕截图如下：

默认情况下，ImageButton 是矩形，但你可以使用 CornerRadius 属性为其提供圆角。有关 ImageButton 外观的详细信息，请参阅 ImageButton 外观。

注意

虽然 ImageButton 可以加载动态 GIF，但它只会显示 GIF 的第一帧。

以下示例演示如何创建一个在功能上相当于前一 XAML 示例的页面，但该页面完全是使用 C# 的：

public class ImageButtonDemoPage : ContentPage
{
    public ImageButtonDemoPage()
    {
        Label header = new Label
        {
            Text = "ImageButton",
            FontSize = 50,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };

        ImageButton imageButton = new ImageButton
        {
            Source = "XamarinLogo.png",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        // Build the page.
        Title = "ImageButton Demo";
        Content = new StackLayout
        {
            Children = { header, imageButton }
        };
    }
}

处理 ImageButton 单击

ImageButton 定义了一个 Clicked 事件；当用户用手指或鼠标指针点击 ImageButton 时，会触发此事件。当手指或鼠标按钮离开 ImageButton 的图面时，会触发此事件。 ImageButton 必须将其 IsEnabled 属性设置为 true，才能响应点击。

以下示例演示如何实例化 XAML 中的 ImageButton 并处理其 Clicked 事件：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
        <Label Text="ImageButton"
               FontSize="50"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

       <ImageButton Source="XamarinLogo.png"
                    HorizontalOptions="Center"
                    VerticalOptions="CenterAndExpand"
                    Clicked="OnImageButtonClicked" />

        <Label x:Name="label"
               Text="0 ImageButton clicks"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

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 中显示计数器值：

以下示例演示如何创建一个在功能上相当于前一 XAML 示例的页面，但该页面完全是使用 C# 的：

public class ImageButtonDemoPage : ContentPage
{
    Label label;
    int clickTotal = 0;

    public ImageButtonDemoPage()
    {
        Label header = new Label
        {
            Text = "ImageButton",
            FontSize = 50,
            FontAttributes = FontAttributes.Bold,
            HorizontalOptions = LayoutOptions.Center
        };

        ImageButton imageButton = new ImageButton
        {
            Source = "XamarinLogo.png",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };
        imageButton.Clicked += OnImageButtonClicked;

        label = new Label
        {
            Text = "0 ImageButton clicks",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        // Build the page.
        Title = "ImageButton Demo";
        Content = new StackLayout
        {
            Children =
            {
                header,
                imageButton,
                label
            }
        };
    }

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

禁用 ImageButton

有时，应用程序处于特定状态，其中特定 ImageButton 单击不是有效操作。在这些情况下，应将 IsEnabled 属性设置为 false，从而禁用 ImageButton。

使用命令接口

应用程序可以在不处理 Clicked 事件的情况下响应 ImageButton 点击。 ImageButton 执行称作命令或发布命令接口的替代通知机制。这包含两个属性：

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

此方法适用与数据绑定连接的情况，尤其是在实现模型-视图-视图模型 (MVVM) 体系结构时。

有关使用命令界面的详细信息，请参阅按钮指南中的使用命令界面。

按下和松开 ImageButton

除了 Clicked 事件，ImageButton 还定义了 Pressed 和 Released 事件。当手指按下 ImageButton，或者通过将指针放在 ImageButton 上来按下鼠标按钮时，会发生 Pressed 事件。松开手指或鼠标按钮时，会发生 Released 事件。通常，Clicked 事件也与 Released 事件同时触发，但是如果手指或鼠标指针在被松开之前离开 ImageButton 的图面，那么可能不会发生 Clicked 事件。

有关这些事件的详细信息，请参阅按钮指南中的按下和松开按钮。

ImageButton 外观

除了 ImageButton 从 View 类继承的属性之外，ImageButton 还定义了几个影响其外观的属性：

Aspect 是图像的缩放方式以适应显示区域。
BorderColor 是 ImageButton 周围区域的颜色。
BorderWidth 是边框的宽度。
CornerRadius 是 ImageButton 的圆角半径。

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

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

注意

ImageButton 类还具有 Margin 和 Padding 属性，这些属性控制 ImageButton 的布局行为。有关详细信息，请参阅边距和填充。

ImageButton 视觉状态

ImageButton具有一个PressedVisualState，可用于在用户按下时启动视觉更改ImageButton，前提是它已启用。

下面的 XAML 示例显示了如何为 Pressed 状态定义可视化状态：

<ImageButton Source="XamarinLogo.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。 Normal VisualState 指定在 ImageButton 处于正常状态时，其 Scale 属性将设置为 1。因此，总体效果是，按下 ImageButton 时，它被重新缩放为稍小的尺寸，而松开 ImageButton 时，它被重新缩放为默认尺寸。

若要详细了解视觉对象状态，请参阅 Xamarin.Forms 视觉对象状态管理器。

通过