Xamarin.Forms Kurz k tlačítku

Článek
Developer (Začátečník)
7 min do dokončení

Než se pustíte do tohoto kurzu, měli byste úspěšně dokončit tyto položky:

Vytvořte svůj první Xamarin.Forms rychlý start k aplikaci .
Kurz k objektu StackLayout

V tomto kurzu se naučíte:

Vytvořte v XAML.Xamarin.FormsButton
Reagovat na klepnutí na objekt Button
Změnit vzhled objektu Button

V sadě Visual Studio 2019 nebo Visual Studio pro Mac vytvoříte jednoduchou aplikaci, která předvádí, jak přizpůsobit Button. Na následujících snímcích obrazovky je zachycena finální aplikace:

K zobrazení změn uživatelského rozhraní bez opětovného sestavení aplikace použijete také Opětovné načítání za provozu Xamarin.Forms XAML.

Vytvoření tlačítka

6 min zbývá

Visual Studio
Visual Studio pro Mac

K dokončení tohoto kurzu byste měli mít Visual Studio 2019 (nejnovější vydanou verzi) s nainstalovanou sadou funkcí Vývoj mobilních aplikací pomocí .NET. Kromě toho budete potřebovat spárovaný Mac pro sestavení aplikace z kurzu v iOSu. Informace o instalaci platformy Xamarin najdete v článku Instalace Xamarinu. Informace o připojení sady Visual Studio 2019 k hostiteli buildu pro Mac najdete v článku Spárování s počítačem Mac pro vývoj na platformě Xamarin.iOS.

Spusťte Visual Studio a vytvořte novou prázdnou Xamarin.Forms aplikaci s názvem ButtonTutorial.

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název ButtonTutorial. Použití jiného názvu způsobí při kopírování kódu z tohoto kurzu do řešení chyby sestavení.

Další informace o knihovně .NET Standard, která se vytvoří, najdete v tématu Anatomie Xamarin.Forms aplikace v podrobném Xamarin.Forms kurzu Rychlý start.
V Průzkumníkovi řešení v projektu ButtonTutorial poklikáním otevřete soubor MainPage.xaml. Pak v souboru MainPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:
```
<?xml version="1.0" encoding="utf-8"?>    
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá z objektu Button v objektu StackLayout. Vlastnost Button.Text určuje text, který se zobrazí v objektu Button.
Na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, která se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOSu nebo emulátoru Androidu:

Všimněte si, že ve výchozím nastavení objekt Button zabírá celé místo, které je pro něj vymezené – v tomto případě celou šířku svého nadřazeného objektu (StackLayout).

V sadě Visual Studio zastavte aplikaci.

K dokončení tohoto kurzu byste měli mít Visual Studio pro Mac (nejnovější vydanou verzi) s nainstalovanou podporou pro platformy iOS a Android. Kromě toho budete také potřebovat Xcode (nejnovější vydanou verzi). Další informace o instalaci platformy Xamarin najdete v článku Instalace Xamarinu.

Spusťte Visual Studio pro Mac a vytvořte novou prázdnou Xamarin.Forms aplikaci s názvem ButtonTutorial.

Důležité

Fragmenty kódu C# a XAML v tomto kurzu vyžadují, aby řešení mělo název ButtonTutorial. Použití jiného názvu způsobí při kopírování kódu z tohoto kurzu do řešení chyby sestavení.

Další informace o knihovně .NET Standard, která se vytvoří, najdete v tématu Anatomie Xamarin.Forms aplikace v podrobném Xamarin.Forms kurzu Rychlý start.
V Oblasti řešení v projektu ButtonTutorial poklikáním otevřete soubor MainPage.xaml. Pak v souboru MainPage.xaml odeberte veškerý kód šablony a nahraďte ho následujícím kódem:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Tento kód deklarativně definuje uživatelské rozhraní pro stránku, která se skládá z objektu Button v objektu StackLayout. Vlastnost Button.Text určuje text, který se zobrazí v objektu Button.
Na panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu:

Všimněte si, že ve výchozím nastavení objekt Button zabírá celé místo, které je pro něj vymezené – v tomto případě celou šířku svého nadřazeného objektu (StackLayout).

V sadě Visual Studio pro Mac zastavte aplikaci.

Zpracování kliknutí

4 min zbývá

Visual Studio
Visual Studio pro Mac

V souboru MainPage.xaml můžete upravit deklaraci objektu Button tak, aby nastavila obslužnou rutinu pro událost Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Tento kód nastaví událost Clicked na obslužnou rutinu události s názvem OnButtonClicked, která bude vytvořena v dalším kroku.
V Průzkumníkovi řešení v projektu ButtonTutorial rozbalte uzel MainPage.xaml a poklikáním otevřete soubor MainPage.xaml.cs. Potom v souboru MainPage.xaml.cs přidejte obslužnou rutinu události OnButtonClicked do třídy:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Při klepnutí na objekt Button se spustí metoda OnButtonClicked. Argument sender je objekt Button odpovídající za vyvolání události Clicked a dá se použít pro přístup k objektu Button. Tato obslužná rutina události aktualizuje text zobrazený objektem Button.

Poznámka:

Kromě události Clicked objekt Button definuje také události Pressed a Released. Další informace naleznete v tématu Stisknutí a uvolnění tlačítka v průvodci Xamarin.Forms tlačítkem .
Na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, která se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOSu nebo emulátoru Androidu. Klikněte na objekt Button a podívejte se, jak se zobrazený text změní:

Další informace o kliknutí na tlačítko zpracování naleznete v části Zpracování kliknutí na tlačítko v průvodci Xamarin.Forms tlačítkem .

V souboru MainPage.xaml můžete upravit deklaraci objektu Button tak, aby nastavila obslužnou rutinu pro událost Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Tento kód nastaví událost Clicked na obslužnou rutinu události s názvem OnButtonClicked, která bude vytvořena v dalším kroku.
V Oblasti řešení v projektu ButtonTutorial rozbalte uzel MainPage.xaml a poklikáním otevřete soubor MainPage.xaml.cs. Potom v souboru MainPage.xaml.cs přidejte obslužnou rutinu události OnButtonClicked do třídy:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Při klepnutí na objekt Button se spustí metoda OnButtonClicked. Argument sender je objekt Button odpovídající za vyvolání události Clicked a dá se použít pro přístup k objektu Button. Tato obslužná rutina události aktualizuje text zobrazený objektem Button.

Poznámka:

Kromě události Clicked objekt Button definuje také události Pressed a Released. Další informace naleznete v tématu Stisknutí a uvolnění tlačítka v průvodci Xamarin.Forms tlačítkem .
Na panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, která se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu. Klikněte na objekt Button a podívejte se, jak se zobrazený text změní:

Další informace o kliknutí na tlačítko zpracování naleznete v části Zpracování kliknutí na tlačítko v průvodci Xamarin.Forms tlačítkem .

Změna vzhledu

2 min zbývá

Visual Studio
Visual Studio pro Mac

V souboru MainPage.xaml můžete úpravou deklarace objektu Button změnit jeho vzhled:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Tento kód nastavuje vlastnosti, které změní vzhled objektu Button. Vlastnost TextColor nastavuje barvu textu v objektu Button a vlastnost BackgroundColor nastavuje barvu pozadí textu. Vlastnost BorderColor nastavuje barvu ohraničení objektu Button a vlastnost BorderWidth šířku ohraničení. Ve výchozím nastavení má objekt Button tvar obdélníku, ale můžete mu dodat zaoblené rohy nastavením vlastnosti CornerRadius na vhodnou hodnotu. Velikost objektu Button se pak mění nastavením jeho vlastností WidthRequest a HeightRequest.
Pokud aplikace stále běží, uložte změny do souboru a uživatelské rozhraní aplikace se v simulátoru nebo emulátoru aktualizuje automaticky. V ostatních případech na panelu nástrojů sady Visual Studio stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném vzdáleném simulátoru iOSu nebo emulátoru Androidu. Všimněte si, že vzhled objektu Button se změnil:

V sadě Visual Studio zastavte aplikaci.

Další informace o nastavení Button vzhledu naleznete v části Vzhled tlačítka v průvodci Xamarin.Forms tlačítkem .

V souboru MainPage.xaml můžete úpravou deklarace objektu Button změnit jeho vzhled:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Tento kód nastavuje vlastnosti, které změní vzhled objektu Button. Vlastnost TextColor nastavuje barvu textu v objektu Button a vlastnost BackgroundColor nastavuje barvu pozadí textu. Vlastnost BorderColor nastavuje barvu ohraničení objektu Button a vlastnost BorderWidth šířku ohraničení. Ve výchozím nastavení má objekt Button tvar obdélníku, ale můžete mu dodat zaoblené rohy nastavením vlastnosti CornerRadius na vhodnou hodnotu. Velikost objektu Button se pak mění nastavením jeho vlastností WidthRequest a HeightRequest.
Pokud aplikace stále běží, uložte změny do souboru a uživatelské rozhraní aplikace se v simulátoru nebo emulátoru aktualizuje automaticky. V ostatních případech na panelu nástrojů sady Visual Studio pro Mac stiskněte tlačítko Spustit (trojúhelníkové tlačítko, které se podobá tlačítku Přehrát), aby se aplikace spustila ve zvoleném simulátoru iOSu nebo emulátoru Androidu. Všimněte si, že vzhled objektu Button se změnil:

V sadě Visual Studio pro Mac zastavte aplikaci.

Další informace o nastavení Button vzhledu naleznete v části Vzhled tlačítka v průvodci Xamarin.Forms tlačítkem .

Xamarin.Forms Kurz k tlačítku

Vytvoření tlačítka

Zpracování kliknutí

Změna vzhledu

Gratulujeme!

Další kroky

Xamarin.Forms Kurz k tlačítku

Vytvoření tlačítka

Zpracování kliknutí

Změna vzhledu

Gratulujeme!

Další kroky

Související odkazy