Xamarin.Forms Imagebutton

Článek
03/08/2024

ImageButton zobrazí obrázek a odpoví klepnutím nebo kliknutím, který nasměruje aplikaci k provedení konkrétní úlohy.

Zobrazení ImageButton kombinuje Button zobrazení a Image zobrazení a vytvoří tlačítko, jehož obsah je obrázek. Uživatel stiskne ImageButton prst nebo na něj klikne myší, aby aplikaci nasměruje k provedení konkrétního úkolu. Na rozdíl od Button zobrazení ImageButton ale zobrazení nemá žádný koncept textu a vzhledu textu.

Poznámka:

Button Zatímco zobrazení definuje Image vlastnost, která umožňuje zobrazit obrázek na Button, tato vlastnost je určena k použití při zobrazení malé ikony vedle Button textu.

Příklady kódu v této příručce pocházejí z ukázky FormsGallery.

Nastavení zdroje image

ImageButtonSource definuje vlastnost, která by měla být nastavena na obrázek, který se má zobrazit v tlačítku, přičemž zdrojem obrázku je soubor, identifikátor URI, prostředek nebo datový proud. Další informace o načítání obrázků z různých zdrojů naleznete v tématu Obrázky v Xamarin.Forms.

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

Vlastnost Source určuje obrázek, který se zobrazí v objektu ImageButton. V tomto příkladu je nastavený na místní soubor, který se načte z každého projektu platformy, což vede k následujícím snímkům obrazovky:

Ve výchozím nastavení je obdélníkový ImageButton , ale můžete mu dát zaoblené rohy pomocí CornerRadius vlastnosti. Další informace o vzhledu naleznete v ImageButton tématu Vzhled ImageButton.

Poznámka:

ImageButton I když může načíst animovaný obrázek GIF, zobrazí se pouze první snímek GIF.

Následující příklad ukazuje, jak vytvořit stránku, která je funkčně ekvivalentní předchozímu příkladu XAML, ale zcela v jazyce 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 }
        };
    }
}

Zpracování kliknutí na imageButton

ImageButtonClicked definuje událost, která se aktivuje, když uživatel klepne ImageButton prstem nebo ukazatelem myši. Událost se aktivuje, když je tlačítko prstu nebo myši uvolněno z povrchu ImageButton. Vlastnost ImageButton musí mít IsEnabled nastavenou tak, aby true reagovala na klepnutí.

Následující příklad ukazuje, jak vytvořit instanci ImageButton v jazyce XAML a zpracovat její Clicked událost:

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

Událost Clicked je nastavena na obslužnou rutinu události s názvem OnImageButtonClicked , která 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")}";
    }
}

Při klepnutí na objekt ImageButton se spustí metoda OnImageButtonClicked. 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.

Tato konkrétní Clicked obslužná rutina zvýší čítač a zobrazí hodnotu čítače Labelv :

Následující příklad ukazuje, jak vytvořit stránku, která je funkčně ekvivalentní předchozímu příkladu XAML, ale zcela v jazyce 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")}";
    }
}

Zakázání tlačítka ImageButton

Někdy je aplikace v určitém stavu, kdy konkrétní 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 .

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 architektury Model-View-ViewModel (MVVM).

Další informace o používání příkazového rozhraní naleznete v části Použití příkazového rozhraní v průvodci tlačítkem .

Stisknutím a uvolněním tlačítka ImageButton

Kromě události Clicked objekt ImageButton definuje také události Pressed a Released. K Pressed události dochází, když prst stiskne na ImageButtonnebo tlačítko myši je stisknuto ukazatelem nad ImageButton. K Released události dochází při uvolnění prstu nebo tlačítka myši. Obecně platí, že Clicked událost se aktivuje 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 naleznete v části Stisknutí a uvolnění tlačítka v průvodci tlačítkem .

Vzhled tlačítka obrázku

Kromě vlastností, které ImageButton dědí z View třídy, definuje také několik vlastností, ImageButton které ovlivňují jeho vzhled:

Aspect je způsob, jakým bude obrázek škálován tak, aby odpovídal oblasti zobrazení.
BorderColor je barva oblasti kolem ImageButton.
BorderWidth je šířka ohraničení.
CornerRadius je rohový poloměr ImageButton.

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 .

Poznámka:

Třída ImageButton má Margin také a Padding vlastnosti, které řídí chování ImageButtonrozložení . Další informace najdete v článku o okrajích a odsazeních.

Stavy vizuálu ImageButton

ImageButtonPressedVisualState má možnost, která se dá použít k zahájení vizuální změny ImageButton při stisknutí uživatele za předpokladu, že je povolená.

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

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

Určuje PressedVisualState , že když je ImageButton 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ů naleznete v tématu Správce stavu vizuáluXamarin.Forms.

Ukázka FormsGallery

Xamarin.Forms Imagebutton

Nastavení zdroje image

Zpracování kliknutí na imageButton

Zakázání tlačítka ImageButton

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

Stisknutím a uvolněním tlačítka ImageButton

Vzhled tlačítka obrázku

Stavy vizuálu ImageButton

Související odkazy

Další materiály