Udostępnij za pośrednictwem

ImageButton

  • Artykuł

Widok interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) ImageButton łączy Button widok i Image widok w celu utworzenia przycisku, którego zawartość jest obrazem. Po naciśnięciu palca lub kliknięciu ImageButton go myszą aplikacja kieruje aplikację do wykonania zadania. Jednak w przeciwieństwie do Button ImageButton widoku nie ma pojęcia tekstu i wyglądu tekstu.

ImageButton definiuje następujące właściwości:

  • Aspect, typu Aspect, określa sposób skalowania obrazu w celu dopasowania go do obszaru wyświetlania.
  • BorderColor, typu Color, opisuje kolor obramowania przycisku.
  • BorderWidth, typu double, definiuje szerokość obramowania przycisku.
  • Command, typu ICommand, definiuje polecenie, które jest wykonywane po naciśnięciu przycisku.
  • CommandParameter, typu object, jest parametrem przekazywanym do Command.
  • CornerRadius, typu int, opisuje promień rogu obramowania przycisku.
  • IsLoading, typu bool, reprezentuje stan ładowania obrazu. Wartość domyślna tej właściwości to false.
  • IsOpaque, typu bool, określa, czy program .NET MAUI powinien traktować obraz jako nieprzezroczysty podczas renderowania. Wartość domyślna tej właściwości to false.
  • IsPressed, typu bool, reprezentuje, czy przycisk jest naciśnięty. Wartość domyślna tej właściwości to false.
  • Padding, typu Thickness, określa dopełnienie przycisku.
  • Source, typu ImageSource, określa obraz do wyświetlenia jako zawartość przycisku.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

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.
  • Center - wyśrodkuje obraz przy ImageButton zachowaniu współczynnika proporcji.

Ponadto definiuje Clickedzdarzenia ImageButton , Pressedi Released . Zdarzenie Clicked jest wywoływane, gdy ImageButton naciśnięcie palcem lub wskaźnikiem myszy jest zwalniane z powierzchni przycisku. Zdarzenie Pressed jest podniesione, gdy naciśnięcie palca na ImageButtonobiekcie lub naciśnięcie przycisku myszy jest naciskane z wskaźnikiem umieszczonym ImageButtonnad . Zdarzenie Released jest podniesione po zwolnieniu palca lub myszy. Ogólnie rzecz biorąc, Clicked zdarzenie jest również zgłaszane w tym samym czasie co Released zdarzenie, ale jeśli palec lub wskaźnik myszy przesuwa się z dala od powierzchni ImageButton przed zwolnieniem, Clicked zdarzenie może nie wystąpić.

Ważne

Właściwość ImageButton musi być IsEnabled ustawiona na true , aby odpowiadała na naciśnięcia.

Tworzenie elementu ImageButton

Aby utworzyć przycisk obrazu, utwórz ImageButton obiekt, ustaw jego właściwość i obsłuż jego Source Clicked zdarzenie.

W poniższym przykładzie XAML pokazano, jak utworzyć element ImageButton:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ControlGallery.Views.XAML.ImageButtonDemoPage"
             Title="ImageButton Demo">
    <StackLayout>
       <ImageButton Source="image.png"
                    Clicked="OnImageButtonClicked"
                    HorizontalOptions="Center"
                    VerticalOptions="Center" />
    </StackLayout>
</ContentPage>

Właściwość Source określa obraz wyświetlany w obiekcie ImageButton. Zdarzenie Clicked jest ustawione na program obsługi zdarzeń o nazwie OnImageButtonClicked. Ta procedura obsługi znajduje się w pliku za pomocą kodu:

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 tym przykładzie ImageButton , gdy element jest naciśnięty, metoda jest wykonywana 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. Procedura Clicked obsługi zwiększa licznik i wyświetla wartość licznika w obiekcie Label:

Zrzut ekranu przedstawiający element ImageButton.

Równoważny kod języka C# do utworzenia elementu ImageButton to:

Label label;
int clickTotal = 0;
...

ImageButton imageButton = new ImageButton
{
    Source = "XamarinLogo.png",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.CenterAndExpand
};
imageButton.Clicked += (s, e) =>
{
  clickTotal += 1;
  label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
};

Korzystanie z interfejsu poleceń

Aplikacja może reagować ImageButton na 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:

Takie podejście jest odpowiednie w połączeniu z powiązaniem danych, a szczególnie w przypadku implementowania wzorca Model-View-ViewModel (MVVM). Aby uzyskać więcej informacji na temat poleceń, zobacz Używanie interfejsu poleceń w artykule Przycisk .

Naciśnij i zwolnij element ImageButton

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

Aby uzyskać więcej informacji na temat tych zdarzeń, zobacz Naciśnij i zwolnij przycisk w artykule Przycisk .

Stany wizualizacji ImageButton

ImageButtonPressed VisualState element ma wartość , która może służyć do inicjowania zmiany wizualizacji po naciśnięciuImageButton, jeśli jest włączona.

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

<ImageButton Source="image.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>
            <VisualState x:Name="PointerOver" />            
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

W tym przykładzie Pressed VisualState parametr określa, że po naciśnięciu ImageButton jego Scale właściwość zostanie zmieniona z wartości domyślnej 1 na 0,8. Określa Normal VisualState , ż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 jest ona nieco mniejsza, a po jej wydaniu ImageButton zostanie ponownie przeskalowana do rozmiaru domyślnego.

Ważne

Aby obiekt ImageButton wrócił do stanu Normal , VisualStateGroup musi również zdefiniować PointerOver stan. Jeśli używasz stylów utworzonych ResourceDictionary przez szablon projektu aplikacji .NET MAUI, masz już niejawny ImageButton styl definiujący PointerOver stan.

Aby uzyskać więcej informacji na temat stanów wizualizacji, zobacz Visual states (Stany wizualizacji).

Wyłączanie elementu ImageButton

Czasami aplikacja wprowadza stan, w którym 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.