Kurz: Vytvoření matematické kvízové aplikace WinForms

V této sérii čtyř kurzů vytvoříte matematický kvíz. Kvíz obsahuje čtyři náhodné matematické problémy, na které se kvíz snaží odpovědět v zadaném čase.

Integrované vývojové prostředí (IDE) sady Visual Studio poskytuje nástroje, které potřebujete k vytvoření aplikace. Další informace o tomto integrovaném vývojovém prostředí (IDE) najdete v tématu Vítá vás integrované vývojové prostředí sady Visual Studio.

V tomto prvním kurzu se naučíte:

  • Vytvořte projekt sady Visual Studio, který používá model Windows Forms.
  • Přidejte do formuláře popisky, tlačítko a další ovládací prvky.
  • Nastavte vlastnosti ovládacích prvků.
  • Uložte a spusťte projekt.

Požadavky

K dokončení tohoto kurzu potřebujete Visual Studio. Navštivte stránku se soubory ke stažení sady Visual Studio pro bezplatnou verzi.

Vytvoření projektu model Windows Forms

Při vytváření matematického kvízu je prvním krokem vytvoření projektu aplikace model Windows Forms.

  1. Otevřete sadu Visual Studio.

  2. V úvodním okně vyberte Vytvořit nový projekt.

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. V okně Vytvořit nový projekt vyhledejte model Windows Forms. Potom v seznamu typů projektů vyberte Možnost Plocha.

  4. Vyberte šablonu aplikace model Windows Forms (.NET Framework) pro jazyk C# nebo Visual Basic a pak vyberte Další.

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    Poznámka:

    Pokud šablonu aplikace model Windows Forms (.NET Framework) nevidíte, můžete ji nainstalovat z okna Vytvořit nový projekt. Ve zprávě Nenašli jste, co hledáte? vyberte Nainstalovat další nástroje a funkce.

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    V Instalační program pro Visual Studio vyberte vývoj desktopových aplikací .NET.

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    V Instalační program pro Visual Studio vyberte Upravit. Může se zobrazit výzva k uložení práce. Dále vyberte Pokračovat a nainstalujte úlohu.

  5. V okně Konfigurovat nový projekt pojmenujte projekt MathQuiz a pak vyberte Vytvořit.

  1. Otevřete sadu Visual Studio.

  2. V úvodním okně vyberte Vytvořit nový projekt.

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. V okně Vytvořit nový projekt vyhledejte model Windows Forms. Potom v seznamu typů projektů vyberte Možnost Plocha.

  4. Vyberte šablonu aplikace model Windows Forms (.NET Framework) pro jazyk C# nebo Visual Basic a pak vyberte Další.

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    Poznámka:

    Pokud šablonu aplikace model Windows Forms (.NET Framework) nevidíte, můžete ji nainstalovat z okna Vytvořit nový projekt. Ve zprávě Nenašli jste, co hledáte? vyberte Nainstalovat další nástroje a funkce.

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    V Instalační program pro Visual Studio vyberte vývoj desktopových aplikací .NET.

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    V Instalační program pro Visual Studio vyberte Upravit. Může se zobrazit výzva k uložení práce. Dále vyberte Pokračovat a nainstalujte úlohu.

  5. V okně Konfigurovat nový projekt pojmenujte projekt MathQuiz a pak vyberte Vytvořit.

Visual Studio vytvoří řešení pro vaši aplikaci. Řešení je kontejner pro všechny projekty a soubory, které vaše aplikace potřebuje.

Nastavení vlastností formuláře

Po výběru šablony a názvu souboru se v sadě Visual Studio otevře formulář. V této části se dozvíte, jak změnit některé vlastnosti formuláře.

  1. V projektu vyberte model Windows Forms Designer. Karta návrháře je označená jako Form1.cs [Návrh] pro C# nebo Form1.vb [Design] pro Visual Basic.

  2. Vyberte formulář Form1.

  3. Okno Vlastnosti teď zobrazuje vlastnosti formuláře. Toto okno je obvykle v pravém dolním rohu sady Visual Studio. Pokud vlastnosti nevidíte, vyberte okno Zobrazit>vlastnosti.

  4. Najděte vlastnost Text v okně Vlastnosti. V závislosti na tom, jak je seznam seřazený, možná budete muset posunout dolů. Zadejte hodnotu Matematický kvíz pro text a pak vyberte Enter.

    Ve formuláři je teď text Matematický kvíz v záhlaví.

    Poznámka:

    Vlastnosti můžete zobrazit podle kategorie nebo abecedy. Pomocí tlačítek v okně Vlastnosti můžete přepínat tam a zpět.

  5. Změňte velikost formuláře na šířku 500 pixelů o 400 pixelů na výšku.

    Velikost formuláře můžete změnit přetažením jeho okrajů nebo přetažením úchytu, dokud se v okně Vlastnosti nezobrazísprávná velikost. Úchyt pro přetažení je malý bílý čtvereček v pravém dolním rohu formuláře. Velikost formuláře můžete změnit také změnou hodnot vlastnosti Velikost .

  6. Změňte hodnotu FormBorderStyle vlastnost na Fixed3D a nastavte MaximalizovatBox vlastnost False.

    Tyto hodnoty brání volajícím kvízu ve změně velikosti formuláře.

Vytvoření pole zbývajícího času

Matematický kvíz obsahuje pole v pravém horním rohu. V tomto poli se zobrazí počet sekund, které zůstávají v kvízu. V této části se dozvíte, jak pro toto pole použít popisek. V pozdějším kurzu této série přidáte kód časovače odpočítávání.

  1. Na levé straně integrovaného vývojového prostředí sady Visual Studio vyberte kartu Sada nástrojů. Pokud panel nástrojů nevidíte, vyberte v řádku nabídek možnost Zobrazit>sadu nástrojů nebo kombinaci kláves Ctrl+Alt+X.

  2. Label Vyberte ovládací prvek v sadě nástrojů a přetáhněte ho do formuláře.

  3. V poli Vlastnosti nastavte pro popisek následující vlastnosti:

    • Nastavte hodnotu (Name) na timeLabel.
    • Změňte automatickou velikost na False , abyste mohli změnit velikost pole.
    • Změňte BorderStyle na FixedSingle a nakreslete kolem pole čáru.
    • Nastavte velikost na 200, 30.
    • Vyberte vlastnost Text a potom stisknutím klávesy Backspace vymažte hodnotu Text.
    • Vyberte znaménko plus (+) vedle vlastnosti Písmo a pak nastavte velikost na 15,75.
  4. Přesuňte popisek do pravého horního rohu formuláře. Když se zobrazí modré mezerníkové čáry, použijte je k umístění ovládacího prvku ve formuláři.

  5. Přidejte z panelu nástrojů další ovládací prvek Popisek a nastavte jeho velikost písma na 15,75.

  6. Nastavte vlastnost Text tohoto popisku na hodnotu Čas vlevo.

  7. Přesuňte popisek tak, aby se vyřádil nalevo od popisku timeLabel .

    Screenshot that shows the Time Left label and the remaining time label. The controls are lined up next to each other in the upper-right corner of the form.

Přidáníovládacích

První část kvízu představuje problém s přidáním. V této části se dozvíte, jak tento problém zobrazit pomocí popisků.

  1. Přidejte do formuláře ovládací prvek Popisek ze sady nástrojů .

  2. V poli Vlastnosti nastavte pro popisek následující vlastnosti:

    • Nastavte text na ? (otazník).
    • Nastavte automatické nastavení na false.
    • Nastavte velikost na 60, 50.
    • Nastavte velikost písma na 18.
    • Nastavte TextAlign na MiddleCenter.
    • Nastavte umístění na 50, 75 pro umístění ovládacího prvku ve formuláři.
    • Nastavte hodnotu (Name) na plusLeftLabel.
  3. Ve formuláři vyberte popisek plusLeftLabel , který jste vytvořili. Zkopírujte popisek výběrem možnosti Upravit>kopii nebo Ctrl+C.

  4. Třikrát vložte popisek do formuláře tak, že vyberete možnost Upravit>vložit nebo Ctrl+V třikrát.

  5. Uspořádejte tři nové popisky tak, aby byly v řádku napravo od popisku plusLeftLabel .

  6. Nastavte vlastnost Text druhého popisku na + (znaménko plus).

  7. Nastavte vlastnost třetího popisku (Name) na plusRightLabel.

  8. Nastavte vlastnost Text čtvrtého popisku na = (znaménko rovná se).

  9. NumericUpDown Přidejte ovládací prvek ze sady nástrojů do formuláře. O tomto typu ovládacího prvku se dozvíte více později.

  10. V okně Vlastnosti nastavte následující vlastnosti pro ovládací prvek NumericUpDown:

    • Nastavte velikost písma na 18.
    • Nastavte šířku na 100.
    • Nastavte součet (Název).
  11. Vyrovnejte ovládací prvek NumericUpDown s ovládacími prvky Popisek pro problém sčítání.

    Screenshot that shows the first row of the math quiz. Labels are visible, and a control with arrow keys displays a zero.

Sčítání ovládacích prvků pro odčítání, násobení a dělení

V dalším kroku přidejte do formuláře popisky pro zbývající matematické problémy.

  1. Zkopírujte čtyři ovládací prvky Popisek a ovládací prvek NumericUpDown, který jste vytvořili pro problém sčítání. Vložte je do formuláře.

  2. Přesuňte nové ovládací prvky tak, aby se zarovnaly pod ovládací prvky sčítání.

  3. V poli Vlastnosti nastavte pro nové ovládací prvky následující vlastnosti:

    • Nastavte (Název) prvního popisku otazníku na minusLeftLabel.
    • Nastavte text druhého popisku na - (znaménko minus).
    • Nastavte (Název) druhého popisku otazníku na minusRightLabel.
    • Nastavte (Název) ovládacího prvku NumericUpDown na rozdíl.
  4. Zkopírujte ovládací prvky sčítání a vložte je dvakrát do formuláře.

  5. Třetí řádek:

    • Nastavte (Název) prvního popisku otazníku na timesLeftLabel.
    • Nastavte text druhého popisku na × (znaménko násobení). Znaménko násobení můžete zkopírovat z tohoto kurzu a vložit ho do formuláře.
    • Nastavte (Název) druhého popisku otazníku na timesRightLabel.
    • Nastavte (Název) ovládacího prvku NumericUpDown na produkt.
  6. Čtvrtý řádek:

    • Nastavte (Název) prvního popisku otazníku na dělenoLeftLabel.
    • Nastavte text druhého popisku na ÷ (znaménko dělení). Znaménko dělení můžete zkopírovat z tohoto kurzu a vložit ho do formuláře.
    • Nastavte (Název) druhého popisku otazníku na dělenýRightLabel.
    • Nastavte hodnotu (Name) ovládacího prvku NumericUpDown na quotient.

Screenshot that shows a math quiz with four rows of problems. Labels and controls with arrow keys are visible.

Přidání tlačítka Start a nastavení pořadí indexu tabulátoru

V této části se dozvíte, jak přidat tlačítko Start. Zadáte také pořadí ovládacích prvků pro tabbing. Toto řazení určuje, jak se má kvíz přesunout z jednoho ovládacího prvku na druhý pomocí klávesy Tab .

  1. Button Přidejte ovládací prvek ze sady nástrojů do formuláře.

  2. V okně Vlastnosti nastavte následující vlastnosti tlačítka:

    • Nastavte (Název) na startButton.
    • Nastavte text na začátek kvízu.
    • Nastavte velikost písma na 14.
    • Nastavte automatickou velikost na Hodnotu True, což způsobí, že se tlačítko automaticky změní tak, aby odpovídalo textu.
    • Nastavte tabIndex na hodnotu 0. Díky této hodnotě je tlačítko Start prvním ovládacím prvku pro příjem fokusu.
  3. Tlačítko zarovnat na střed v dolní části formuláře

    Screenshot that shows a math quiz with four rows of problems and a start button.

  4. V dialogovém okně Vlastnosti nastavte vlastnost TabIndex každého ovládacího prvku NumericUpDown:

    • Nastavte TabIndex ovládacího prvku NumericUpDown na hodnotu 1.
    • Nastavte TabIndex ovládacího prvku NumericUpDown na hodnotu 2.
    • Nastavte TabIndexovládacího prvku NumericUpDown produktu na hodnotu 3.
    • Nastavte TabIndex ovládacího prvku NumericUpDown na hodnotu 4.

Spusťte aplikaci

Matematické problémy ještě na kvízu nefungují. Přesto ale můžete aplikaci spustit a zkontrolovat, jestli hodnoty TabIndex fungují podle očekávání.

  1. K uložení aplikace použijte jednu z následujících metod:

    • Vyberte Ctrl+Shift+S.
    • Na řádku nabídek vyberte Soubor>uložit vše.
    • Na panelu nástrojů vyberte tlačítko Uložit vše .
  2. Ke spuštění aplikace použijte jednu z následujících metod:

    • Vyberte F5.
    • Na řádku nabídek vyberte Spustit>ladění.
    • Na panelu nástrojů vyberte tlačítko Start .
  3. Několikrát vyberte klávesu Tab , abyste viděli, jak se fokus přesune z jednoho ovládacího prvku na další.

Další kroky

V dalším kurzu přidáte do matematického kvízu náhodné matematické problémy a obslužnou rutinu události.