Cvičení – psaní aplikace pro UPW

  • 15 min

Screenshot that shows the UWP, WPF, and Windows Forms logo.

Univerzální platforma Windows (UPW) v sadě Visual Studio je technologie, která umožňuje, aby jedna aplikace běžela na jakémkoli zařízení: stolní počítač, přenosný počítač, tablet, Xbox, Surface Hub nebo zařízení HoloLens. Existuje mnoho podobností mezi vývojem pro UPW a vývojem pro Windows Presentation Foundation (WPF), ale existují i některé drobné rozdíly. Tento kurz se zabývá těmito rozdíly a představuje první krok do světa programování pro UPW.

V této lekci:

  • Pomocí sady Visual Studio vytvořte nový projekt UPW.
  • Přidejte do projektu prvky uživatelského rozhraní a kódu, abyste vytvořili zábavnou variantu programu "hello world". Text "Hello there!" a ohraničení mění barvu náhodně pokaždé, když vyberete tlačítko Řekněte ahoj .
  • Zjistěte, jak nastavit vlastnosti a vytvářet události.

Poznámka:

Předpokládáme, že jste nastavili počítač s Windows a sadou Visual Studio 2022, jak je popsáno v modulu Learn Úvod do vývoje pro Windows 10.

Kurz "Say hello" pro UPW

Vytvoření projektu

  1. Otevřete Visual Studio a v nabídce vyberte Soubor>nový>projekt. Pak jako jazyk projektu vyberte jazyk C# . Dále vyberte typ projektu Prázdná aplikace (Univerzální systém Windows ). Do pole Název zadejte popisný název, například SayHello. Až budete hotovi, vyberte Vytvořit .

    Poznámka:

    Stačí vybrat OK, když dialogové okno Nový Univerzální platforma Windows Projektu vám nabídne možnosti výběru cílové a minimální verze UPW. Výchozí výběry budou pro tento projekt fungovat správně.

    Screenshot that shows the Configure your new project window for a Blank App (Universal Windows) with the create button selected.

  2. Když se projekt otevře, je vhodné se ujistit, že jsou otevřená podokna Průzkumník řešení a Vlastnosti. Ve výchozím nastavení se nacházejí na pravé straně sady Visual Studio. Pokud nejsou viditelné, otevřete nabídku Zobrazení a vyberte obě.

  3. V Průzkumník řešení zkontrolujte názvy dvou souborů, na kterých pracujeme: MainPage.xaml a jeho soubor s kódem, MainPage.xaml.cs. Výběrem souboru MainPage.xaml ho otevřete.

    Screenshot that shows the MainPage.xaml and MainPage.xaml.cs files in a red box in Solution Explorer.

Návrh uživatelského rozhraní

  1. Pokud panel Nástrojů ještě není otevřený, vyberte nabídku Zobrazení a pak vyberte Panel nástrojů. Na panelu nástrojů vyberte Běžné ovládací prvky XAML.

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

  2. Přetáhněte tlačítko do dolní části rozložení návrháře. Potom přetáhněte TextBox do horní části rozložení a přetáhněte jeho rohy trochu ven, aby vypadal jako tady:

    Screenshot that shows a button dragged onto the design layout.

    Poznámka:

    Všimněte si, jak se do mřížky v definici XAML, která se zobrazí pod rozložením, přidáno< tlačítko a položky panelu nástrojů.>

  3. Teď chceme u těchto prvků uživatelského rozhraní nastavit některé vlastnosti. Vyberte tlačítko, aby se jeho vlastnosti zobrazily v podokně Vlastnosti . Změňte název na něco jednoduchého, například SayHelloButton, a změňte obsah (rozšířením společné) na Say hello.

    Screenshot that shows the Name and Content properties set in the Properties window.

    Poznámka:

    Všimněte si, jak se vlastnost Name přidá do položky Button v definici XAML, která se zobrazí pod rozložením. Definice XAML se aktualizuje automaticky při změně vlastností v návrháři.

  4. K tlačítku musíme připojit událost. Můžete vybrat samotné tlačítko, ale to funguje jenom v případě, že je rozložení návrháře v požadovaném stavu. Konkrétnější způsob, jak zadat událost, je otevřít události dostupné pro danou položku uživatelského rozhraní. Uděláte to tak, že vyberete ikonu zobrazenou tady v podokně Vlastnosti a pak vyberete položku události Click . Tím se automaticky vytvoří pojmenovaná událost SayHelloButton_Click, přidá příslušnou položku kódu do souboru MainPage.xaml.cs a otevře soubor za vás.

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

  5. Zatím nezadáváme žádný kód, takže v hlavním zobrazení vyberte MainPage.xaml . Prozatím pokračujte v práci na uživatelském rozhraní.

  6. Vyberte textové pole, které jste vytvořili v návrháři, a zobrazte jeho vlastnosti. Provedeme několik změn vlastností textového pole. Pokud se události zobrazují v podokně Vlastnosti , vyberte ikonu klíče vedle názvu a vraťte se k pojmenovanými vlastnostmi.

  7. Změňte položku Název na textBox1 a potom ve vlastnostech rozložení změňte šířku a výšku na 360 a 80.

    Screenshot that shows the Layout properties of Width and Height set in the Properties window.

  8. Sbalte oddíl Rozložení .

  9. V seznamu Velikost textu změňte velikost bodu na 36: něco pěkného a viditelného!

    Screenshot that shows the Name set as textBox1 in the properties, and the Tex tab open with 36px selected as the text size.

  10. Ve výchozím nastavení je pro oddíl Text otevřená karta písma označená písmenem A. Vyberte ikonu odstavce a změňte zarovnání na Střed.

    Screenshot that shows the paragraph tab under the Text menu selected, and Center selected as the paragraph justification.

  11. Sbalte oddíl Text a rozbalte položku Vzhled. Pokud chcete zobrazit úplný seznam, vyberte šipku dolů v dolní části vystaveného seznamu vlastností vzhledu. Změňte tloušťku ohraničení na 1 pro levé a horní ohraničení a na 8 pro pravé a dolní ohraničení. Teď má pole trochu stínového efektu!

    Screenshot that shows the Appearance menu expanded in the Properties window, with the BorderThickness settings in a red box.

  12. Sbalit vzhled a rozbalit Společné. Zadejte text textového pole: něco vhodného jako Hello there!.

    Screenshot that shows the Common menu expanded in the Properties window, with Hello there entered in the Text property.

Téměř jste dokončili prvky uživatelského rozhraní pro vaši aplikaci. Položka Mřížka <> v souboru XAML by měla vypadat takto:

Screenshot that shows an example of the the XAML file, with a Button and TextBox element inside the Grid element. All of the Button and Textbox properties are displayed.

Poznámka:

U záznamu ano, můžete xaml upravovat přímo, měnit číselné hodnoty nebo dokonce přidávat celé prvky uživatelského rozhraní. V tomto kurzu to neuděláme.

Napsání kódu za sebou

  1. Teď můžeme přejít z uživatelského rozhraní na kód aplikace. Je čas znovu otevřít soubor MainPage.xaml.cs. Vyberte soubor nad hlavním zobrazením nebo v Průzkumník řešení. Třída MainPage by měla vypadat takto:

    public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  2. Pojďme se ujistit, že máme všechny potřebné příkazy using . Zkontrolujte, jestli máte následující položky, a pokud ne, přidejte je. Konkrétně se ujistěte, že příkaz using Windows.UI existuje. Po dokončení úprav souboru můžete volitelně odebrat všechny nepotřebné příkazy, které Sada Visual Studio zahrnula při vytváření projektu. Nepoužité obory názvů se zobrazují šedě.

    using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

  3. Aplikace při každém výběru tlačítka vykreslí text hello náhodnou barvou. Proto potřebujeme přidat objekt Random na úrovni třídy a GetRandomBytes metoda, která náhodně vyplní hodnoty, které používáme jako nastavení RGB. Zkopírujte a vložte tento kód nebo ho zadejte sami, aby vaše třída MainPage vypadala takto:

    public sealed partial class MainPage : Page
{
    private Random rand;

    public MainPage()
    {
        this.InitializeComponent();
        rand = new Random();
    }

    private byte[] GetRandomBytes(int n)
    {
        // Fill an array of bytes of length "n" with random numbers.
        var randomBytes = new byte[n];
        rand.NextBytes(randomBytes);
        return randomBytes;
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  4. Nakonec musíme volat GetRandomBytes z události kliknutí na tlačítko, vytvořit náhodnou barvu z vráceného pole bajtů a potom změnit vlastnosti textového pole na tuto barvu. Dokončená metoda SayHelloButton_Click by měla vypadat takto:

        private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {
        byte[] rgb = GetRandomBytes(3);

        // Create a solid color brush using the three random numbers.
        var randomColorBrush = new SolidColorBrush(Color.FromArgb(255, rgb[0], rgb[1], rgb[2]));

        // Set both the text color and the text box border to the random color.
        textBox1.BorderBrush = randomColorBrush;
        textBox1.Foreground = randomColorBrush;
    }

  5. Zkontrolujte kód za sekundu nebo dva. Pokud je něco podtržené červeně, něco není v pořádku. Může to být chybně napsané slovo nebo část kódu, kde by neměla být.

Spustit

Pojďme program zkompilovat a spustit!

  1. V sadě Visual Studio v nabídce Ladění vyberte Spustit bez ladění nebo stačí vybrat klávesu F5. Pokud jste všechno zadali správně, měla by se zobrazit spuštěná aplikace podobná téhle:

    Screenshot that shows the app running. Hello there displays with green text in a green box with the Say hello button below it.

  2. Když opakovaně vyberete tlačítko Řekněte ahoj, zobrazí se text "Hello there!" a ohraničení se změní na náhodné barvy.

Jestli to vidíte, tak dobře. Dokončili jste tento kurz. Pokud ne, pečlivě prověřte nastavení vlastností kódu a uživatelského rozhraní pro něco, co je pryč.