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 jenisdouble
, menentukan lebar batas tombol.CharacterSpacing
, dari jenisdouble
, menentukan penspasian antara karakter teks tombol.Command
, dari jenis ICommand, menentukan perintah yang dijalankan saat tombol diketuk.CommandParameter
, dari jenisobject
, adalah parameter yang diteruskan keCommand
.ContentLayout
, dari jenisButtonContentLayout
, menentukan objek yang mengontrol posisi gambar tombol dan penspasian antara gambar dan teks tombol.CornerRadius
, dari jenisint
, menjelaskan radius sudut batas tombol.FontAttributes
, dari jenisFontAttributes
, menentukan gaya teks.FontAutoScalingEnabled
, dari jenisbool
, menentukan apakah teks tombol akan mencerminkan preferensi penskalaan yang diatur dalam sistem operasi. Nilai default properti ini adalahtrue
.FontFamily
, dari jenisstring
, mendefinisikan keluarga font.FontSize
, dari jenisdouble
, mendefinisikan ukuran font.- ImageSource, dari jenis ImageSource, menentukan gambar bitmap untuk ditampilkan sebagai konten tombol.
LineBreakMode
, dari jenisLineBreakMode
, menentukan bagaimana teks harus ditangani ketika tidak dapat pas pada satu baris.Padding
, dari jenisThickness
, menentukan padding tombol.Text
, dari jenisstring
, mendefinisikan teks yang ditampilkan sebagai konten tombol.TextColor
, dari jenis Color, menjelaskan warna teks tombol.TextTransform
, dari jenisTextTransform
, 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 dalamSystem.Windows.Input
namespace layanan.CommandParameter
properti jenisObject
.
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 210 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 Pressed
VisualState 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, Pressed
VisualState menentukan bahwa ketika Button ditekan, propertinya Scale
akan diubah dari nilai default 1 menjadi 0,8. Normal
VisualState 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
, ,Right
Top
, atauBottom
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
.
Saran dan Komentar
https://aka.ms/ContentUserFeedback.
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat:Kirim dan lihat umpan balik untuk