ImageButton

Статья
08/30/2024

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

ImageButton определяет следующие свойства:

AspectAspectТип , определяет, как изображение масштабируется, чтобы соответствовать области отображения.
BorderColor, тип Color, описывает цвет границы кнопки.
BorderWidth, тип double, определяет ширину границы кнопки.
Command, типа ICommand, определяет команду, выполняемую при нажатии кнопки.
CommandParameter( тип object) — это параметр, передаваемый в Command.
CornerRadiusintТип , описывает угловой радиус границы кнопки.
IsLoadingboolТип , представляет состояние загрузки образа. Значение по умолчанию этого свойства равно false.
IsOpaqueboolТип , определяет, должен ли MAUI .NET рассматривать изображение как непрозрачный при отрисовке. Значение по умолчанию этого свойства равно false.
IsPressedboolтип , представляет, нажимается ли кнопка. Значение по умолчанию этого свойства равно false.
PaddingThicknessТип , определяет заполнение кнопки.
Source, типа ImageSource, указывает изображение, отображаемое в виде содержимого кнопки.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Свойство Aspect можно задать для одного из членов Aspect перечисления:

Fill — растягивает изображение, чтобы полностью заполнить его ImageButton. Это может привести к искажению изображения.
AspectFill — клипирует изображение таким образом, чтобы оно заполнялось ImageButton при сохранении пропорции.
AspectFit — почтовые ящики изображения (при необходимости), чтобы все изображение соответствовало ImageButtonпустому пробелу, добавляемого к верхней или нижней части, в зависимости от того, является ли изображение широким или высоким. Это значение перечисления Aspect по умолчанию.
Center — центрируется изображение при ImageButton сохранении пропорции.

Кроме того, ImageButton определяет Clickedи PressedReleased события. Событие Clicked возникает, когда ImageButton касание с пальцем или указателем мыши освобождается из поверхности кнопки. Событие Pressed возникает, когда пальцем ImageButtonнажимает клавишу, или кнопка мыши нажимается на указатель, расположенный над ним ImageButton. Событие Released возникает при освобождении пальца или кнопки мыши. Как правило, Clicked событие также вызывается одновременно с Released событием, но если указатель мыши скользит от поверхности ImageButton перед выпуском, Clicked это событие может не произойти.

Внимание

Для ImageButton ответа на касания должны быть заданы true его IsEnabled свойства.

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

Снимок экрана: ImageButton.

Эквивалентный код C# для создания ImageButton :

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")}";
};

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

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

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

Этот подход подходит в связи с привязкой данных, особенно при реализации шаблона Model-View-ViewModel (MVVM). Дополнительные сведения о команде см. в статье "Кнопка " в командном интерфейсе.

Пресса и выпуск ImageButton

Событие Pressed возникает, когда пальцем нажимает ImageButtonклавишу, или кнопка мыши нажимается на указатель, расположенный над ним ImageButton. Событие 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 состояние. Если вы используете стили ResourceDictionary , созданные шаблоном проекта приложения .NET MAUI, у вас уже будет неявный ImageButton стиль, определяющий PointerOver состояние.

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

Отключение ImageButton

Иногда приложение вводит состояние, в котором ImageButton щелчк не является допустимой операцией. В таких случаях следует отключить, ImageButton задав для свойства значение falseIsEnabled .

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