Tlačítko

Článek
10/29/2024

Uživatelské rozhraní aplikace .NET pro více platforem (.NET MAUI) Button zobrazuje text a reaguje na klepnutí nebo kliknutí, které aplikaci přesměruje k provedení úkolu. Obvykle Button se zobrazí krátký textový řetězec označující příkaz, ale může také zobrazit rastrový obrázek nebo kombinaci textu a obrázku. Button Když se stiskne prstem nebo na něj kliknete myší, spustí se tento příkaz.

Button definuje následující vlastnosti:

BorderColor, typu Color, popisuje barvu ohraničení tlačítka.
BorderWidth, typu double, definuje šířku ohraničení tlačítka.
CharacterSpacing, typu double, definuje mezery mezi znaky textu 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.
ContentLayout, typu ButtonContentLayout, definuje objekt, který řídí umístění obrázku tlačítka a mezery mezi obrázkem a textem tlačítka.
CornerRadius, typu int, popisuje rohový poloměr ohraničení tlačítka.
FontAttributes, typu FontAttributes, určuje styl textu.
FontAutoScalingEnabled, typu bool, definuje, zda text tlačítka bude odrážet předvolby škálování nastavené v operačním systému. Výchozí hodnota této vlastnosti je true.
FontFamily, typu string, definuje rodinu písem.
FontSize, typu double, definuje velikost písma.
ImageSource, typu ImageSource, určuje rastrový obrázek, který se má zobrazit jako obsah tlačítka.
LineBreakMode, typu LineBreakMode, určuje, jak se má text zpracovat, když se nevejde na jeden řádek.
Padding, typu Thickness, určuje odsazení tlačítka.
Text, typu string, definuje text zobrazený jako obsah tlačítka.
TextColor, typu Color, popisuje barvu textu tlačítka.
TextTransform, typu TextTransform, definuje velikost písmen textu tlačítka.

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

Poznámka:

Zatímco Button definuje ImageSource 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.

Kromě toho Button definuje Clicked, Presseda Released události. Událost Clicked se vyvolá, když Button se z povrchu tlačítka uvolní klepnutí prstem nebo ukazatelem myši. Událost Pressed je vyvolána, když prst stiskne na Buttontlačítko myši nebo je stisknuto ukazatelem nad Button. 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 Button před uvolněním, Clicked událost nemusí nastat.

Důležité

Aby Button mohl reagovat na klepnutí, musí mít IsEnabled vlastnost nastavenou true na hodnotu.

Vytvoření tlačítka

Tlačítko vytvoříte tak, že vytvoříte Button objekt a zpracujete jeho Clicked událost.

Následující příklad XAML ukazuje, jak vytvořit Button:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.BasicButtonClickPage"
             Title="Basic Button Click">
    <StackLayout>
        <Button Text="Click to Rotate Text!"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />
        <Label x:Name="label"
               Text="Click the Button above"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

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

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

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

V tomto příkladu Button se po klepnutí metoda OnButtonClicked spustí. Argument sender je Button objekt zodpovědný za tuto událost. Můžete ho použít pro přístup k objektu Button nebo k rozlišení mezi více Button objekty, které sdílejí stejnou Clicked událost. Obslužná rutina Clicked volá animační funkci, která otočí Label 360 stupňů v 1000 milisekundách:

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

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

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

Aplikace může reagovat na Button klepnutí bez zpracování Clicked události. Implementuje Button 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ý zejména v souvislosti s datovou vazbou a zejména při implementaci modelu Model-View-ViewModel (MVVM). V aplikaci MVVM model viewmodel definuje vlastnosti typu ICommand , které jsou pak připojeny k Button objektům s datovými vazbami. .NET MAUI také definuje Command a Command<T> třídy, které implementují ICommand rozhraní a pomáhají modelu viewmodel při definování vlastností typu ICommand. Další informace o příkazech naleznete v tématu Příkazování.

Následující příklad ukazuje velmi jednoduchou viewmodel třídy, která definuje vlastnost typu double s názvem Number, a dvě vlastnosti typu ICommand pojmenované MultiplyBy2Command a DivideBy2Command:

public class CommandDemoViewModel : INotifyPropertyChanged
{
    double number = 1;

    public event PropertyChangedEventHandler PropertyChanged;

    public ICommand MultiplyBy2Command { get; private set; }
    public ICommand DivideBy2Command { get; private set; }

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

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

V tomto příkladu jsou dvě ICommand vlastnosti inicializovány v konstruktoru třídy se dvěma objekty typu Command. Konstruktory Command zahrnují malou funkci (označovanou jako argument konstruktoru execute ), která buď zdvojnásobí nebo polovinu hodnoty Number vlastnosti.

Následující příklad XAML využívá CommandDemoViewModel třídu:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             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="18"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
        <Button Text="Multiply by 2"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Command="{Binding MultiplyBy2Command}" />
        <Button Text="Divide by 2"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Command="{Binding DivideBy2Command}" />
    </StackLayout>
</ContentPage>

V tomto příkladu Label element a dva Button objekty obsahují vazby na tři vlastnosti ve CommandDemoViewModel třídě. Po klepnutí na dva Button objekty se příkazy spustí a hodnota čísel se změní. Výhodou tohoto přístupu oproti Clicked obslužným rutinám je, že veškerá logika zahrnující funkce této stránky se nachází v modelu zobrazení, nikoli v souboru kódu, a dosahuje lepšího oddělení uživatelského rozhraní od obchodní logiky.

Objekty mohou také Command řídit povolení a zakázání Button objektů. Předpokládejme například, že chcete omezit rozsah číselných hodnot mezi 2¹⁰ a 2^–10. Do konstruktoru (označovaného jako canExecute argument) můžete přidat další funkci, která se vrátí true , pokud by měla být povolena Button :

public 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));
    }
    ···
}

V tomto příkladu ChangeCanExecute jsou volání metody Command požadována, aby Command metoda mohl volat metodu canExecute a určit, zda Button má být zakázáno, nebo ne. Když se tento kód změní, jakmile číslo dosáhne limitu Button , je zakázáno.

Je také možné, aby dva nebo více Button prvků byly vázány na stejnou ICommand vlastnost. Prvky Button lze rozlišit pomocí CommandParameter vlastnosti Button. V tomto případě budete chtít použít obecnou Command<T> třídu. Objekt CommandParameter se pak předá jako argument execute a canExecute metody. Další informace naleznete v tématu Příkazy.

Stiskněte a uvolněte tlačítko.

Událost Pressed je vyvolána, když prst stiskne na Buttontlačítko myši nebo je stisknuto ukazatelem nad Button. 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 Button před uvolněním, Clicked událost nemusí nastat.

Následující příklad XAML ukazuje Label obslužné Button rutiny připojené k událostem Pressed a Released události:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.PressAndReleaseButtonPage"
             Title="Press and Release Button">
    <StackLayout>
        <Button Text="Press to Rotate Text!"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                Pressed="OnButtonPressed"
                Released="OnButtonReleased" />
        <Label x:Name="label"
               Text="Press and hold the Button above"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

Soubor kódu za kódem animuje Label , kdy Pressed dojde k události, ale pozastaví otočení, když Released dojde k události:

public partial class PressAndReleaseButtonPage : ContentPage
{
    IDispatcherTimer timer;
    Stopwatch stopwatch = new Stopwatch();

    public PressAndReleaseButtonPage()
    {
        InitializeComponent();

        timer = Dispatcher.CreateTimer();
        timer.Interval = TimeSpan.FromMilliseconds(16);
        timer.Tick += (s, e) =>
        {
            label.Rotation = 360 * (stopwatch.Elapsed.TotalSeconds % 1);
        };
    }

    void OnButtonPressed(object sender, EventArgs args)
    {
        stopwatch.Start();
        timer.Start();
    }

    void OnButtonReleased(object sender, EventArgs args)
    {
        stopwatch.Stop();
        timer.Stop();
    }
}

Výsledkem je, že Label se pouze otočí, když je prst v kontaktu s prstem Buttona zastaví se při uvolnění prstu.

Stavy vizuálů tlačítek

ButtonPressed VisualState má možnost, která se dá použít k zahájení vizuální změny Button při stisknutí, pokud je povolená.

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

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

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

Důležité

Button Aby se měl vrátit do svého Normal stavu, VisualStateGroup musí také definovat PointerOver stav. Pokud použijete styly ResourceDictionary vytvořené šablonou projektu aplikace .NET MAUI, budete už mít implicitní Button styl, který definuje PointerOver stav.

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

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

Třída Button definuje ImageSource vlastnost, která umožňuje zobrazit malý rastrový obrázek na Button, buď samostatně, nebo v kombinaci s textem. Můžete také určit způsob uspořádání textu a obrázku. Vlastnost ImageSource je typu ImageSource, což znamená, že rastrové obrázky lze načíst ze souboru, vloženého prostředku, identifikátoru URI nebo datového proudu.

Rastrové obrázky nejsou škálovány tak, aby odpovídaly Button. Nejlepší velikost je obvykle mezi 32 a 64 jednotkami nezávislými na zařízení v závislosti na velikosti rastrového obrázku.

Můžete určit, jak Text jsou vlastnosti uspořádány podle Button ContentLayout vlastnosti Button.ImageSource Tato vlastnost je typu ButtonContentLayouta jeho konstruktor má dva argumenty:

Člen výčtu ImagePosition : Left, Top, , Rightnebo Bottom indikující, jak se rastrový obrázek zobrazuje vzhledem k textu.
double Hodnota pro mezery mezi rastrovým obrázkem a textem.

V jazyce XAML můžete vytvořit Button a nastavit ContentLayout vlastnost zadáním pouze člena výčtu, mezery nebo obojího v libovolném pořadí odděleném čárkami:

<Button Text="Button text"
        ImageSource="button.png"
        ContentLayout="Right, 20" />

Ekvivalentní kód jazyka C# je:

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

Poznámka:

Button Pokud obsahuje text a obrázek, nemusí být možné přizpůsobit veškerý obsah uvnitř tlačítka, a proto byste měli obrázek upravit ručně, abyste dosáhli požadovaného rozložení.

Zakázat tlačítko

Někdy aplikace zadá stav, ve kterém Button kliknutí není platná operace. V takových případech Button lze zakázat nastavením jeho IsEnabled vlastnosti na falsehodnotu .

Sdílet prostřednictvím