ImageButton

Článek
05/14/2024

Zobrazení .NET Multi-Platform App UI (.NET MAUI) ImageButton kombinuje Button zobrazení a Image zobrazení a vytvoří tlačítko, jehož obsah je obrázek. Když stisknete ImageButton prst nebo na něj kliknete myší, přesměruje aplikaci na provedení úkolu. Na rozdíl od Button ImageButton zobrazení ale nemá žádný koncept textu a vzhledu textu.

ImageButton definuje následující vlastnosti:

Aspect, typu Aspect, určuje, jak se obrázek škáluje tak, aby odpovídal oblasti zobrazení.
BorderColor, typu Color, popisuje barvu ohraničení tlačítka.
BorderWidth, typu double, definuje šířku ohraničení tlačítka.
Command, typu ICommand, definuje příkaz, který se spustí při klepnutí na tlačítko.
CommandParameter, typu object, je parametr, který je předán Command.
CornerRadius, typu int, popisuje rohový poloměr ohraničení tlačítka.
IsLoading, typu bool, představuje stav načítání image. Výchozí hodnota této vlastnosti je false.
IsOpaque, typu bool, určuje, zda má .NET MAUI nakládat s obrázkem jako s neprůžnou při vykreslování. Výchozí hodnota této vlastnosti je false.
IsPressed, typu bool, představuje, zda je tlačítko stisknuto. Výchozí hodnota této vlastnosti je false.
Padding, typu Thickness, určuje odsazení tlačítka.
Source, typu ImageSource, určuje obrázek, který se má zobrazit jako obsah tlačítka.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Vlastnost Aspect lze nastavit na jeden ze členů výčtu Aspect :

Fill - roztáhne obraz úplně a přesně vyplnit ImageButton. Výsledkem může být zkreslení obrázku.
AspectFill - vystřiží obrázek tak, aby vyplnil ImageButton při zachování poměru stran.
AspectFit - písmena obrázku (pokud je to nutné) tak, aby se celý obrázek vešl do ImageButton, s prázdným místem přidaným do horní/dolní části nebo stran v závislosti na tom, zda je obrázek široký nebo vysoký. Toto je výchozí hodnota výčtu Aspect .
Center - zacentruje obrázek při ImageButton zachování poměru stran.

Kromě toho ImageButton definuje Clicked, Presseda Released události. Událost Clicked se vyvolá, když ImageButton se z povrchu tlačítka uvolní klepnutí prstem nebo ukazatelem myši. Událost Pressed je vyvolána, když prst stiskne na ImageButton, nebo tlačítko myši je stisknuto ukazatelem nad ImageButton. Událost Released je vyvolána při uvolnění prstu nebo tlačítka myši. Obecně platí, že Clicked událost je vyvolána současně s Released událostí, ale pokud se prst nebo ukazatel myši posune mimo povrch ImageButton před uvolněním, Clicked událost nemusí nastat.

Důležité

Aby ImageButton mohl reagovat na klepnutí, musí mít IsEnabled vlastnost nastavenou true na ni.

Vytvoření tlačítka ImageButton

Pokud chcete vytvořit tlačítko obrázku, vytvořte ImageButton objekt, nastavte jeho Source vlastnost a zpracujte jeho Clicked událost.

Následující příklad XAML ukazuje, jak vytvořit 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>

Vlastnost Source určuje obrázek, který se zobrazí v objektu ImageButton. Událost Clicked je nastavena na obslužnou rutinu události s názvem OnImageButtonClicked. Tato obslužná rutina se nachází v souboru kódu:

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

V tomto příkladu ImageButton se po klepnutí metoda OnImageButtonClicked spustí. Argument sender je ImageButton zodpovědný za tuto událost. Můžete ho použít pro přístup k objektu ImageButton nebo k rozlišení mezi více ImageButton objekty, které sdílejí stejnou Clicked událost. Obslužná rutina Clicked zvýší čítač a zobrazí hodnotu čítače v Label:

Screenshot of an ImageButton.

Ekvivalentní kód jazyka ImageButton C#, který se má vytvořit, je:

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

Použití příkazového rozhraní

Aplikace může reagovat na ImageButton klepnutí bez zpracování Clicked události. Implementuje ImageButton alternativní mechanismus oznámení, který se nazývá příkaz nebo příkazové rozhraní. Skládá se ze dvou vlastností:

Command typu ICommand, rozhraní definované v System.Windows.Input oboru názvů.
CommandParameter vlastnost typu Object.

Tento přístup je vhodný v souvislosti s datovou vazbou a zejména při implementaci modelu Model-View-ViewModel (MVVM). Další informace o příkazování naleznete v tématu Použití rozhraní příkazů v článku Tlačítko .

Stiskněte a uvolněte imageButton.

Událost Pressed je vyvolána, když prst stiskne na ImageButtontlačítko myši nebo je stisknuto ukazatelem nad ImageButton. Událost Released je vyvolána při uvolnění prstu nebo tlačítka myši. Obecně platí, že Clicked událost je vyvolána současně s Released událostí, ale pokud se prst nebo ukazatel myši posune mimo povrch ImageButton před uvolněním, Clicked událost nemusí nastat.

Další informace o těchto událostech najdete v článku o tlačítku stisknutím a uvolněním tlačítka.

Stavy vizuálu ImageButton

ImageButtonPressedVisualState obsahuje možnost, která se dá použít k zahájení vizuální změny ImageButton při stisknutí, pokud je povolená.

Následující příklad XAML ukazuje, jak definovat stav vizuálu Pressed pro stav:

<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>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ImageButton>

V tomto příkladu PressedVisualState určuje, že když ImageButton je stisknuto, jeho Scale vlastnost bude změněna z výchozí hodnoty 1 na 0,8. Určuje NormalVisualState , že pokud je v ImageButton normálním stavu, jeho Scale vlastnost bude nastavena na 1. Celkovým účinkem je proto, že při ImageButton stisknutí se zvětší, aby byl o něco menší a při ImageButton uvolnění se znovu škáluje na výchozí velikost.

Další informace o stavech vizuálů najdete v tématu Stavy vizuálů.

Zakázání tlačítka ImageButton

Někdy aplikace zadá stav, ve kterém ImageButton kliknutí není platná operace. V těchto případech ImageButton by měla být zakázána nastavením jeho IsEnabled vlastnosti na falsehodnotu .

Sdílet prostřednictvím