Xamarin.Forms ImageButton 'a

Makale
12/02/2021
Okumak için 5 dakika

ImageButton, bir görüntü görüntüler ve bir dokunarak veya tıklama 'e yanıt verir ve uygulamayı belirli bir görevi yürütmek üzere yönlendirir.

ImageButtonGörünüm, ButtonImage içeriği görüntü olan bir düğme oluşturmak için görünümü ve görünümü birleştirir. Kullanıcı ImageButton belirli bir görevi yürütmek üzere uygulamayı yönlendirmek için bir parmakla ister bir parmağınızla ister bir fareyle tıklamıştır. Ancak, görünümün aksine ButtonImageButton Görünüm metin ve metin görünümü kavramı içermez.

Not

ButtonGörünüm bir Xamarin_Forms Button _Button_Image "Data-LinkType =" Absolute-path ">Image özelliği tanımladığında, üzerinde bir resim görüntülemenize olanak tanıyan Button Bu özellik, metnin yanında küçük bir simge görüntülenirken kullanılmak üzere tasarlanmıştır Button .

Bu kılavuzdaki kod örnekleri, Formsgallery örneğindenalınır.

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

ImageButton görüntü Source kaynağı bir dosya, URI, kaynak veya akış olacak şekilde, düğme içinde 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 Images in Xamarin.Forms ..

Aşağıdaki örnek, XAML içindeki bir öğesinin örneğini oluşturmayı gösterir ImageButton :

<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 görüntülenen resmi belirtir ImageButton . Bu örnekte, her platform projesinden yüklenecek yerel bir dosya olarak ayarlanır ve aşağıdaki ekran görüntülerine neden olur:

temel ImageButton

Varsayılan olarak ImageButton dikdörtgen ' dir, ancak özelliğini kullanarak yuvarlatılmış köşeler sağlayabilirsiniz CornerRadius . Görünüm hakkında daha fazla bilgi için ImageButton bkz. ImageButton.

Not

Bir ImageButton ANIMASYONLU GIF yükleyebilir ancak yalnızca GIF 'in ilk çerçevesini görüntüler.

Aşağıdaki örnek, önceki XAML örneğine işlevsel olarak eşdeğer bir sayfanın nasıl oluşturulduğunu gösterir, ancak tamamen C# ' de:

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

ImageButtonClickedKullanıcı ImageButton bir parmak ya da fare işaretçisi ile dokunduğunda tetiklenen bir olay tanımlar. Bu olay, parmak veya fare düğmesi ' ın yüzeyinden bırakıldığında tetiklenir ImageButton . Tap 'a ImageButton yanıt vermek IsEnabled için özelliği olarak ayarlanmış olmalıdır true .

Aşağıdaki örnek, ImageButton xaml 'de örneğini oluşturma ve olayını işleme işlemlerinin nasıl yapılacağını göstermektedir 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>

ClickedOlay, OnImageButtonClicked arka plan kod dosyasında bulunan adlı 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. senderBağımsız değişkeni ImageButton Bu olaydan sorumludur. Bu ImageButton nesneyi nesnesine erişmek veya ImageButton aynı olayı paylaşan birden çok nesne arasında ayrım yapmak için kullanabilirsiniz Clicked .

Bu özel Clicked işleyici bir sayacı artırır ve sayaç değerini bir ile görüntüler Label :

Temel temel ImageButton öğesine tıkladığınızda temel öğesine tıklayın

Aşağıdaki örnek, önceki XAML örneğine işlevsel olarak eşdeğer bir sayfanın nasıl oluşturulduğunu gösterir, ancak tamamen C# ' de:

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 'ı devre dışı bırakma

Bazen bir uygulama belirli bir durumda, belirli bir ImageButton tıklama geçerli bir işlem değildir. Bu durumlarda, ImageButton özelliği olarak ayarlanarak devre dışı bırakılmalıdır IsEnabledfalse .

Komut arabirimini kullanma

Bir uygulamanın ImageButton olayı işlemeye gerek kalmadan dokunmasına yanıt vermesi mümkündür Clicked . , ImageButtonImageButton veya komutlama arabirimi olarak adlandırılan alternatif bir bildirim mekanizması uygular. Bu iki özelliklerden oluşur:

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

Bu yaklaşım, veri bağlama ile bağlantı için ve özellikle Model-View-ViewModel (MVVM) mimarisi uygularken uygundur.

Komut arabirimini kullanma hakkında daha fazla bilgi için, bkz. düğme kılavuzunda komut arabirimini kullanma .

ImageButton 'ı basma ve serbest bırakma

ImageButton öğesi, Clicked olayının yanı sıra Pressed ve Released olaylarını da tanımlar. PressedOlay, bir parmak üzerine bastığında ImageButton ya da işaretçi üzerine yerleştirilmiş fare düğmesine basıldığında meydana gelir ImageButton . Bu Released olay, parmak veya fare düğmesi serbest bırakıldığında gerçekleşir. Genellikle olay, Clicked olay ile aynı anda de tetiklenecektir Released , ancak parmak ya da fare işaretçisi serbest bırakılmadan önce onun yüzeyinden uzaklaştığında ImageButtonClicked olay gerçekleşmeyebilir.

Bu olaylar hakkında daha fazla bilgi için düğme kılavuzundaki düğmeye basma ve serbest bırakma konusuna bakın.

ImageButton görünümü

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

Aspect görüntünün, görüntüleme alanına sığacak şekilde nasıl ölçeklendirileceği.
BorderColor , çevresindeki bir alanın rengidir ImageButton .
BorderWidth Kenarlığın genişliğidir.
CornerRadius , öğesinin köşe yarıçapdır ImageButton .

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

_Aspect_Fill "Data-LinkType =" mutlak yol ">Fill -görüntüyü tamamen ve tam olarak dolduracak şekilde uzatır ImageButton . Bu, görüntünün bozuk oluşmasına neden olabilir.
Xamarin_Forms _Aspect_AspectFill "Data-LinkType =" Absolute-path ">AspectFill -görüntüyü, ImageButton en boy oranını korurken dolduracak şekilde kırpar.
Xamarin_Forms _Aspect_AspectFit "Data-LinkType =" Absolute-path ">AspectFit -Letter, görüntünün ImageButton geniş veya uzun olmasına bağlı olarak üst/alt tarafa veya kenarlara eklenen boş alana sahip olacak şekilde görüntüyü (gerekliyse). Bu, numaralandırmanın varsayılan değeridir Aspect .

Not

ImageButtonSınıfta Ayrıca ImageButton , "Data-LinkType =" Absolute-path ">Margin ve Padding öğesinin düzen davranışını denetleyen özellikler _View_Margin ImageButton Xamarin_Forms de vardır. Daha fazla bilgi için bkz. Kenar Boşlukları ve Doldurma.

ImageButton Görsel durumları

ImageButton, PressedVisualStateImageButton etkin hale geldiğinde, Kullanıcı tarafından basıldığında bir görsel değişikliği başlatmak için kullanılabilir.

Aşağıdaki XAML örneği, durum için görsel durumun nasıl tanımlanacağını göstermektedir 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>

PressedVisualStateImageButton Basıldığında, Xamarin_Forms Pressed _VisualElement_Scale "Data-LinkType =" Absolute-path ">Scale özelliğinin varsayılan 1 ' den 0,8 ' e değiştirildiğini belirtir. , NormalVisualStateImageButton Normal bir durumda olduğunda, Scale özelliğin özelliğinin 1 olarak ayarlanacağını belirtir. Bu nedenle, genel efekt, ImageButton basıldığında, ölçeklendirildi biraz daha küçük olması ve ne zaman ImageButton yayınlandığı zaman, varsayılan boyutuna ölçeklendirildi.

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

FormsGallery örneği