Xamarin.Forms ImageButtonXamarin.Forms ImageButton

Загрузить образец загрузить примерDownload Sample Download the sample

ImageButton отображает изображение и реагирует на касание или щелчок, который направляет приложению выполнения определенной задачи.The ImageButton displays an image and responds to a tap or click that directs an application to carry out a particular task.

ImageButton Просмотреть объединяет Button представление и Image представление для создания кнопки, содержимое которого является изображением.The ImageButton view combines the Button view and Image view to create a button whose content is an image. Пользователь нажимает клавишу ImageButton пальцем или щелкает его с помощью мыши, чтобы настроить приложение для выполнения определенной задачи.The user presses the ImageButton with a finger or clicks it with a mouse to direct the application to carry out a particular task. Однако в отличие от Button представлении ImageButton представление не поддерживает понятие текста и внешний вид текста.However, unlike the Button view, the ImageButton view has no concept of text and text appearance.

Примечание

Хотя Button определяет представление Image свойство, которое позволяет отображать изображение на Button, это свойство предназначено для использования при отображении небольшой значок рядом с полем Button текста.While the Button view defines an Image property, that allows you to display a image on the Button, this property is intended to be used when displaying a small icon next to the Button text.

В примерах кода в этом руководстве, взяты из FormsGallery пример.The code examples in this guide are taken from the FormsGallery sample.

Установка источника изображенияSetting the image source

ImageButton Определяет Source свойство, которое должно быть присвоено изображение для отображения на кнопке, в качестве источника изображения файла, URI, ресурс или поток.ImageButton defines a Source property that should be set to the image to display in the button, with the image source being either a file, a URI, a resource, or a stream. Дополнительные сведения о загрузке изображений из различных источников, см. в разделе изображений в Xamarin.Forms.For more information about loading images from different sources, see Images in Xamarin.Forms.

В следующем примере показано, как создать экземпляр ImageButton в XAML:The following example shows how to instantiate a ImageButton in XAML:

<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.The Source property specifies the image that appears in the ImageButton. В этом примере задается в локальный файл, которые будут загружены из каждого проекта платформы, что на следующих снимках экрана:In this example it's set to a local file that will be loaded from each platform project, resulting in the following screenshots:

Основные ImageButtonBasic ImageButton

По умолчанию ImageButton представляет собой прямоугольник, но можно дать углы округленное ИТ с помощью CornerRadius свойство.By default, the ImageButton is rectangular, but you can give it rounded corners by using the CornerRadius property. Дополнительные сведения о ImageButton внешний вид, см. в разделе внешний вид ImageButton.For more information about ImageButton appearance, see ImageButton appearance.

В следующем примере показано, как создать страницу, которая является функциональным эквивалентом предыдущего примера XAML, но полностью в C#:The following example shows how to create a page that is functionally equivalent to the previous XAML example, but entirely in 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 нажимает кнопкуHandling ImageButton clicks

ImageButton Определяет Clicked событие, возникающее, когда пользователь касается ImageButton с указателем мыши или палец.ImageButton defines a Clicked event that is fired when the user taps the ImageButton with a finger or mouse pointer. Событие при отжатии кнопки мыши или палец поверхности от ImageButton.The event is fired when the finger or mouse button is released from the surface of the ImageButton. ImageButton Должен иметь его IsEnabled свойству присвоено true реагировать на касания.The ImageButton must have its IsEnabled property set to true to respond to taps.

В следующем примере показано, как создать экземпляр ImageButton в XAML и обработки его Clicked событий:The following example shows how to instantiate a ImageButton in XAML and handle its Clicked event:

<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 , расположенную в файл с выделенным кодом:The Clicked event is set to an event handler named OnImageButtonClicked that is located in the code-behind file:

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 выполнения метода.When the ImageButton is tapped, the OnImageButtonClicked method executes. sender Аргумент ImageButton инициатором этого события.The sender argument is the ImageButton responsible for this event. Это можно использовать для доступа к ImageButton объекта, или чтобы различать несколько ImageButton объектов с одинаковым Clicked событий.You can use this to access the ImageButton object, or to distinguish between multiple ImageButton objects sharing the same Clicked event.

Данный конкретный Clicked обработчик увеличивает значение счетчика и выводит значение счетчика в Label :This particular Clicked handler increments a counter and displays the counter value in a Label:

Основные щелчок ImageButtonBasic ImageButton Click

В следующем примере показано, как создать страницу, которая является функциональным эквивалентом предыдущего примера XAML, но полностью в C#:The following example shows how to create a page that is functionally equivalent to the previous XAML example, but entirely in 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")}";
    }
}

Отключение ImageButtonDisabling the ImageButton

Иногда приложение находится в определенном состоянии, там, где определенный ImageButton щелкните не является допустимой операцией.Sometimes an application is in a particular state where a particular ImageButton click is not a valid operation. В таком случае ImageButton следует отключить, задав его IsEnabled свойства false.In those cases, the ImageButton should be disabled by setting its IsEnabled property to false.

С помощью интерфейса команднойUsing the command interface

Существует возможность приложения реагировать на ImageButton касания без обработки Clicked событий.It is possible for an application to respond to ImageButton taps without handling the Clicked event. ImageButton Реализует механизм альтернативную вызывается команда или команды интерфейс.The ImageButton implements an alternative notification mechanism called the command or commanding interface. Он состоит из двух свойств:This consists of two properties:

Этот подход используется в связи с привязкой к данным и особенно в том случае, если реализация архитектуры Model-View-ViewModel (MVVM).This approach is suitable in connection with data-binding, and particularly when implementing the Model-View-ViewModel (MVVM) architecture.

Дополнительные сведения об использовании интерфейса командной см. в разделе с помощью интерфейса командной в кнопку руководства.For more information about using the command interface, see Using the command interface in the Button guide.

Нажатие и отпускание ImageButtonPressing and releasing the ImageButton

Помимо Clicked событий, ImageButton также определяет Pressed и Released события.Besides the Clicked event, ImageButton also defines Pressed and Released events. Pressed Событие возникает при нажатии палец ImageButton, или нажатии кнопки мыши с помощью указателя за пределы ImageButton.The Pressed event occurs when a finger presses on a ImageButton, or a mouse button is pressed with the pointer positioned over the ImageButton. Released Событие возникает при отпускании кнопки мыши или палец.The Released event occurs when the finger or mouse button is released. Как правило Clicked событие также инициируется в то же время, как Released события, но если указатель мыши или палец слайды от поверхности ImageButton до освобождения, Clicked событие может не произойти.Generally, the Clicked event is also fired at the same time as the Released event, but if the finger or mouse pointer slides away from the surface of the ImageButton before being released, the Clicked event might not occur.

Дополнительные сведения об этих событиях см. в разделе нажатие и отпускание кнопки в кнопку руководства.For more information about these events, see Pressing and releasing the button in the Button guide.

Внешний вид ImageButtonImageButton appearance

Помимо свойств, ImageButton наследует от View класса ImageButton также определяет несколько свойств, которые влияют на его внешний вид:In addition to the properties that ImageButton inherits from the View class, ImageButton also defines several properties that affect its appearance:

  • Aspect — как изображение будет масштабироваться в соответствии с отображаемой области.Aspect is how the image will be scaled to fit the display area.
  • BorderColor цвет области, окружающей ImageButton.BorderColor is the color of an area surrounding the ImageButton.
  • BorderWidth представляет ширину границы.BorderWidth is the width of the border.
  • CornerRadius — Это радиус скругления углов ImageButton.CornerRadius is the corner radius of the ImageButton.

Aspect Свойство может устанавливаться на один из членов Aspect перечисления:The Aspect property can be set to one of the members of the Aspect enumeration:

  • Fill -растягивает изображение для заполнения полностью и точно ImageButton.Fill - stretches the image to completely and exactly fill the ImageButton. Это может привести в образе искажен.This may result in the image being distorted.
  • AspectFill -обрезает изображение, чтобы он заполнял ImageButton при сохранении пропорций.AspectFill - clips the image so that it fills the ImageButton while preserving the aspect ratio.
  • AspectFit -горизонтальные рамки изображение (при необходимости), чтобы все изображение встраивается в ImageButton, с помощью пустого пространства, добавляемого в верх или низ или сторон в зависимости от того, является ли изображение шириной или высотой.AspectFit - letterboxes the image (if necessary) so that the entire image fits into the ImageButton, with blank space added to the top/bottom or sides depending on whether the image is wide or tall. Это значение по умолчанию Aspect перечисления.This is the default value of the Aspect enumeration.

Примечание

ImageButton Класс также имеет Margin и Padding свойства, которые управляют поведением макета ImageButton.The ImageButton class also has Margin and Padding properties that control the layout behavior of the ImageButton. Дополнительные сведения см. в разделе поля и заполнение.For more information, see Margin and Padding.

Визуальные состояния ImageButtonImageButton visual states

ImageButton имеет Pressed VisualState , можно использовать для запуска Визуальное изменение в ImageButton при нажатии пользователем, в условии, что он включен.ImageButton has a Pressed VisualState that can be used to initiate a visual change to the ImageButton when pressed by the user, provided that it's enabled.

В следующем примере XAML показано, как определить визуальное состояние для Pressed состояния:The following XAML example shows how to define a visual state for the Pressed state:

<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>

Pressed VisualState Указывает, что при ImageButton нажата, его Scale свойство изменяется со значения по умолчанию 1 к 0,8.The Pressed VisualState specifies that when the ImageButton is pressed, its Scale property will be changed from its default value of 1 to 0.8. Normal VisualState Указывает, что при ImageButton находится в обычном состоянии, его Scale будет установлено значение 1.The Normal VisualState specifies that when the ImageButton is in a normal state, its Scale property will be set to 1. Таким образом, общий эффект том, что при ImageButton является нажата, она масштабируется повторно немного меньше, и когда ImageButton является выпуска, она масштабируется повторно размер по умолчанию.Therefore, the overall effect is that when the ImageButton is pressed, it's rescaled to be slightly smaller, and when the ImageButton is released, it's rescaled to its default size.

Дополнительные сведения о визуальных состояниях см. в разделе Xamarin.Forms Диспетчер визуальных состояний.For more information about visual states, see The Xamarin.Forms Visual State Manager.