Xamarin.Forms Imagebutton

Makale
03/08/2024

ImageButton bir görüntü görüntüler ve bir uygulamayı belirli bir görevi gerçekleştirmeye yönlendiren bir dokunmaya veya tıklamaya yanıt verir.

Görünüm, ImageButton içeriği resim olan bir düğme oluşturmak için görünümü ve Image görünümü birleştirirButton. Kullanıcı, uygulamayı belirli bir görevi gerçekleştirmeye ImageButton yönlendirmek için bir parmakla basıyor veya fareyle tıklar. Ancak, görünümden Button farklı olarak, görünümde ImageButton metin ve metin görünümü kavramı yoktur.

Not

Button Görünüm üzerinde görüntü görüntülemenizi sağlayan bir ImageButtonözellik tanımlasa da, bu özellik metnin yanında Button küçük bir simge görüntülenirken kullanılmak üzere tasarlanmıştır.

Bu kılavuzdaki kod örnekleri FormsGallery örneğinden alınmıştır.

Görüntü kaynağını ayarlama

ImageButton , görüntü kaynağı bir Source dosya, URI, kaynak veya akış olacak şekilde düğmede görüntülenecek görüntüye ayarlanması gereken bir özelliği tanımlar. Farklı kaynaklardan görüntü yükleme hakkında daha fazla bilgi için bkz . içindeki Xamarin.Formsgörüntüler.

Aşağıdaki örnekte XAML'de örneği ImageButton oluşturma gösterilmektedir:

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

Source özelliği içinde ImageButtongörüntülenen görüntüyü belirtir. Bu örnekte, her platform projesinden yüklenecek yerel bir dosyaya ayarlanır ve bu da aşağıdaki ekran görüntüleriyle sonuçlanır:

varsayılan olarak dikdörtgendir ImageButton , ancak özelliğini kullanarak CornerRadius yuvarlatılmış köşeler verebilirsiniz. Görünüm hakkında ImageButton daha fazla bilgi için bkz . ImageButton görünümü.

Not

Bir ImageButton animasyonlu GIF'i yükleyebilirken, GIF'in yalnızca ilk karesini görüntüler.

Aşağıdaki örnekte, işlevsel olarak önceki XAML örneğine eşdeğer ancak tamamen C# dilinde olan bir sayfanın nasıl oluşturulacağı gösterilmektedir:

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

ImageButton tıklamalarını işleme

ImageButtonClicked kullanıcı bir parmak veya fare işaretçisi ile dokunduğunda ImageButton tetiklenen bir olayı tanımlar. Olay, parmak veya fare düğmesi öğesinin yüzeyinden ImageButtonserbest bırakıldığında tetiklenir. özelliğinin ImageButtonIsEnabled dokunmalara true yanıt verecek şekilde ayarlanmış olması gerekir.

Aşağıdaki örnekte, XAML'de bir ImageButton örneğinin nasıl başlatılıp olayının nasıl işleneceğini gösterilmektedir 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>

Olay Clicked , arka planda kod dosyasında bulunan adlı OnImageButtonClicked bir olay işleyicisine ayarlanır:

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 öğesine dokunulduğunda OnImageButtonClicked yöntemi yürütülür. sender Bağımsız değişken bu olayın sorumlusudurImageButton. Bunu nesneye erişmek ImageButton veya aynı Clicked olayı paylaşan birden çok ImageButton nesne arasında ayrım yapmak için kullanabilirsiniz.

Bu belirli Clicked işleyici bir sayacı artırır ve sayaç değerini içinde Labelgörüntüler:

Aşağıdaki örnekte, işlevsel olarak önceki XAML örneğine eşdeğer ancak tamamen C# dilinde olan bir sayfanın nasıl oluşturulacağı gösterilmektedir:

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

ImageButton'i devre dışı bırakma

Bazen bir uygulama, belirli bir tıklamanın geçerli bir işlem olmadığı belirli ImageButton bir durumda olur. Bu gibi durumlarda, ImageButton özelliği falseolarak ayarlanarak IsEnabled devre dışı bırakılmalıdır.

Komut arabirimini kullanma

Bir uygulamanın olayı işlemeden Clicked dokunmalara ImageButton yanıt vermesi mümkündür. komutu ImageButton veya komut arabirimi olarak adlandırılan alternatif bir bildirim mekanizması uygular. Bu iki özelliklerden oluşur:

Command türünde ICommand, ad alanında System.Windows.Input tanımlanan bir arabirim.
CommandParameter türünde Objectözelliği.

Bu yaklaşım, veri bağlamayla ve özellikle Model-View-ViewModel (MVVM) mimarisini uygularken uygundur.

Komut arabirimini kullanma hakkında daha fazla bilgi için Düğme kılavuzundaki Komut arabirimini kullanma bölümüne bakın.

ImageButton tuşuna basma ve bırakma

ImageButton öğesi, Clicked olayının yanı sıra Pressed ve Released olaylarını da tanımlar. Olay, Pressed bir parmak üzerine bastığında ImageButtonveya işaretçi üzerinde konumlandırılmış bir fare düğmesine basıldığında ImageButtongerçekleşir. Olay, Released parmak veya fare düğmesi serbest bırakıldığında gerçekleşir. Genellikle olay Clicked , olayla aynı anda Released tetiklenir, ancak parmak veya fare işaretçisi yayımlanmadan önce yüzeyinden ImageButton uzaklaşırsa, Clicked olay gerçekleşmeyebilir.

Bu olaylar hakkında daha fazla bilgi için Düğme kılavuzundaki düğmeye basma ve bırakma bölümüne bakın.

ImageButton görünümü

sınıfından devralan ImageButtonView özelliklere ek olarak, ImageButton görünümünü etkileyen çeşitli özellikleri de tanımlar:

Aspect görüntünün görüntü alanına sığacak şekilde nasıl ölçeklendirileceğidir.
BorderColor , öğesini çevreleyen bir alanın rengidir ImageButton.
BorderWidth kenarlık genişliğidir.
CornerRadius , köşe yarıçapıdır ImageButton.

Aspect özelliği, numaralandırmanın üyelerinden Aspect birine ayarlanabilir:

Fill - görüntüyü tamamen genişletir ve tam olarak doldurur ImageButton. Bu, görüntünün bozulmasına neden olabilir.
AspectFill - görüntüyü, en boy oranını korurken dolduracak şekilde klipsler ImageButton .
AspectFit - Resmin tamamının içine sığması ImageButtoniçin resmi (gerekirse) letterbox'lar; resmin geniş mi yoksa uzun mu olduğuna bağlı olarak üst/alt veya yanlara boş alan eklenir. Bu, numaralandırmanın Aspect varsayılan değeridir.

Not

sınıfında ImageButton ayrıca düzeninin davranışını ImageButtondenetleen ve Padding özellikleri vardırMargin. Daha fazla bilgi için bkz. Kenar Boşlukları ve Doldurma.

ImageButton görsel durumları

ImageButtonPressedVisualState etkin olması koşuluyla, kullanıcı tarafından basıldığında görsel bir değişiklik başlatmak için ImageButton kullanılabilecek bir öğesine sahiptir.

Aşağıdaki XAML örneğinde durum için görsel durumun nasıl tanımlanacağı gösterilmektedir Pressed :

<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, tuşuna basıldığında ImageButtonScale özelliğinin varsayılan değeri olan 1'den 0,8'e değiştirileceğini belirtir. , NormalVisualState normal bir durumda Scale olduğunda ImageButton özelliğinin 1 olarak ayarlandığını belirtir. Bu nedenle, genel etki, tuşuna basıldığında ImageButton biraz daha küçük olacak şekilde yeniden ölçeklendirilir ve serbest bırakıldığında ImageButton varsayılan boyutuna yeniden ölçeklendirilir.

Görsel durumlar hakkında daha fazla bilgi için bkzXamarin.Forms. Visual State Manager.

FormsGallery örneği