Кнопки в .NET MAUI: Button и ImageButton

В .NET MAUI можно выделить два вида кнопок — это Button (обычные кнопки) и ImageButton (кнопка у которой в качестве содержимого выступает какая-либо картинка). Рассмотрим работу с этими компонентами управления.

Кнопка Button

С этой кнопкой мы сталкивались уже не раз. Button — это обычная кнопка, у которой можно выделить следующие полезные для нас свойства:

Кроме этого, кнопка Button определяет три события:

• Clicked — возникает, когда мы сделали клик по кнопке
• Pressed — возникает, когда мы зажали кнопку мыши (кнопка находится в нажатом состоянии)
• Released — возникает, когда мы отпустили кнопку.

Все три события имет тип EventHandler. Рассмотрим работу со свойствами и событиями кнопки Button.  Создадим новое приложение .NET MAUI и изменим код файла MainPage.xaml.cs следующим образом:

public partial class MainPage : ContentPage
{
    int count = 0;

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;
        CounterBtn.Text = $"Нажата {count} раз";
        CounterBtn.CornerRadius = 0;
    }

    private void OnCounterPressed(object sender, EventArgs e)
    {
        CounterBtn.Text = "Это очень длинный текст, который может не уместиться в одну строку, поэтому мы его будем усекать";
        CounterBtn.Background = Color.FromRgb(255, 0, 0);
        CounterBtn.CornerRadius = 20;
    }

    private void OnCounterReleased(object sender, EventArgs e)
    {
        CounterBtn.Background = Color.FromRgb(0, 0, 255);
        CounterBtn.CornerRadius = 0;

    }
}

Здесь мы определили обработчики для всех трех событий кнопки. Теперь цвет и текст кнопки будет изменяться в зависимости от её состояния. Теперь перейдем в файл MainPage.xaml и изменим код кнопки следующим образом:

<Button
    x:Name="CounterBtn"
    Text="Click me" 
    LineBreakMode="TailTruncation"
    Clicked="OnCounterClicked"
    Pressed="OnCounterPressed"
    Released="OnCounterReleased"
    HorizontalOptions="Fill" />

Запустим приложение и проверим результат. Так будет выглядеть кнопка при запуске приложения:

В нажатом состоянии

Обратите внимание на текст кнопки — окончание текста заменяется на многоточие. И, наконец, когда мы отпускаем кнопку:

Кнопка ImageButton

Кнопка ImageButton содержит также, как и Button три события — Clicked, Pressed и Released, но, в отличие от Button, в качестве содержимого может использовать не текст, а какое-либо изображение. В связи с этим, у ImageButton определены следующие свойства:

Продемонстрируем работу с ImageButton, изменив файл MainPage.xaml следующим образом:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp7.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <ImageButton Aspect="AspectFit"
                         Clicked="OnCounterClicked" 
                         Pressed="OnCounterPressed" 
                         Released="OnCounterReleased"
                         Source="dotnet_bot.png" 
                         BorderWidth="5" 
                         BorderColor="Blue" 
                         CornerRadius="10"/>

            <Label
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />

            <Label
                Text="Welcome to &#10;.NET Multi-platform App UI"
                Style="{StaticResource SubHeadline}"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                LineBreakMode="TailTruncation"
                Clicked="OnCounterClicked"
                Pressed="OnCounterPressed"
                Released="OnCounterReleased"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Теперь то изображение, которое по умолчанию показывалось на странице приложение стало кнопкой:

<ImageButton Aspect="AspectFit"
             Clicked="OnCounterClicked" 
             Pressed="OnCounterPressed" 
             Released="OnCounterReleased"
             Source="dotnet_bot.png" 
             BorderWidth="5" 
             BorderColor="Blue" 
             CornerRadius="10"/>

Здесь мы также определили обработчики событий кнопки и установили ширину и цвет границы кнопки. Запустим приложение и посмотрим на результат:

Можете покликать по картинке и убедиться, что те события, которые мы определили у Button, также срабатывают.

Итого

Кнопки в .NET MAUI реагируют на три события — Clicked, Pressed и Released. При этом, мы можем использовать два вида кнопок: Button — обычная кнопка с текстовым содержимым и ImageButton — кнопка, у которой в качестве содержимого выступает какое-либо изображение.