Tombol

UI Aplikasi Multi-platform .NET (.NET MAUI) Button menampilkan teks dan merespons ketukan atau klik yang mengarahkan aplikasi untuk melakukan tugas. Biasanya Button menampilkan string teks pendek yang menunjukkan perintah, tetapi juga dapat menampilkan gambar bitmap, atau kombinasi teks dan gambar. Ketika ditekan Button dengan jari atau diklik dengan mouse, ia memulai perintah tersebut.

Button menentukan properti berikut:

• BorderColor, dari jenis Color, menjelaskan warna batas tombol.
• BorderWidth, dari jenis double, menentukan lebar batas tombol.
• CharacterSpacing, dari jenis double, menentukan penspasian antara karakter teks tombol.
• Command, dari jenis ICommand, menentukan perintah yang dijalankan saat tombol diketuk.
• CommandParameter, dari jenis object, adalah parameter yang diteruskan ke Command.
• ContentLayout, dari jenis ButtonContentLayout, menentukan objek yang mengontrol posisi gambar tombol dan penspasian antara gambar dan teks tombol.
• CornerRadius, dari jenis int, menjelaskan radius sudut batas tombol.
• FontAttributes, dari jenis FontAttributes, menentukan gaya teks.
• FontAutoScalingEnabled, dari jenis bool, menentukan apakah teks tombol akan mencerminkan preferensi penskalaan yang diatur dalam sistem operasi. Nilai default properti ini adalah true.
• FontFamily, dari jenis string, mendefinisikan keluarga font.
• FontSize, dari jenis double, mendefinisikan ukuran font.
• ImageSource, dari jenis ImageSource, menentukan gambar bitmap untuk ditampilkan sebagai konten tombol.
• LineBreakMode, dari jenis LineBreakMode, menentukan bagaimana teks harus ditangani ketika tidak dapat pas pada satu baris.
• Padding, dari jenis Thickness, menentukan padding tombol.
• Text, dari jenis string, mendefinisikan teks yang ditampilkan sebagai konten tombol.
• TextColor, dari jenis Color, menjelaskan warna teks tombol.
• TextTransform, dari jenis TextTransform, mendefinisikan casing teks tombol.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Catatan

Saat Button mendefinisikan ImageSource properti, yang memungkinkan Anda menampilkan gambar pada Button, properti ini dimaksudkan untuk digunakan saat menampilkan ikon kecil di Button samping teks.

Selain itu, Button mendefinisikan Clicked, Pressed, dan Released peristiwa. Peristiwa Clicked dinaikkan saat Button ketukan dengan jari atau penunjuk mouse dilepaskan dari permukaan tombol. Peristiwa Pressed dinaikkan ketika jari menekan pada , atau tombol mouse ditekan Buttondengan penunjuk yang diposisikan di Buttonatas . Peristiwa Released dinaikkan ketika tombol jari atau mouse dilepaskan. Umumnya, Clicked peristiwa juga dinaikkan pada saat yang sama dengan Released peristiwa, tetapi jika jari atau penunjuk mouse menjauh dari permukaan Button sebelum dirilis, Clicked peristiwa mungkin tidak terjadi.

Penting

Harus Button mengatur propertinya IsEnabled agar true dapat merespons ketukan.

Buat Tombol

Untuk membuat tombol, buat Button objek dan tangani peristiwanya Clicked .

Contoh XAML berikut menunjukkan cara membuat Button:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.BasicButtonClickPage"
             Title="Basic Button Click">
    <StackLayout>
        <Button Text="Click to Rotate Text!"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />
        <Label x:Name="label"
               Text="Click the Button above"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

Properti Text menentukan teks yang muncul di Button. Kejadian Clicked diatur ke penanganan aktivitas bernama OnButtonClicked. Handler ini terletak di file code-behind:

public partial class BasicButtonClickPage : ContentPage
{
    public BasicButtonClickPage ()
    {
        InitializeComponent ();
    }

    async void OnButtonClicked(object sender, EventArgs args)
    {
        await label.RelRotateTo(360, 1000);
    }
}

Dalam contoh ini, ketika diketuk Button , OnButtonClicked metode akan dijalankan. Argumen sender adalah objek yang Button bertanggung jawab atas peristiwa ini. Anda dapat menggunakan ini untuk mengakses Button objek, atau untuk membedakan antara beberapa Button objek yang berbagi peristiwa yang sama Clicked . Handler Clicked memanggil fungsi animasi yang memutar Label 360 derajat dalam 1000 milidetik:

Kode C# yang setara untuk membuat adalah Button :

Button button = new Button
{
    Text = "Click to Rotate Text!",
    VerticalOptions = LayoutOptions.Center,
    HorizontalOptions = LayoutOptions.Center
};
button.Clicked += async (sender, args) => await label.RelRotateTo(360, 1000);

Menggunakan antarmuka perintah

Aplikasi dapat merespons ketukan Button tanpa menangani Clicked peristiwa. menerapkan Button mekanisme pemberitahuan alternatif yang disebut perintah atau antarmuka perintah . Ini terdiri dari dua properti:

• Command jenis ICommand, antarmuka yang ditentukan dalam System.Windows.Input namespace layanan.
• CommandParameter properti jenis Object.

Pendekatan ini sangat cocok sehubungan dengan pengikatan data, dan terutama saat menerapkan pola Model-View-ViewModel (MVVM). Dalam aplikasi MVVM, viewmodel menentukan properti jenis ICommand yang kemudian terhubung ke Button objek dengan pengikatan data. .NET MAUI juga mendefinisikan Command kelas dan Command<T> yang mengimplementasikan ICommand antarmuka dan membantu viewmodel dalam menentukan properti jenis ICommand. Untuk informasi selengkapnya tentang perintah, lihat Memerintahkan.

Contoh berikut menunjukkan kelas viewmodel yang sangat sederhana yang mendefinisikan properti jenis double bernama Number, dan dua properti jenis ICommand bernama MultiplyBy2Command dan DivideBy2Command:

public class CommandDemoViewModel : INotifyPropertyChanged
{
    double number = 1;

    public event PropertyChangedEventHandler PropertyChanged;

    public ICommand MultiplyBy2Command { get; private set; }
    public ICommand DivideBy2Command { get; private set; }

    public CommandDemoViewModel()
    {
        MultiplyBy2Command = new Command(() => Number *= 2);
        DivideBy2Command = new Command(() => Number /= 2);
    }

    public double Number
    {
        get
        {
            return number;
        }
        set
        {
            if (number != value)
            {
                number = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Number"));
            }
        }
    }
}

Dalam contoh ini, kedua ICommand properti diinisialisasi dalam konstruktor kelas dengan dua objek jenis Command. Command Konstruktor menyertakan sedikit fungsi (disebut execute argumen konstruktor) yang menggandakan atau memisahkan nilai Number properti.

Contoh XAML berikut menggunakan CommandDemoViewModel kelas :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.BasicButtonCommandPage"
             Title="Basic Button Command">
    <ContentPage.BindingContext>
        <local:CommandDemoViewModel />
    </ContentPage.BindingContext>

    <StackLayout>
        <Label Text="{Binding Number, StringFormat='Value is now {0}'}"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
        <Button Text="Multiply by 2"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Command="{Binding MultiplyBy2Command}" />
        <Button Text="Divide by 2"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Command="{Binding DivideBy2Command}" />
    </StackLayout>
</ContentPage>

Dalam contoh ini, Label elemen dan dua Button objek berisi pengikatan ke tiga properti di CommandDemoViewModel kelas . Saat dua Button objek diketuk, perintah dijalankan, dan nilai angka berubah. Keuntungan dari pendekatan ini daripada Clicked handler adalah bahwa semua logika yang melibatkan fungsionalitas halaman ini terletak di viewmodel daripada file code-behind, mencapai pemisahan antarmuka pengguna yang lebih baik dari logika bisnis.

Dimungkinkan Command juga bagi objek untuk mengontrol pengaktifan dan penonaktifan Button objek. Misalnya, Anda ingin membatasi rentang nilai angka antara 2¹⁰ dan 2^–10. Anda dapat menambahkan fungsi lain ke konstruktor (disebut canExecute argumen) yang mengembalikan true jika Button harus diaktifkan:

public class CommandDemoViewModel : INotifyPropertyChanged
{
    ···
    public CommandDemoViewModel()
    {
        MultiplyBy2Command = new Command(
            execute: () =>
            {
                Number *= 2;
                ((Command)MultiplyBy2Command).ChangeCanExecute();
                ((Command)DivideBy2Command).ChangeCanExecute();
            },
            canExecute: () => Number < Math.Pow(2, 10));

        DivideBy2Command = new Command(
            execute: () =>
            {
                Number /= 2;
                ((Command)MultiplyBy2Command).ChangeCanExecute();
                ((Command)DivideBy2Command).ChangeCanExecute();
            },
            canExecute: () => Number > Math.Pow(2, -10));
    }
    ···
}

Dalam contoh ini, panggilan ke ChangeCanExecute metode diperlukan sehingga Command metode dapat memanggil canExecute metode dan menentukan apakah Button harus dinonaktifkan Command atau tidak. Dengan perubahan kode ini, karena angka mencapai batas, dinonaktifkan Button .

Dimungkinkan juga bagi dua elemen atau lebih Button untuk terikat ke properti yang sama ICommand . Elemen Button dapat dibedakan menggunakan CommandParameter properti .Button Dalam hal ini, Anda harus menggunakan kelas generik Command<T> . Objek CommandParameter kemudian diteruskan sebagai argumen ke execute metode dan canExecute . Untuk informasi selengkapnya, lihat Memerintahkan.

Tekan dan lepaskan tombol

Peristiwa Pressed dinaikkan ketika jari menekan pada , atau tombol mouse ditekan Buttondengan penunjuk yang diposisikan di Buttonatas . Peristiwa Released dinaikkan ketika tombol jari atau mouse dilepaskan. Umumnya, Clicked peristiwa juga dinaikkan pada saat yang sama dengan Released peristiwa, tetapi jika jari atau penunjuk mouse menjauh dari permukaan Button sebelum dirilis, Clicked peristiwa mungkin tidak terjadi.

Contoh XAML berikut menunjukkan Label dan Button dengan handler yang dilampirkan untuk Pressed peristiwa dan Released :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.PressAndReleaseButtonPage"
             Title="Press and Release Button">
    <StackLayout>
        <Button Text="Press to Rotate Text!"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Pressed="OnButtonPressed"
                Released="OnButtonReleased" />
        <Label x:Name="label"
               Text="Press and hold the Button above"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

File code-behind menganimasikan Label kapan peristiwa Pressed terjadi, tetapi menangguhkan rotasi saat peristiwa Released terjadi:

public partial class PressAndReleaseButtonPage : ContentPage
{
    IDispatcherTimer timer;
    Stopwatch stopwatch = new Stopwatch();

    public PressAndReleaseButtonPage()
    {
        InitializeComponent();

        timer = Dispatcher.CreateTimer();
        timer.Interval = TimeSpan.FromMilliseconds(16);
        timer.Tick += (s, e) =>
        {
            label.Rotation = 360 * (stopwatch.Elapsed.TotalSeconds % 1);
        };
    }

    void OnButtonPressed(object sender, EventArgs args)
    {
        stopwatch.Start();
        timer.Start();
    }

    void OnButtonReleased(object sender, EventArgs args)
    {
        stopwatch.Stop();
        timer.Stop();
    }
}

Hasilnya adalah bahwa satu-satunya Label berputar saat jari bersentuhan dengan Button, dan berhenti ketika jari dilepaskan.

Status visual tombol

Button memiliki PressedVisualState yang dapat digunakan untuk memulai perubahan visual ke Button saat ditekan, asalkan diaktifkan.

Contoh XAML berikut menunjukkan cara menentukan status visual untuk Pressed status:

<Button Text="Click me!"
        ...>
    <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>
</Button>

Dalam contoh ini, PressedVisualState menentukan bahwa ketika Button ditekan, propertinya Scale akan diubah dari nilai default 1 menjadi 0,8. NormalVisualState Menentukan bahwa ketika Button berada dalam keadaan normal, propertinya Scale akan diatur ke 1. Oleh karena itu, efek keseluruhannya adalah ketika Button ditekan, skalanya akan sedikit lebih kecil, dan ketika Button dirilis, skalanya akan diskalakan ulang ke ukuran defaultnya.

Untuk informasi selengkapnya tentang status visual, lihat Status visual.

Menggunakan bitmap dengan tombol

Kelas Button menentukan ImageSource properti yang memungkinkan Anda menampilkan gambar bitmap kecil pada Button, baik sendiri atau dalam kombinasi dengan teks. Anda juga dapat menentukan bagaimana teks dan gambar disusun. Properti ImageSource berjenis ImageSource, yang berarti bahwa bitmap dapat dimuat dari file, sumber daya tersemat, URI, atau aliran.

Bitmap tidak diskalakan agar sesuai dengan Button. Ukuran terbaik biasanya antara 32 dan 64 unit independen perangkat, tergantung pada seberapa besar Anda ingin bitmap menjadi.

Anda dapat menentukan bagaimana Text properti dan ImageSource diatur pada Button menggunakan ContentLayout properti .Button Properti ini berjenis ButtonContentLayout, dan konstruktornya memiliki dua argumen:

• Anggota ImagePosition enumerasi: Left, , RightTop, atau Bottom menunjukkan bagaimana bitmap muncul relatif terhadap teks.
• Nilai double untuk penspasian antara bitmap dan teks.

Di XAML, Anda dapat membuat Button dan mengatur ContentLayout properti dengan hanya menentukan anggota enumerasi, atau penspasian, atau keduanya dalam urutan apa pun yang dipisahkan oleh koma:

<Button Text="Button text"
        ImageSource="button.png"
        ContentLayout="Right, 20" />

Kode C# yang setara adalah:

Button button = new Button
{
    Text = "Button text",
    ImageSource = new FileImageSource
    {
        File = "button.png"
    },
    ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Right, 20)
};

Nonaktifkan Tombol

Terkadang aplikasi memasuki status di mana Button klik bukan operasi yang valid. Dalam kasus seperti itu Button , dapat dinonaktifkan dengan mengatur propertinya IsEnabled ke false.