Xamarin.Forms ImageButton

2024-01-26 21:19| 来源: 网络整理| 查看: 265

Xamarin.Forms ImageButton 项目 07/13/2023

下载示例

ImageButton 显示图像并响应点击或单击，该点击或单击指示应用程序执行特定任务。

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

注意

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

本指南中的代码示例取自 FormsGallery 示例。

设置图像源

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

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

属性 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 事件：

事件 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 单击不是有效的操作。在这些情况下， ImageButton 应通过将属性 IsEnabled 设置为 false来禁用。

使用命令接口

应用程序可以在不处理Clicked事件的情况下响应ImageButton点击。实现 ImageButton 名为命令或命令接口的替代通知机制。这由两个属性组成：

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

此方法适用于数据绑定，尤其是在实现 Model-View-ViewModel (MVVM) 体系结构时。

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

按下并释放 ImageButton

除了 Clicked 事件，ImageButton 还定义了 Pressed 和 Released 事件。当 Pressed 手指按下 ImageButton时，或者按下鼠标按钮时，指针位于上时，会发生该 ImageButton事件。松 Released 开手指或鼠标按钮时发生该事件。通常，事件 Clicked 也会在事件的同时 Released 触发，但如果手指或鼠标指针在松开之前从表面 ImageButton 滑动，则可能不会发生该 Clicked 事件。

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

ImageButton 外观

除了继承自 View 类的属性ImageButton外，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 可视状态：

指定 PressedVisualState 按下时 ImageButton ，其 Scale 属性将从默认值 1 更改为 0.8。指定 NormalVisualState 当处于正常状态时 ImageButton ，其 Scale 属性将设置为 1。因此，整体效果是，当按下时 ImageButton ，会将其重新缩放为略小，当释放时 ImageButton ，它会重新缩放到其默认大小。

有关视觉状态的详细信息，请参阅Xamarin.Forms视觉状态管理器。