Xamarin.Forms GambarButton

Artikel
12/04/2019

ImageButton menampilkan gambar dan merespons ketukan atau klik yang mengarahkan aplikasi untuk melakukan tugas tertentu.

Tampilan ImageButton menggabungkan Button tampilan dan Image tampilan untuk membuat tombol yang kontennya adalah gambar. Pengguna menekan ImageButton dengan jari atau mengkliknya dengan mouse untuk mengarahkan aplikasi untuk melakukan tugas tertentu. Namun, tidak seperti Button tampilan, ImageButton tampilan tidak memiliki konsep tampilan teks dan teks.

Catatan

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

Mengatur sumber gambar

ImageButtonSource menentukan properti yang harus diatur ke gambar untuk ditampilkan di tombol, dengan sumber gambar adalah file, URI, sumber daya, atau aliran. Untuk informasi selengkapnya tentang memuat gambar dari sumber yang berbeda, lihat Gambar di Xamarin.Forms.

Contoh berikut menunjukkan cara membuat ImageButton instans di 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>

Properti Source menentukan gambar yang muncul di ImageButton. Dalam contoh ini diatur ke file lokal yang akan dimuat dari setiap proyek platform, menghasilkan cuplikan layar berikut:

Secara default, ImageButton persegi panjang, tetapi Anda dapat memberikan sudut bulat dengan menggunakan CornerRadius properti . Untuk informasi selengkapnya tentang ImageButton tampilan, lihat Tampilan ImageButton.

Catatan

ImageButton Meskipun dapat memuat GIF animasi, gif hanya akan menampilkan bingkai pertama GIF.

Contoh berikut menunjukkan cara membuat halaman yang secara fungsional setara dengan contoh XAML sebelumnya, tetapi sepenuhnya di 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 }
        };
    }
}

Menangani klik ImageButton

ImageButtonClicked menentukan peristiwa yang diaktifkan saat pengguna mengetuk ImageButton dengan jari atau penunjuk mouse. Peristiwa dipicu ketika jari atau tombol mouse dilepaskan dari permukaan ImageButton. ImageButton properti harus IsEnabled diatur ke untuk true merespons ketukan.

Contoh berikut menunjukkan cara membuat instans ImageButton di XAML dan menangani peristiwanya 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>

Peristiwa Clicked diatur ke penanganan aktivitas bernama OnImageButtonClicked yang terletak di file code-behind:

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

Ketika diketuk ImageButton , metode akan OnImageButtonClicked dijalankan. Argumen sender adalah yang ImageButton bertanggung jawab atas peristiwa ini. Anda dapat menggunakan ini untuk mengakses ImageButton objek, atau untuk membedakan antara beberapa ImageButton objek yang berbagi peristiwa yang sama Clicked .

Handler khusus Clicked ini menaikkan penghitung dan menampilkan nilai penghitung dalam :Label

Contoh berikut menunjukkan cara membuat halaman yang secara fungsional setara dengan contoh XAML sebelumnya, tetapi sepenuhnya di C#:

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

Menonaktifkan ImageButton

Terkadang aplikasi berada dalam status tertentu di mana klik tertentu ImageButton bukan operasi yang valid. Dalam kasus tersebut ImageButton , harus dinonaktifkan dengan mengatur propertinya IsEnabled ke false.

Menggunakan antarmuka perintah

Dimungkinkan bagi aplikasi untuk menanggapi ketukan ImageButton tanpa menangani Clicked peristiwa. menerapkan ImageButton 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 cocok sehubungan dengan pengikatan data, dan terutama saat menerapkan arsitektur Model-View-ViewModel (MVVM).

Untuk informasi selengkapnya tentang menggunakan antarmuka perintah, lihat Menggunakan antarmuka perintah di panduan Tombol .

Menekan dan melepaskan ImageButton

Clicked Selain peristiwa, ImageButton juga menentukan Pressed dan Released peristiwa. Peristiwa Pressed terjadi ketika jari menekan pada , atau tombol mouse ditekan ImageButtondengan penunjuk yang diposisikan di ImageButtonatas . Peristiwa Released terjadi ketika tombol jari atau mouse dilepaskan. Umumnya, Clicked peristiwa juga diaktifkan pada saat yang sama dengan Released peristiwa, tetapi jika jari atau penunjuk mouse menjauh dari permukaan ImageButton sebelum dilepaskan, Clicked peristiwa mungkin tidak terjadi.

Untuk informasi selengkapnya tentang peristiwa ini, lihat Menekan dan merilis tombol di panduan Tombol .

Tampilan ImageButton

Selain properti yang ImageButton mewarisi dari View kelas , ImageButton juga mendefinisikan beberapa properti yang memengaruhi penampilannya:

Aspect adalah bagaimana gambar akan diskalakan agar sesuai dengan area tampilan.
BorderColor adalah warna area di ImageButtonsekitar .
BorderWidth adalah lebar batas.
CornerRadius adalah radius sudut dari ImageButton.

Properti Aspect dapat diatur ke salah satu anggota Aspect enumerasi:

Fill - membentangkan gambar untuk sepenuhnya dan mengisi ImageButtondengan tepat . Ini dapat mengakibatkan gambar terdistorsi.
AspectFill - mengklip gambar sehingga mengisi ImageButton sambil mempertahankan rasio aspek.
AspectFit - kotak surat gambar (jika perlu) sehingga seluruh gambar cocok dengan ImageButton, dengan ruang kosong ditambahkan ke atas/bawah atau samping tergantung pada apakah gambar lebar atau tinggi. Ini adalah nilai default enumerasi Aspect .

Catatan

Kelas ini ImageButton juga memiliki Margin properti dan Padding yang mengontrol perilaku ImageButtontata letak . Untuk informasi selengkapnya, lihat Margin dan Padding.

Status visual ImageButton

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

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

<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>

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

Untuk informasi selengkapnya tentang status visual, lihat Xamarin.Forms Visual State Manager.

Bagikan melalui

Xamarin.Forms GambarButton

Mengatur sumber gambar

Menangani klik ImageButton

Menonaktifkan ImageButton

Menggunakan antarmuka perintah

Menekan dan melepaskan ImageButton

Tampilan ImageButton

Status visual ImageButton

Sumber Daya Tambahan: