Xamarin.Forms Tlačítko

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

Tlačítko reaguje na klepnutí nebo kliknutí, které aplikaci nasměruje k provedení konkrétní úlohy.

je Button nejzásanější interaktivní ovládací prvek ve všech Xamarin.Forms . Objekt obvykle zobrazí krátký textový řetězec označující příkaz, ale může také zobrazit bitmapový obrázek nebo kombinaci Button textu a obrázku. Uživatel stiskne prstem nebo na něj klikne myší Button a spustí tento příkaz.

Většina témat uvedených níže odpovídá stránkám v ukázce ButtonDemos.

Zpracování kliknutí na tlačítka

Button definuje událost, která se aktivuje, když uživatel klepne prstem ClickedButton nebo ukazatelem myši na objekt . Událost se aktivována, když se prst nebo tlačítko myši uvolní z povrchu Button . Musí Button mít vlastnost Xamarin_Forms Button _VisualElement_IsEnabled" data-linktype="absolute-path">nastavenou na IsEnabledtrue , aby reagovala na klepnutí.

Stránka Základní kliknutí na tlačítko v ukázce ButtonDemos ukazuje, jak vytvořit instanci v jazyce XAML a zpracovat její událost. Soubor BasicButtonClickPage.xaml obsahuje s a LabelButton :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.BasicButtonClickPage"
             Title="Basic Button Click">
    <StackLayout>

        <Label x:Name="label"
               Text="Click the Button below"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center" />

        <Button Text="Click to Rotate Text!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />

    </StackLayout>
</ContentPage>

Obvykle Button zabírá veškerý prostor, který je pro něj povolený. Pokud například vlastnost objektu nezadáte na jinou hodnotu než , objekt zabírá celou šířku svého HorizontalOptionsButtonFillButton nadřazeného objektu .

Ve výchozím nastavení je objekt obdélníkový, ale můžete mu dát zaoblené rohy pomocí vlastnosti Button Xamarin_Forms Button _Button_CornerRadius" data-linktype="absolute-path">, CornerRadiusjak je popsáno níže v části Vzhled tlačítka .

Vlastnost Xamarin_Forms _Button_Text" data-linktype="absolute-path">určuje Text text, který se zobrazí v Button objektu . Událost Clicked je nastavená na obslužnou rutinu události s názvem OnButtonClicked . Tato obslužná rutina se nachází v souboru BasicButtonClickPage.xaml.css kódem na pozadí:

public partial class BasicButtonClickPage : ContentPage
{
    public BasicButtonClickPage ()
    {
        InitializeComponent ();
    }

    async void OnButtonClicked(object sender, EventArgs args)
    {
        await label.RelRotateTo(360, 1000);
    }
}

Při klepnutí na objekt Button se spustí metoda OnButtonClicked. Argument sender je objekt zodpovědný za tuto Button událost. Můžete ji použít pro přístup k objektu nebo k rozlišení mezi více objekty, ButtonButton které sdílejí stejnou Clicked událost.

Tato konkrétní Clicked obslužná rutina volá funkci animace, která otáčí Label 360 stupňů v 1 000 milisekundách. Tady je program běžící na zařízeních s iOSem a Androidem a jako aplikace univerzální platformy Windows Platform (UPW) na Windows 10 desktopu:

tlačítko

Všimněte OnButtonClicked si, že metoda obsahuje async modifikátor , await protože se používá v obslužné rutině události. Obslužná Clicked rutina události async vyžaduje modifikátor pouze v případě, že tělo obslužné rutiny používá await .

Každá platforma Button vykresluje vlastním specifickým způsobem. V části Vzhled tlačítka uvidíte, jak nastavit barvy a nastavit ohraničení tak, aby bylo viditelné pro přizpůsobenější vzhled. Buttonimplementuje rozhraní, takže zahrnuje IFontElement Xamarin_Forms Button _Button_FontFamily" data-linktype="absolute-path">FontFamily , Xamarin_Forms IFontElement _Button_FontSize" data-linktype="absolute-path">FontSize a Xamarin_Forms _Button_FontAttributes" data-linktype="absolute-path">FontAttributes properties.

Vytvoření tlačítka v kódu

Vytvoření instance v jazyce XAML je běžné, ale můžete Button také vytvořit v kódu Button . To může být výhodné, když vaše aplikace potřebuje vytvořit více tlačítek na základě dat, která jsou vyčíslitelná foreach smyčkou.

Stránka Kliknutí na tlačítko s kódem ukazuje, jak vytvořit stránku, která je funkčně ekvivalentní stránce Základní kliknutí na tlačítko, ale zcela v jazyce C#:

public class CodeButtonClickPage : ContentPage
{
    public CodeButtonClickPage ()
    {
        Title = "Code Button Click";

        Label label = new Label
        {
            Text = "Click the Button below",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.Center
        };

        Button button = new Button
        {
            Text = "Click to Rotate Text!",
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.Center
        };
        button.Clicked += async (sender, args) => await label.RelRotateTo(360, 1000);

        Content = new StackLayout
        {
            Children =
            {
                label,
                button
            }
        };
    }
}

Všechno se provádí v konstruktoru třídy. Vzhledem k Clicked tomu, že obslužná rutina je pouze jeden příkaz dlouhý, může být k události připojena velmi jednoduše:

button.Clicked += async (sender, args) => await label.RelRotateTo(360, 1000);

Obslužnou rutinu události můžete samozřejmě také definovat jako samostatnou metodu (stejně jako metodu v základním kliknutí na tlačítko) a tuto metodu připojit OnButtonClick k události: OnButtonClick

button.Clicked += OnButtonClicked;

Zakázání tlačítka

Někdy je aplikace v určitém stavu, kdy určité kliknutí Button není platná operace. V těchto případech by Button měl být objekt zakázán nastavením vlastnosti na hodnotu IsEnabledfalse . Klasický příklad je ovládací prvek pro název souboru spolu s otevřeným souborem: objekt by měl být povolen pouze v případě, že byl do souboru zadán nějaký EntryButtonButtonEntry text. Pro tuto DataTrigger úlohu můžete použít , jak je znázorněno v článku DataTrigger dat.

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

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

Xamarin_Forms _Button_Command" data-linktype="absolute-path">typu , rozhraní Command definované v oboru názvů ICommandSystem.Windows.Input .
Xamarin_Forms _Button_CommandParameter data-linktype="absolute-path">CommandParameter vlastnosti typu Object .

Tento přístup je zvláště vhodný v souvislosti s datovou vazbou, zejména při implementaci architektury Model-View-ViewModel (MVVM). Tato témata jsou probírána v článcích Datové vazby, Od datových vazeb po MVVMa MVVM.

V aplikaci MVVM model viewmodel definuje vlastnosti typu, které jsou pak připojeny k prvkům ICommand XAML Button pomocí datových vazeb. Xamarin.Forms také definuje třídy a , které implementují rozhraní a Command pomáhají modelu Command<T>ICommand viewmodel při definování vlastností typu ICommand .

Příkazy jsou podrobněji popsány v článku Rozhraní příkazového řádku, ale základní stránka příkazů tlačítka v ukázce ButtonDemos ukazuje základní přístup.

Třída CommandDemoViewModel je velmi jednoduchý model viewmodel, který definuje vlastnost typu s názvem a dvě vlastnosti typu s názvem a doubleNumberICommandMultiplyBy2CommandDivideBy2Command :

class CommandDemoViewModel : INotifyPropertyChanged
{
    double number = 1;

    public event PropertyChangedEventHandler PropertyChanged;

    public CommandDemoViewModel()
    {
        MultiplyBy2Command = new Command(() => Number *= 2);

        DivideBy2Command = new Command(() => Number /= 2);
    }

    public double Number
    {
        set
        {
            if (number != value)
            {
                number = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Number"));
            }
        }
        get
        {
            return number;
        }
    }

    public ICommand MultiplyBy2Command { private set; get; }

    public ICommand DivideBy2Command { private set; get; }
}

Tyto dvě ICommand vlastnosti jsou inicializovány v konstruktoru třídy se dvěma objekty typu Command . Konstruktory Command obsahují malou funkci (nazývanou argument konstruktoru), která buď zdvojnásobí execute nebo zastaví Number vlastnost.

Soubor BasicButtonCommand.xaml nastaví jeho instanci CommandDemoViewModel . Element Label a dva prvky obsahují vazby na tři vlastnosti v souboru ButtonCommandDemoViewModel :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.BasicButtonCommandPage"
             Title="Basic Button Command">

    <ContentPage.BindingContext>
        <local:CommandDemoViewModel />
    </ContentPage.BindingContext>

    <StackLayout>
        <Label Text="{Binding Number, StringFormat='Value is now {0}'}"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center" />

        <Button Text="Multiply by 2"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Command="{Binding MultiplyBy2Command}" />

        <Button Text="Divide by 2"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Command="{Binding DivideBy2Command}" />
    </StackLayout>
</ContentPage>

Při poklepu na tyto dva prvky Button se příkazy spustí a číslo změní hodnotu:

Výhodou tohoto přístupu oproti obslužných rutinám je, že veškerá logika zahrnující funkce této stránky se nachází v modelu viewmodel, nikoli v souboru kódu, a dosahuje tak lepšího oddělení uživatelského rozhraní od Clicked obchodní logiky.

Je také možné, aby Command objekty ovládaly povolování a zakazování Button prvků. Předpokládejme například, že chcete omezit rozsah čísel mezi 2¹⁰ a 2^–10. Do konstruktoru (nazývaného argument) můžete přidat další funkci, která vrátí hodnotu canExecute , pokud by měla být trueButton povolena funkce . Tady je úprava CommandDemoViewModel konstruktoru:

class CommandDemoViewModel : INotifyPropertyChanged
{
    ···
    public CommandDemoViewModel()
    {
        MultiplyBy2Command = new Command(
            execute: () =>
            {
                Number *= 2;
                ((Command)MultiplyBy2Command).ChangeCanExecute();
                ((Command)DivideBy2Command).ChangeCanExecute();
            },
            canExecute: () => Number < Math.Pow(2, 10));

        DivideBy2Command = new Command(
            execute: () =>
            {
                Number /= 2;
                ((Command)MultiplyBy2Command).ChangeCanExecute();
                ((Command)DivideBy2Command).ChangeCanExecute();
            },
            canExecute: () => Number > Math.Pow(2, -10));
    }
    ···
}

Volání metody metody jsou nezbytná, aby metoda mohl volat metodu a určit, zda by měla být ChangeCanExecuteCommandCommandcanExecuteButton zakázána nebo ne. Po této změně kódu se počet dosáhne limitu a hodnota Button se deaktivuje:

Je možné, aby byly dva nebo více Button prvků svázány se stejnou ICommand vlastností. Prvky Button lze rozlišit pomocí Xamarin_Forms Button _Button_CommandParameter" data-linktype="absolute-path">vlastnosti CommandParameterButton . V tomto případě budete chtít použít obecnou Command<T> třídu . Objekt CommandParameter se pak předá jako argument metodám execute a canExecute . Tato technika je podrobně popsány v části Základní příkazy v článku Rozhraní příkazů.

Ukázka ButtonDemos používá tuto techniku také ve své třídě. Soubor MainPage.xaml obsahuje pro každou stránku ukázky :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.MainPage"
             Title="Button Demos">
    <ScrollView>
        <FlexLayout Direction="Column"
                    JustifyContent="SpaceEvenly"
                    AlignItems="Center">

            <Button Text="Basic Button Click"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:BasicButtonClickPage}" />

            <Button Text="Code Button Click"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:CodeButtonClickPage}" />

            <Button Text="Basic Button Command"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:BasicButtonCommandPage}" />

            <Button Text="Press and Release Button"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:PressAndReleaseButtonPage}" />

            <Button Text="Button Appearance"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:ButtonAppearancePage}" />

            <Button Text="Toggle Button Demo"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:ToggleButtonDemoPage}" />

            <Button Text="Image Button Demo"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:ImageButtonDemoPage}" />

        </FlexLayout>
    </ScrollView>
</ContentPage>

Každá Button vlastnost je svázaná s vlastností s názvem a je nastavená na objekt odpovídající jedné ze tříd Command stránky v NavigateCommandCommandParameterType projektu.

Tato NavigateCommand vlastnost je typu a je ICommand definována v souboru s kódem na pozadí:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        NavigateCommand = new Command<Type>(async (Type pageType) =>
        {
            Page page = (Page)Activator.CreateInstance(pageType);
            await Navigation.PushAsync(page);
        });

        BindingContext = this;
    }

    public ICommand NavigateCommand { private set; get; }
}

Konstruktor inicializuje vlastnost objektu , protože je typ objektu NavigateCommandCommand<Type> nastavený v souboru TypeCommandParameter XAML. To znamená, execute že metoda má argument Type typu, který odpovídá tomuto CommandParameter objektu. Funkce vytvoří instanci stránky a pak na ní přejde.

Všimněte si, že konstruktor končí nastavením na BindingContext sebe sama. To je nezbytné pro vytvoření vazby vlastností v souboru XAML na NavigateCommand vlastnost .

Stisknutí a uvolnění tlačítka

Kromě události Clicked objekt Button definuje také události Pressed a Released. K události dojde, když se stiskne prst nebo stiskne tlačítko myši s ukazatelem PressedButton umístěným nad Button . K Released události dojde při uvolnění prstu nebo tlačítka myši. Obecně platí, že událost se také aktivuje ve stejnou dobu jako událost, ale pokud se prst nebo ukazatel myši posune z povrchu před uvolněním, událost nemusí ClickedReleasedButtonClicked nastat.

Události a se často používají, ale lze je použít ke speciálním účelům, jak je znázorněno na stránce PressedReleased Stisknutí a Pressed tlačítka. Soubor XAML obsahuje a s Label připojenými Button obslužnmi rutinami pro Pressed události a Released :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.PressAndReleaseButtonPage"
             Title="Press and Release Button">
    <StackLayout>

        <Label x:Name="label"
               Text="Press and hold the Button below"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center" />

        <Button Text="Press to Rotate Text!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Pressed="OnButtonPressed"
                Released="OnButtonReleased" />

    </StackLayout>
</ContentPage>

Soubor kódu na pozadí animace, když dojde k události, ale LabelPressed pozastaví rotaci, když Released dojde k události:

public partial class PressAndReleaseButtonPage : ContentPage
{
    bool animationInProgress = false;
    Stopwatch stopwatch = new Stopwatch();

    public PressAndReleaseButtonPage ()
    {
        InitializeComponent ();
    }

    void OnButtonPressed(object sender, EventArgs args)
    {
        stopwatch.Start();
        animationInProgress = true;

        Device.StartTimer(TimeSpan.FromMilliseconds(16), () =>
        {
            label.Rotation = 360 * (stopwatch.Elapsed.TotalSeconds % 1);

            return animationInProgress;
        });
    }

    void OnButtonReleased(object sender, EventArgs args)
    {
        animationInProgress = false;
        stopwatch.Stop();
    }
}

Výsledkem je, že se jen otáčí, když je prst v kontaktu s , a zastaví se LabelButton při uvolnění prstu:

Tento druh chování má aplikace pro hry: Prstem uchyceým na obrazovce může být pohyb objektu Button na obrazovce v určitém směru.

Vzhled tlačítka

Objekt Button dědí nebo definuje několik vlastností, které mají vliv na jeho vzhled:

_Button_TextColor" data-linktype="absolute-path">TextColor je barva Button textu.
Xamarin_Forms _VisualElement_BackgroundColor" data-linktype="absolute-path">je barva pozadí BackgroundColor tohoto textu.
Xamarin_Forms _Button_BorderColor" data-linktype="absolute-path">je barva oblasti BorderColor obklopujícíButton
Xamarin_Forms _Button_FontFamily "data-LINKTYPE =" absolutní cesta ">FontFamily je rodina písem použitá pro text
Xamarin_Forms _Button_FontSize "data-LINKTYPE =" absolutní cestu ">FontSize je velikost textu
Xamarin_Forms _Button_FontAttributes "data-LINKTYPE =" absolutní cestu ">FontAttributes Určuje, zda je text kurzívou nebo tučným písmem.
Xamarin_Forms _Button_BorderWidth "data-LINKTYPE =" absolutní cestu ">BorderWidth je šířka ohraničení.
Xamarin_Forms _Button_CornerRadius "data-LINKTYPE =" absolutní cesta ">CornerRadius je poloměr rohuButton
Xamarin_Forms _Button_CharacterSpacing "data-LINKTYPE =" absolutní cestu ">CharacterSpacing je mezera mezi znaky Button textu.
TextTransform Určuje velikost písmen Button textu.

Poznámka

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

Účinky šesti těchto vlastností (s výjimkou FontFamily a FontAttributes ) jsou znázorněny na stránce FontFamily . Další vlastnost Xamarin_Forms _Button_ImageSource data-LINKTYPE = "absolutní cesta" >Image , je popsána v části Image.

Všechna zobrazení a datové vazby na stránce vzhledu tlačítka jsou definovány v souboru XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.ButtonAppearancePage"
             Title="Button Appearance">
    <StackLayout>
        <Button x:Name="button"
                Text="Button"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                TextColor="{Binding Source={x:Reference textColorPicker},
                                    Path=SelectedItem.Color}"
                BackgroundColor="{Binding Source={x:Reference backgroundColorPicker},
                                          Path=SelectedItem.Color}"
                BorderColor="{Binding Source={x:Reference borderColorPicker},
                                      Path=SelectedItem.Color}" />

        <StackLayout BindingContext="{x:Reference button}"
                     Padding="10">

            <Slider x:Name="fontSizeSlider"
                    Maximum="48"
                    Minimum="1"
                    Value="{Binding FontSize}" />

            <Label Text="{Binding Source={x:Reference fontSizeSlider},
                                  Path=Value,
                                  StringFormat='FontSize = {0:F0}'}"
                   HorizontalTextAlignment="Center" />

            <Slider x:Name="borderWidthSlider"
                    Minimum="-1"
                    Maximum="12"
                    Value="{Binding BorderWidth}" />

            <Label Text="{Binding Source={x:Reference borderWidthSlider},
                                  Path=Value,
                                  StringFormat='BorderWidth = {0:F0}'}"
                   HorizontalTextAlignment="Center" />

            <Slider x:Name="cornerRadiusSlider"
                    Minimum="-1"
                    Maximum="24"
                    Value="{Binding CornerRadius}" />

            <Label Text="{Binding Source={x:Reference cornerRadiusSlider},
                                  Path=Value,
                                  StringFormat='CornerRadius = {0:F0}'}"
                   HorizontalTextAlignment="Center" />

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Grid.Resources>
                    <Style TargetType="Label">
                        <Setter Property="VerticalOptions" Value="Center" />
                    </Style>
                </Grid.Resources>

                <Label Text="Text Color:"
                       Grid.Row="0" Grid.Column="0" />

                <Picker x:Name="textColorPicker"
                        ItemsSource="{Binding Source={x:Static local:NamedColor.All}}"
                        ItemDisplayBinding="{Binding FriendlyName}"
                        SelectedIndex="0"
                        Grid.Row="0" Grid.Column="1" />

                <Label Text="Background Color:"
                       Grid.Row="1" Grid.Column="0" />

                <Picker x:Name="backgroundColorPicker"
                        ItemsSource="{Binding Source={x:Static local:NamedColor.All}}"
                        ItemDisplayBinding="{Binding FriendlyName}"
                        SelectedIndex="0"
                        Grid.Row="1" Grid.Column="1" />

                <Label Text="Border Color:"
                       Grid.Row="2" Grid.Column="0" />

                <Picker x:Name="borderColorPicker"
                        ItemsSource="{Binding Source={x:Static local:NamedColor.All}}"
                        ItemDisplayBinding="{Binding FriendlyName}"
                        SelectedIndex="0"
                        Grid.Row="2" Grid.Column="1" />
            </Grid>
        </StackLayout>
    </StackLayout>
</ContentPage>

V Button horní části stránky mají své tři Color vlastnosti svázané s Picker prvky v dolní části stránky. Položky v Picker prvcích jsou barvy z NamedColor třídy zahrnuté v projektu. Tři Slider prvky obsahují obousměrné vazby do FontSizeBorderWidth vlastností, a CornerRadiusButton .

Tento program umožňuje experimentovat s kombinacemi všech těchto vlastností:

Chcete-li zobrazit Button ohraničení, budete muset nastavit na jinou BorderColor než Default a na BorderWidth kladnou hodnotu.

V systému iOS si všimnete, že se velké šířky ohraničení intrude do vnitřku a jsou v Button konfliktu se zobrazením textu. Pokud se rozhodnete použít ohraničení s iOS Button , budete pravděpodobně chtít začít a končit Text vlastností s mezerami, abyste zachovali její viditelnost.

Při výběru UWP, CornerRadius který přesahuje polovinu výšky, Button vyvolá výjimku.

Vizuální stavy tlačítek

Buttonmá a PressedVisualState , který se dá použít k zahájení vizuální změny Button 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:

<Button Text="Click me!"
        ...>
    <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>
</Button>

PressedVisualState Určuje, že po Button 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 Button v normálním stavu, Scale bude vlastnost nastavena na hodnotu 1. Proto je celkový vliv na to, že když Button je stisknuto, je zvětšeno na mírně menší a při Button 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 .

Vytvoření přepínacího tlačítka

Je možné podtřídou Button , aby fungoval jako přepínač při vypnutí: když klepnete na tlačítko jednou, přepnete tlačítko na a klepnutím ho znovu přepnete.

Následující ToggleButton Třída je odvozena z Button a definuje novou událost s názvem Toggled a logickou vlastnost s názvem IsToggled . Jedná se o stejné dvě vlastnosti, které definuje Xamarin.FormsSwitch :

class ToggleButton : Button
{
    public event EventHandler<ToggledEventArgs> Toggled;

    public static BindableProperty IsToggledProperty =
        BindableProperty.Create("IsToggled", typeof(bool), typeof(ToggleButton), false,
                                propertyChanged: OnIsToggledChanged);

    public ToggleButton()
    {
        Clicked += (sender, args) => IsToggled ^= true;
    }

    public bool IsToggled
    {
        set { SetValue(IsToggledProperty, value); }
        get { return (bool)GetValue(IsToggledProperty); }
    }

    protected override void OnParentSet()
    {
        base.OnParentSet();
        VisualStateManager.GoToState(this, "ToggledOff");
    }

    static void OnIsToggledChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ToggleButton toggleButton = (ToggleButton)bindable;
        bool isToggled = (bool)newValue;

        // Fire event
        toggleButton.Toggled?.Invoke(toggleButton, new ToggledEventArgs(isToggled));

        // Set the visual state
        VisualStateManager.GoToState(toggleButton, isToggled ? "ToggledOn" : "ToggledOff");
    }
}

ToggleButtonKonstruktor připojí k události obslužnou rutinu Clicked , aby mohla změnit hodnotu IsToggled Vlastnosti. OnIsToggledChangedMetoda Toggled událost vyvolá.

Poslední řádek OnIsToggledChanged metody volá statickou VisualStateManager.GoToState metodu se dvěma textovými řetězci "ToggledOn" a "ToggledOff". Můžete si přečíst o této metodě a o tom, jak vaše aplikace může reagovat na vizuální stavy v článku The Xamarin.Forms Visual State Manager .

Vzhledem ToggleButton k tomu, že volá VisualStateManager.GoToState , třída sama o sobě nemusí zahrnovat žádná další zařízení, aby se změnil vzhled tlačítka na základě jeho IsToggled stavu. Který je zodpovědný za XAML, který je hostitelem ToggleButton .

Ukázková stránka přepínacího tlačítka obsahuje dvě instance , včetně značek Visual State Manageru, které nastaví Text , BackgroundColor a TextColor tlačítka na základě vizuálního stavu:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.ToggleButtonDemoPage"
             Title="Toggle Button Demo">

    <ContentPage.Resources>
        <Style TargetType="local:ToggleButton">
            <Setter Property="VerticalOptions" Value="CenterAndExpand" />
            <Setter Property="HorizontalOptions" Value="Center" />
        </Style>
    </ContentPage.Resources>

    <StackLayout Padding="10, 0">
        <local:ToggleButton Toggled="OnItalicButtonToggled">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="ToggleStates">
                    <VisualState Name="ToggledOff">
                        <VisualState.Setters>
                            <Setter Property="Text" Value="Italic Off" />
                            <Setter Property="BackgroundColor" Value="#C0C0C0" />
                            <Setter Property="TextColor" Value="Black" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState Name="ToggledOn">
                        <VisualState.Setters>
                            <Setter Property="Text" Value=" Italic On " />
                            <Setter Property="BackgroundColor" Value="#404040" />
                            <Setter Property="TextColor" Value="White" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </local:ToggleButton>

        <local:ToggleButton Toggled="OnBoldButtonToggled">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="ToggleStates">
                    <VisualState Name="ToggledOff">
                        <VisualState.Setters>
                            <Setter Property="Text" Value="Bold Off" />
                            <Setter Property="BackgroundColor" Value="#C0C0C0" />
                            <Setter Property="TextColor" Value="Black" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState Name="ToggledOn">
                        <VisualState.Setters>
                            <Setter Property="Text" Value=" Bold On " />
                            <Setter Property="BackgroundColor" Value="#404040" />
                            <Setter Property="TextColor" Value="White" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </local:ToggleButton>

        <Label x:Name="label"
               Text="Just a little passage of some sample text that can be formatted in italic or boldface by toggling the two buttons."
               FontSize="Large"
               HorizontalTextAlignment="Center"
               VerticalOptions="CenterAndExpand" />

    </StackLayout>
</ContentPage>

ToggledObslužné rutiny událostí jsou v souboru kódu na pozadí. Zodpovídá za nastavení FontAttributes vlastnosti v Label závislosti na stavu tlačítek:

public partial class ToggleButtonDemoPage : ContentPage
{
    public ToggleButtonDemoPage ()
    {
        InitializeComponent ();
    }

    void OnItalicButtonToggled(object sender, ToggledEventArgs args)
    {
        if (args.Value)
        {
            label.FontAttributes |= FontAttributes.Italic;
        }
        else
        {
            label.FontAttributes &= ~FontAttributes.Italic;
        }
    }

    void OnBoldButtonToggled(object sender, ToggledEventArgs args)
    {
        if (args.Value)
        {
            label.FontAttributes |= FontAttributes.Bold;
        }
        else
        {
            label.FontAttributes &= ~FontAttributes.Bold;
        }
    }
}

Tady je program běžící v iOS, Androidu a UWP:

Ukázka přepínacího tlačítka

Použití rastrových obrázků s tlačítky

ButtonTřída definuje Xamarin_Forms Button _Button_Image "data-LINKTYPE =" absolutní cesta ">ImageSource vlastnost, která umožňuje zobrazit rastrový obrázek na Button , samostatně nebo v kombinaci s textem. Můžete také určit způsob uspořádání textu a obrázku.

ImageSourceVlastnost je typu ImageSource , což znamená, že rastry lze načíst ze souboru, vloženého prostředku, identifikátoru URI nebo datového proudu.

Poznámka

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

Každá platforma podporovaná nástrojem Xamarin.Forms umožňuje ukládání imagí v různých velikostech pro různá rozlišení pixelů různých zařízení, na kterých může aplikace běžet. Tyto více rastrových obrázků jsou pojmenovány nebo uloženy v takovém případě, že operační systém může vybrat nejlepší shodu pro rozlišení zobrazení videa zařízení.

V případě rastrového obrázku v systému Button je nejlepší velikost obvykle mezi 32 a 64 jednotkami nezávislými na zařízení, v závislosti na tom, jak velký má být. Obrázky použité v tomto příkladu jsou založené na velikosti 48 jednotek nezávislých na zařízení.

V projektu iOS složka Resources obsahuje tři velikosti tohoto obrázku:

Rastrový obrázek 48-pixel uložený jako /Resources/MonkeyFace.png
Druhá bitmapa 96-pixel uložená jako /Resource/
Druhá bitmapa 144-pixel uložená jako /Resource/

Všem třem rastrovým obrázkům bylo přidělena Akce sestaveníBundleResource.

Pro projekt pro Android mají všechny rastry stejný název, ale jsou uloženy v různých podsložkách složky prostředků :

Rastrový obrázek 72-pixel uložený jako /Resources/drawable-hdpi/MonkeyFace.png
Rastrový obrázek 96-pixel uložený jako /Resources/drawable-xhdpi/MonkeyFace.png
Rastrový obrázek 144-pixel uložený jako /Resources/drawable-xxhdpi/MonkeyFace.png
Rastrový obrázek 192-pixel uložený jako /Resources/drawable-xxxhdpi/MonkeyFace.png

Těmto akcím bylo uděleno sestavení AndroidResource.

V projektu UWP mohou být bitmapy uloženy kdekoli v projektu, ale většinou jsou uloženy ve vlastní složce nebo v existující složce assets . Projekt UWP obsahuje tyto rastrové obrázky:

Rastrový obrázek 48-pixel uložený jako /Assets/MonkeyFace.scale-100.png
Rastrový obrázek 96-pixel uložený jako /Assets/MonkeyFace.scale-200.png
Rastrový obrázek 192-pixel uložený jako /Assets/MonkeyFace.scale-400.png

Všechny byly přiděleny akci sestaveníobsahu.

Můžete určit, jak TextImageSource jsou vlastnosti a uspořádány na Button pomocí Xamarin_Forms Text vlastnost _Button_ContentLayout data-LINKTYPE = "absolutní cesta" >ContentLayoutButton . Tato vlastnost je typu ButtonContentLayout , což je vložená třída v Button . Xamarin_Forms _Button_ButtonContentLayout__ctor_ Xamarin_Forms _Button_ButtonContentLayout_ImagePosition_System_Double_ má konstruktor >data-LINKTYPE = "absolutní cesta" dva argumenty:

Člen ImagePosition výčtu: Left , Top , Right nebo Bottom označující, jak se rastr zobrazuje vzhledem k textu.
doubleHodnota pro mezery mezi rastrovým obrázkem a textem

Výchozí hodnoty jsou Left a 10 jednotek. Dvě vlastnosti jen pro čtení ButtonContentLayout s názvem Xamarin_Forms ButtonContentLayout _Button_ButtonContentLayout_Position "data-LINKTYPE =" absolutní cestu ">Position a Xamarin_Forms _Button_ButtonContentLayout_Spacing data-LINKTYPE =" absolutní cesta ">Spacing Zadejte hodnoty těchto vlastností.

V kódu můžete vytvořit Button a nastavit ContentLayout vlastnost takto:

Button button = new Button
{
    Text = "button text",
    ImageSource = new FileImageSource
    {
        File = "image filename"
    },
    ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Right, 20)
};

V jazyce XAML je nutné zadat pouze člena výčtu, nebo mezeru nebo obojí v libovolném pořadí odděleném čárkami:

<Button Text="button text"
        ImageSource="image filename"
        ContentLayout="Right, 20" />

Ukázková stránka tlačítka obrázku používá k zadání různých názvů souborů pro soubory rastrového obrázku pro iOS, Android a UWP. Pokud chcete pro každou platformu použít stejný název souboru a vyhnout se použití OnPlatform , budete muset bitmapy UWP Uložit do kořenového adresáře projektu.

První Button na ukázkové stránce Button nastavuje Image vlastnost, ale ne Text vlastnost:

<Button>
    <Button.ImageSource>
        <OnPlatform x:TypeArguments="ImageSource">
            <On Platform="iOS, Android" Value="MonkeyFace.png" />
            <On Platform="UWP" Value="Assets/MonkeyFace.png" />
        </OnPlatform>
    </Button.ImageSource>
</Button>

Pokud jsou bitmapy UWP uložené v kořenovém adresáři projektu, může být tento kód výrazně zjednodušený:

<Button ImageSource="MonkeyFace.png" />

Chcete-li se vyhnout velkému repetitious kódu v souboru ImageButtonDemo. XAML , je definována také implicitní instance pro nastavení ImageSource Vlastnosti. To Style se automaticky aplikuje na pět dalších Button prvků. Zde je kompletní soubor XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.ImageButtonDemoPage">

    <FlexLayout Direction="Column"
                JustifyContent="SpaceEvenly"
                AlignItems="Center">

        <FlexLayout.Resources>
            <Style TargetType="Button">
                <Setter Property="ImageSource">
                    <OnPlatform x:TypeArguments="ImageSource">
                        <On Platform="iOS, Android" Value="MonkeyFace.png" />
                        <On Platform="UWP" Value="Assets/MonkeyFace.png" />
                    </OnPlatform>
                </Setter>
            </Style>
        </FlexLayout.Resources>

        <Button>
            <Button.ImageSource>
                <OnPlatform x:TypeArguments="ImageSource">
                    <On Platform="iOS, Android" Value="MonkeyFace.png" />
                    <On Platform="UWP" Value="Assets/MonkeyFace.png" />
                </OnPlatform>
            </Button.ImageSource>
        </Button>

        <Button Text="Default" />

        <Button Text="Left - 10"
                ContentLayout="Left, 10" />

        <Button Text="Top - 10"
                ContentLayout="Top, 10" />

        <Button Text="Right - 20"
                ContentLayout="Right, 20" />

        <Button Text="Bottom - 20"
                ContentLayout="Bottom, 20" />
    </FlexLayout>
</ContentPage>

Poslední čtyři Button prvky využívají ContentLayout vlastnost k určení pozice a mezer textu a rastrového obrázku:

Ukázka –

Nyní vidíte různé způsoby, kterými můžete zpracovávat Button události a měnit Button vzhled.