Xamarin.Forms ImageButton

Статья
12/04/2019

ImageButton отображает изображение и реагирует на касание или щелчок, который направляет приложение для выполнения определенной задачи.

Представление ImageButton объединяет Button представление и Image представление для создания кнопки, содержимое которой является изображением. Пользователь нажимает ImageButton пальцем или щелкает его мышью, чтобы направить приложение для выполнения конкретной задачи. Однако, в отличие от Button представления, ImageButton представление не имеет понятия о виде текста и текста.

Примечание.

Button Хотя представление определяет Image свойство, которое позволяет отображать изображение на Buttonобъекте, это свойство предназначено для отображения небольшого значка рядом с текстомButton.

Настройка источника изображения

ImageButton определяет Source свойство, которое должно быть задано изображением для отображения в кнопке, при этом источник изображения является файлом, URI, ресурсом или потоком. Дополнительные сведения о загрузке изображений из разных источников см. в разделе "Изображения".Xamarin.Forms

В следующем примере показано, как создать экземпляр в ImageButton 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. В этом примере для него задан локальный файл, который будет загружен из каждого проекта платформы, что приводит к следующим снимкам экрана:

По умолчанию прямоугольный 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 ответа на касания должны быть заданы true его IsEnabled свойства.

В следующем примере показано, как создать экземпляр 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 или для различения нескольких ImageButton объектов, использующих одно и то же Clicked событие.

Этот конкретный Clicked обработчик увеличивает счетчик и отображает значение счетчика Labelв :

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 задав для свойства значение falseIsEnabled .

Использование интерфейса команды

Приложение может реагировать на ImageButton касания без обработки Clicked события. Реализует ImageButton альтернативный механизм уведомлений, называемый командой или интерфейсом команд . Это состоит из двух свойств:

Command тип ICommand, интерфейс, определенный System.Windows.Input в пространстве имен.
CommandParameter свойство типа Object.

Этот подход подходит в связи с привязкой данных и особенно при реализации архитектуры Model-View-ViewModel (MVVM).

Дополнительные сведения об использовании командного интерфейса см. в руководстве "Кнопка " с помощью командного интерфейса.

Нажатие и освобождение ImageButton

Помимо события ClickedImageButton также определяет события Pressed и Released. Это Pressed событие возникает, когда пальцем нажимает клавишу ImageButton, или кнопка мыши нажимается указателем, расположенным над ним ImageButton. Событие 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 имеет значение Pressed VisualState , которое можно использовать для запуска визуального изменения 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>

Указывает Pressed VisualState , что при ImageButton нажатии нажатия его Scale свойство будет изменено со значения по умолчанию от 1 до 0,8. Указывает Normal VisualState , что при ImageButton обычном состоянии его Scale свойство будет иметь значение 1. Таким образом, общий эффект заключается в том, что при ImageButton нажатии она будет немного меньше, а при ImageButton выпуске она будет масштабирована до размера по умолчанию.

Дополнительные сведения о визуальных состояниях см. в разделе "Диспетчер визуальных состоянийXamarin.Forms".

Поделиться через

Xamarin.Forms ImageButton

Настройка источника изображения

Обработка щелчков ImageButton

Отключение ImageButton

Использование интерфейса команды

Нажатие и освобождение ImageButton

Внешний вид ImageButton

Визуальные состояния ImageButton

Дополнительные ресурсы