Cvičení – psaní aplikace WPF

15 min

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

Windows Presentation Foundation (WPF) v sadě Visual Studio poskytuje vývojářům rozhraní API pro vytváření aplikací pro stolní počítače, poznámkový blok a tablet. WPF je postaven na výkonném grafickém systému DirectX a poskytuje mnoho skvělých funkcí uživatelského rozhraní a efektů s malým programovacím úsilím.

V této lekci:

Pomocí sady Visual Studio vytvořte projekt WPF.
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, jak je popsáno v modulu Learn Úvod do vývoje pro Windows 10.

Kurz wpf "Say hello"

Vytvoření projektu

Otevřete Visual Studio a v nabídce vyberte Soubor>nový>projekt. Jako jazyk projektu vyberte jazyk C# . Dále vyberte typ projektu aplikace WPF a do pole Název zadejte popisný název, například Řekněte ahoj. Až budete hotovi, vyberte Další .
Vyberte svou verzi .NET a pak vyberte Vytvořit.
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í jsou umístěné na pravé straně okna sady Visual Studio. Pokud nejsou viditelné, otevřete nabídku Zobrazení a vyberte obě.
V Průzkumník řešení zkontrolujte názvy dvou souborů, na kterých pracujeme: MainWindow.xaml a jeho kód za souborem MainWindows.xaml.cs. Výběrem souboru MainWindow.xaml ho otevřete.

Návrh uživatelského rozhraní

Pokud panel nástrojů není otevřený, vyberte nabídku Zobrazení a pak vyberte Panel nástrojů. Na panelu nástrojů vyberte Běžné ovládací prvky WPF.
Přetáhněte tlačítko do dolní části rozložení návrháře. Potom přetáhněte textové pole do horní části rozložení a přetáhněte jeho rohy trochu ven, aby vypadalo, jak vidíte tady:

Poznámka:

Všimněte si, jak se do mřížky v definici XAML, které se zobrazují pod rozložením, přidány <položky tlačítka a Textového pole.>
Dále chceme aktualizovat text, který se zobrazí v záhlaví okna. Vyberte okno v rozložení návrháře, aby se jeho vlastnosti zobrazovaly v podokně Vlastnosti a potom změňte název na Pozdrav.
Teď chceme u nových 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 ve společných vlastnostech na Say hello.
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 blesku zobrazenou tady v podokně Vlastnosti a pak jednoduše vyberete položku události Kliknutí . Tím se automaticky vytvoří pojmenovaná událost SayHelloButton_Click, přidá příslušnou položku kódu do souboru MainWindow.xaml.cs a otevře soubor za vás.
Zatím nezadáváme žádný kód, takže v hlavním zobrazení vyberte MainWindow.xaml . Prozatím pracujeme na uživatelském rozhraní.
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.
Změňte položku Název na textBox1 a potom ve vlastnostech rozložení změňte šířku a výšku na 360 a 80.
Sbalte oddíl Rozložení .
V seznamu Velikost textu změňte velikost bodu na 36: něco pěkného a viditelného!
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.
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!
Sbalit vzhled a rozbalit Společné. Zadejte text textového pole: něco vhodného jako Hello there!.

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:

XAML můžete 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

Teď můžeme přejít z uživatelského rozhraní na kód aplikace. Je čas znovu otevřít soubor MainWindow.xaml.cs. Vyberte soubor nad hlavním zobrazením nebo v Průzkumník řešení. Třída MainWindow by měla vypadat takto:
```
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}
```
Pojďme se ujistit, že máme všechny potřebné příkazy using . Ujistěte se, že jsou tady zobrazené, a pokud ne, přidejte je. 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 System.Windows;
using System.Windows.Media;
```

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 MainWindow vypadala takto:

public partial class MainWindow : Window
{
    private Random rand;

    public MainWindow()
    {
        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)
    {

    }
}

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;
    }

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!

V sadě Visual Studio vyberte v nabídce Ladění možnost Spustit bez ladění (nebo Spustit ladění, i když v tomto kurzu neprovádíme žádné 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:
Opakovaným výběrem tlačítka Řekněte ahoj zobrazíte text Hello! 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č.

Pokračovat