Úvod k ovládacím prvkům a událostem

Při vývoji Windows app je control prvek uživatelského rozhraní, který zobrazuje obsah nebo umožňuje interakci. Uživatelské rozhraní aplikace vytvoříte pomocí ovládacích prvků, jako jsou tlačítka, textová pole a pole se seznamem, abyste zobrazili data a získali uživatelský vstup.

Důležitá rozhraní API: obor názvů Microsoft.UI.Xaml.Controls

Vzor je recept na úpravu ovládacího prvku nebo kombinování několika ovládacích prvků, aby se něco nového změnilo. Vzor seznamu a podrobností je například způsob, jak použít ovládací prvek SplitView pro navigaci v aplikaci.

V mnoha případech můžete použít ovládací prvek, jak je. Ovládací prvky XAML ale oddělují funkci od struktury a vzhledu, takže můžete provádět různé úrovně úprav, aby vyhovovaly vašim potřebám. K úpravě ovládacího prvku můžete použít styly XAML a šablony ovládacích prvků .

V této části poskytujeme pokyny pro každý ovládací prvky XAML, které můžete použít k sestavení uživatelského rozhraní aplikace. V tomto článku se dozvíte, jak do aplikace přidat ovládací prvky. Použití ovládacích prvků pro vaši aplikaci zahrnuje 3 klíčové kroky:

  • Přidejte ovládací prvek do uživatelského rozhraní aplikace.
  • Nastavte vlastnosti ovládacího prvku, například šířku, výšku nebo barvu popředí.
  • Přidejte kód do obslužných rutin událostí ovládacího prvku, aby prováděl nějakou akci.

Přidání ovládacího prvku

Ovládací prvek můžete do aplikace přidat několika způsoby:

  • Přidejte ovládací prvek do kódu XAML v Visual Studio editoru XAML.
  • Přidejte ovládací prvek do kódu. Ovládací prvky, které přidáte do kódu, jsou viditelné při spuštění aplikace, ale nejsou viditelné v návrháři Visual Studio XAML.

Když v Visual Studio přidáte ovládací prvky do aplikace a manipulujete s nimi, můžete použít řadu funkcí programu, včetně sady nástrojů, editoru XAML a okno Vlastnosti.

Panel nástrojů Visual Studio zobrazuje mnoho ovládacích prvků, které můžete použít v aplikaci. Pokud chcete do aplikace přidat ovládací prvek, poklikejte na něj v sadě nástrojů. Když například dvakrát kliknete na ovládací prvek TextBox, tento XAML se přidá do zobrazení XAML.

<TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

Nastavení názvu ovládacího prvku

Pokud chcete pracovat s ovládacím prvek v kódu, nastavte jeho atribut x:Name a odkazujte na něj podle názvu v kódu. Název můžete nastavit v Visual Studio okno Vlastnosti nebo v XAML. Tady je postup, jak nastavit název aktuálně vybraného ovládacího prvku pomocí textového pole Název v horní části okno Vlastnosti.

Pojmenování ovládacího prvku

  1. Vyberte prvek, který chcete pojmenovat.
  2. Na panelu Vlastnosti zadejte název do textového pole Název.
  3. Stisknutím klávesy Enter potvrďte název.

vlastnost Name v návrháři Visual Studio

Tady je postup, jak nastavit název ovládacího prvku v editoru XAML přidáním atributu x:Name.

<Button x:Name="Button1" Content="Button"/>

Nastavení vlastností ovládacího prvku

Vlastnosti slouží k určení vzhledu, obsahu a dalších atributů ovládacích prvků. Když přidáte ovládací prvek pomocí nástroje pro návrh, můžou být některé vlastnosti, které určují velikost, umístění a obsah, nastaveny pro vás Visual Studio.

Vlastnosti ovládacího prvku můžete nastavit v jazyce XAML nebo v kódu. Chcete-li například změnit barvu popředí tlačítka, nastavíte vlastnost Popředí ovládacího prvku. Tento obrázek ukazuje, jak nastavit vlastnost Popředí pomocí výběru barvy v okno Vlastnosti.

Barevný výběr v návrháři Visual Studio

Tady je postup, jak nastavit vlastnost Popředí v editoru XAML. Všimněte si okna Visual Studio IntelliSense, které vám pomůže se syntaxí.

IntelliSense v XAML část 1

IntelliSense v XAML – část 2

Tady je výsledný KÓD XAML po nastavení vlastnosti Popředí.

<Button x:Name="Button1" Content="Button" 
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Foreground="Beige"/>

Tady je postup, jak nastavit vlastnost Popředí v kódu.

Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);

Button1().Foreground(Media::SolidColorBrush(Windows::UI::Colors::Beige()));

Vytvořte obslužnou rutinu události

Každý ovládací prvek zveřejňuje události, které umožňují reagovat na akce uživatelů nebo na jiné změny v aplikaci. Tlačítko například vyvolá Click událost, když na ni uživatel klikne. Chcete-li na tuto událost reagovat, napíšete obslužnou rutinu události – metodu, která se spustí při vyvolání události. Obslužnou rutinu události můžete připojit v okně Vlastnosti, v XAML nebo v kódu. Další informace o událostech najdete v tématu Události a přehled směrovaných událostí.

Parametry zpracovatele události

Každá obslužná rutina události přijímá dva parametry:

  • sender – Odkaz na objekt, který vyvolal událost. Je zadaný jako Objekt, takže ho obvykle přetypujete na konkrétnější typ (například Button), když potřebujete zkontrolovat nebo změnit stav odesílatele. Přetypování na bezpečný typ na základě místa, kde je obslužný kód připojen.
  • e (nebo args) – Data události, která nesou informace specifické pro danou událost.

Následující příklad zpracovává událost Click tlačítka pojmenovaného Button1. Po kliknutí na tlačítko se barva popředí nastaví na modrou.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

Připojit obslužnou rutinu události v XAML

V editoru XAML začněte psát název události, kterou chcete zpracovat. Visual Studio při psaní otevře okno IntelliSense. Dvojkliknutím <New Event Handler> vytvořte obslužnou rutinu s výchozím názvem, nebo ze seznamu vyberte existující obslužnou rutinu.

IntelliSense pro událost kliknutí

Tento příklad přidruží Click událost k obslužné rutině pojmenované Button_Click v jazyce XAML:

<Button Name="Button1" Content="Button" Click="Button_Click"/>

Přidružit obslužnou rutinu události v kódu

Obslužnou rutinu můžete také zcela nastavit pomocí code-behind.

Button1.Click += new RoutedEventHandler(Button_Click);

Button1().Click({ this, &MainPage::Button1_Click });
  • Last updated on