Xamarin.Forms Imagebutton

Artykuł
03/08/2024

Element ImageButton wyświetla obraz i reaguje na naciśnięcie lub kliknięcie, które kieruje aplikację do wykonania określonego zadania.

Widok ImageButton łączy Button widok i Image widok, aby utworzyć przycisk, którego zawartość jest obrazem. Użytkownik naciska ImageButton palcem lub klika go myszą, aby skierować aplikację do wykonania określonego zadania. Jednak w przeciwieństwie do Button widoku ImageButton widok nie ma pojęcia tekstu i wyglądu tekstu.

Uwaga

Button Podczas gdy widok definiuje Image właściwość, która umożliwia wyświetlanie obrazu na Buttonobiekcie , ta właściwość ma być używana podczas wyświetlania małej ikony obok Button tekstu.

Przykłady kodu w tym przewodniku pochodzą z przykładu FormsGallery.

Ustawianie źródła obrazu

ImageButtonSource Definiuje właściwość, która ma być ustawiona na obraz do wyświetlenia w przycisku, a źródło obrazu jest plikiem, identyfikatorem URI, zasobem lub strumieniem. Aby uzyskać więcej informacji na temat ładowania obrazów z różnych źródeł, zobacz Obrazy w programie Xamarin.Forms.

W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu ImageButton w języku 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>

Właściwość Source określa obraz wyświetlany w obiekcie ImageButton. W tym przykładzie ustawiono plik lokalny, który zostanie załadowany z każdego projektu platformy, co spowoduje wykonanie następujących zrzutów ekranu:

Domyślnie ImageButton obiekt jest prostokątny, ale można nadać jej zaokrąglone rogi za pomocą CornerRadius właściwości . Aby uzyskać więcej informacji na temat ImageButton wyglądu, zobacz ImageButton wygląd.

Uwaga

ImageButton Chociaż obiekt może załadować animowany plik GIF, będzie wyświetlać tylko pierwszą ramkę pliku GIF.

W poniższym przykładzie pokazano, jak utworzyć stronę, która jest funkcjonalnie równoważna poprzedniemu przykładowi XAML, ale w całości w języku 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 }
        };
    }
}

Obsługa kliknięć elementu ImageButton

ImageButtonClicked Definiuje zdarzenie, które jest wyzwalane, gdy użytkownik naciska ImageButton palcem lub wskaźnikiem myszy. Zdarzenie jest wyzwalane, gdy palec lub przycisk myszy jest zwalniany z powierzchni ImageButton. Właściwość ImageButton musi mieć ustawioną IsEnabled właściwość , aby true reagować na naciśnięcia.

W poniższym przykładzie pokazano, jak utworzyć wystąpienie elementu ImageButton w języku XAML i obsługiwać jego Clicked zdarzenie:

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

Zdarzenie Clicked jest ustawione na program obsługi zdarzeń o nazwie OnImageButtonClicked , który znajduje się w pliku za kodem:

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

W przypadku naciśnięcia obiektu ImageButton jest wykonywana metoda OnImageButtonClicked. Argument sender jest ImageButton odpowiedzialny za to zdarzenie. Można go użyć, aby uzyskać dostęp do ImageButton obiektu lub rozróżnić wiele ImageButton obiektów współużytkowania tego samego Clicked zdarzenia.

Ta konkretna Clicked procedura obsługi zwiększa licznik i wyświetla wartość licznika w obiekcie Label:

W poniższym przykładzie pokazano, jak utworzyć stronę, która jest funkcjonalnie równoważna poprzedniemu przykładowi XAML, ale w całości w języku 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")}";
    }
}

Wyłączanie elementu ImageButton

Czasami aplikacja jest w określonym stanie, w którym określone ImageButton kliknięcie nie jest prawidłową operacją. W takich przypadkach właściwość powinna być wyłączona ImageButton , ustawiając jej IsEnabled właściwość na false.

Korzystanie z interfejsu poleceń

Aplikacja może reagować na ImageButton naciśnięcia bez obsługi Clicked zdarzenia. Funkcja ImageButton implementuje alternatywny mechanizm powiadamiania nazywany interfejsem polecenia lub polecenia . Składa się z dwóch właściwości:

Command typu ICommand, interfejs zdefiniowany w System.Windows.Input przestrzeni nazw.
CommandParameter właściwość typu Object.

Takie podejście jest odpowiednie w połączeniu z powiązaniem danych, a szczególnie podczas implementowania architektury Model-View-ViewModel (MVVM).

Aby uzyskać więcej informacji na temat korzystania z interfejsu poleceń, zobacz Korzystanie z interfejsu poleceń w przewodniku Przycisk .

Naciśnięcie i zwolnienie elementu ImageButton

Oprócz zdarzenia Clicked obiekt ImageButton definiuje zdarzenia Pressed i Released. Zdarzenie Pressed występuje, gdy naciśnięcie palca na ImageButtonobiekcie lub naciśnięcie przycisku myszy jest naciśnięty z wskaźnikiem umieszczonym ImageButtonnad . Zdarzenie Released występuje po zwolnieniu palca lub przycisku myszy. Ogólnie rzecz biorąc, Clicked zdarzenie jest również wyzwalane w tym samym czasie co Released zdarzenie, ale jeśli palec lub wskaźnik myszy przesuwa się od powierzchni ImageButton przed zwolnieniem, Clicked zdarzenie może nie wystąpić.

Aby uzyskać więcej informacji na temat tych zdarzeń, zobacz Naciśnięcie i zwolnienie przycisku w przewodniku Przycisk .

Wygląd elementu ImageButton

Oprócz właściwości ImageButton dziedzicujących po View klasie ImageButton definiuje również kilka właściwości, które mają wpływ na jej wygląd:

Aspect to sposób skalowania obrazu w celu dopasowania go do obszaru wyświetlania.
BorderColor to kolor obszaru otaczającego ImageButtonobiekt .
BorderWidth to szerokość obramowania.
CornerRadius to promień rogu obiektu ImageButton.

Właściwość Aspect można ustawić na jeden z elementów Aspect członkowskich wyliczenia:

Fill - rozciąga obraz do całkowitego ImageButtoni dokładnie wypełnienia . Może to spowodować zniekształcenie obrazu.
AspectFill - tworzy wycinkę obrazu tak, aby wypełniał ImageButton wartość przy zachowaniu współczynnika proporcji.
AspectFit - litery pola obrazu (w razie potrzeby), tak aby cały obraz mieścił się w ImageButtonobiekcie , z pustym miejscem dodanym do góry/dołu lub boków w zależności od tego, czy obraz jest szeroki, czy wysoki. Jest to wartość Aspect domyślna wyliczenia.

Uwaga

Klasa ImageButton ma Margin również właściwości i Padding kontrolujące zachowanie układu obiektu ImageButton. Aby uzyskać więcej informacji, zobacz Margines i wypełnienie.

Stany wizualizacji ImageButton

ImageButtonPressedVisualState element ma wartość , która może służyć do inicjowania zmiany wizualizacji ImageButton po naciśnięciu przez użytkownika, pod warunkiem, że jest włączona.

W poniższym przykładzie XAML pokazano, jak zdefiniować stan wizualizacji Pressed dla stanu:

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

Określa PressedVisualState , że po naciśnięciu ImageButton klawisza właściwość Scale zostanie zmieniona z domyślnej wartości 1 na 0,8. Określa NormalVisualState , że gdy ImageButton właściwość jest w stanie normalnym, jej Scale właściwość zostanie ustawiona na 1. W związku z tym ogólny efekt polega na tym, że po naciśnięciu ImageButton klawisza jest ona nieco mniejsza, a po jej wydaniu ImageButton zostanie ponownie przeskalowana do rozmiaru domyślnego.

Aby uzyskać więcej informacji na temat stanów wizualizacji, zobacz Xamarin.Forms Visual State Manager.

Przykład formsGallery

Xamarin.Forms Imagebutton

Ustawianie źródła obrazu

Obsługa kliknięć elementu ImageButton

Wyłączanie elementu ImageButton

Korzystanie z interfejsu poleceń

Naciśnięcie i zwolnienie elementu ImageButton

Wygląd elementu ImageButton

Stany wizualizacji ImageButton

Pokrewne łącza

Dodatkowe zasoby