Xamarin.Forms Obrázkové

Článek
12/02/2021
5 min ke čtení

Obrázkové zobrazí obrázek a reaguje na klepnutí nebo kliknutí, který přesměruje aplikaci na provedení konkrétního úkolu.

ImageButtonZobrazení kombinuje Button zobrazení a Image zobrazení k vytvoření tlačítka, jehož obsah je obrázek. Uživatel stiskne klávesu ImageButton s prstem nebo na ni klikne myší, aby provedl aplikaci, aby provedl určitou úlohu. Nicméně na rozdíl od Button zobrazení ImageButton nemá zobrazení žádný koncept textu a vzhledu textu.

Poznámka

Zatímco Button zobrazení definuje Xamarin_Forms Button _Button_Image "data-LINKTYPE =" absolutní cesta ">Image vlastnost, která umožňuje zobrazení obrázku v Button , tato vlastnost je určena k použití při zobrazení malé ikony vedle Button textu.

Příklady kódu v tomto průvodci jsou pořízeny z ukázky FormsGallery.

Nastavení zdroje obrázku

ImageButton definuje Source vlastnost, která má být nastavena na obrázek, který se má zobrazit v tlačítku, přičemž zdroj obrázku je buď 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 Images in 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>

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

Basic Basic obrázkové Basic

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

Poznámka

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

Následující příklad ukazuje, jak vytvořit stránku, která je funkčně ekvivalentní k 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í obrázkové

ImageButton definuje Clicked událost, která se aktivuje, když uživatel klepne na ImageButton prst nebo ukazatel myši. Událost se aktivuje při uvolnění tlačítka prstu nebo myši z povrchu ImageButton . ImageButtonVlastnost musí mít IsEnabled vlastnost nastavenou na hodnotu true , aby 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>

ClickedUdálost je nastavena na obslužnou rutinu události s názvem OnImageButtonClicked , která je umístěna v souboru s kódem na pozadí:

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. senderArgument je zodpovědný za ImageButton tuto událost. To můžete použít pro přístup k ImageButton objektu nebo pro rozlišení mezi několika ImageButton objekty sdílejícími stejnou Clicked událost.

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

Následující příklad ukazuje, jak vytvořit stránku, která je funkčně ekvivalentní k 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í obrázkové

Někdy je aplikace v určitém stavu, kde konkrétní ImageButton kliknutí není platná operace. V těchto případech ImageButton by měl být zakázán nastavením jeho IsEnabled vlastnosti na false .

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

Je možné, že aplikace reaguje na ImageButton kohouty bez zpracování Clicked události. ImageButtonImplementuje alternativní mechanismus oznámení nazývaný rozhraní ImageButton nebo příkazu . To se skládá ze dvou vlastností:

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

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žití rozhraní příkazového řádku naleznete v tématu použití rozhraní příkazového řádku v průvodci tlačítkem .

Stisknutí a uvolnění obrázkové

Kromě události Clicked objekt ImageButton definuje také události Pressed a Released. K Pressed události dojde, když se prst stiskne na ImageButton , nebo se stiskne tlačítko myši s ukazatelem umístěným na ImageButton . ReleasedUdálost nastane při uvolnění tlačítka prst nebo myš. Obecně platí, že Clicked událost je také aktivována ve stejnou dobu jako Released událost, ale pokud je kurzor nebo ukazatel myši pryč od povrchu ImageButton před uvolněním, událost nemusí být k dispozici Clicked .

Další informace o těchto událostech naleznete v tématu stisknutí a uvolnění tlačítka v průvodci tlačítky .

Vzhled obrázkové

Kromě vlastností, které ImageButton dědí z View třídy, ImageButton definuje také několik vlastností, které mají vliv na jeho vzhled:

Aspect je způsob, jakým se zmenší velikost obrázku tak, aby odpovídala oblasti zobrazení.
BorderColor je barva oblasti obklopující ImageButton .
BorderWidth je šířka ohraničení.
CornerRadius je poloměr rohu ImageButton .

AspectVlastnost může být nastavena na jeden z členů Aspect výčtu:

_Aspect_Fill "data-LINKTYPE =" absolutní cestu ">Fill roztáhne obrázek na zcela a přesně vyplní ImageButton . Výsledkem může být deformaace obrázku.
Xamarin_Forms _Aspect_AspectFill "data-LINKTYPE =" absolutní cestu ">AspectFill -ořízne obrázek tak, aby vyplnil i ImageButton při zachování poměru stran.
Xamarin_Forms _Aspect_AspectFit "data-LINKTYPE =" absolutní cestu ">AspectFit – letterboxes obrázek (Pokud je potřeba), aby se celý obrázek vešel do do, a to ImageButton s prázdným místem přidaným na horní nebo dolní nebo postranní plochu v závislosti na tom, jestli je image rozsáhlá nebo vysoká. Toto je výchozí hodnota Aspect výčtu.

Poznámka

ImageButtonTřída má také Xamarin_Forms ImageButton _View_Margin "data-LINKTYPE =" absolutní cesta ">Margin a Padding vlastnosti, které řídí chování rozložení ImageButton . Další informace najdete v článku o okrajích a odsazeních.

Obrázkové vizuální stavy

ImageButtonmá a PressedVisualState , který se dá použít k zahájení vizuální změny ImageButton při stisknutí uživatelem za předpokladu, že je povolený.

Následující příklad XAML ukazuje, jak definovat vizuální stav pro Pressed 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>

PressedVisualState Určuje, že po ImageButton stisknutí tlačítka Xamarin_Forms Pressed _VisualElement_Scale "data-LINKTYPE =" absolutní cesta ">Scale vlastnost se změní z výchozí hodnoty 1 na 0,8. NormalVisualState Určuje, že je-li ImageButton v normálním stavu, Scale bude vlastnost nastavena na hodnotu 1. Proto je celkový vliv na to, že když ImageButton je stisknuto, je zvětšeno na mírně menší a při ImageButton uvolnění je změněno na výchozí velikost.

Další informace o vizuálních stavech naleznete v tématu The Xamarin.Forms Visual State Manager .

Ukázka FormsGallery

Xamarin.Forms Obrázkové

Ohodnoťte vaše zkušenosti

Nastavení zdroje obrázku

Zpracování kliknutí obrázkové

Zakázání obrázkové

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

Stisknutí a uvolnění obrázkové

Vzhled obrázkové

Obrázkové vizuální stavy

Související odkazy