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é úlohy, na které se účastník kvízu 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í 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á 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 stažení sady Visual Studio pro stažení bezplatné verze.

Poznámka

Tento kurz vyžaduje šablonu projektu Windows Forms App (.NET Framework). Během instalace vyberte úlohu vývoje desktopových aplikací .NET:

Pokud už máte Visual Studio nainstalováno a potřebujete přidat další funkce, v nabídce vyberte Nástroje>Získat nástroje a funkcenebo v okně Vytvořit nový projekt vyberte odkaz Nainstalovat další nástroje a funkce.

cs-CZ:

Vytvoření projektu Windows Forms

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

1. Otevřete Visual Studio.

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

   

3. V okně Vytvořit nový projekt vyhledejte Windows Forms. Potom vyberte Desktop ze seznamu Typ projektu .

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

   

5. V okně Konfigurace nového projektu pojmenujte projekt MathQuiza 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 pojmenování souboru se ve Visual Studiu otevře formulář. V této části se dozvíte, jak změnit některé vlastnosti formuláře.

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

2. Vyberte formulář Form1.

3. Okno Vlastnosti nyní zobrazuje vlastnosti formuláře. Toto okno je obvykle v pravém dolním rohu sady Visual Studio. Pokud vlastnostinevidíte, vyberte Zobrazení>Okno 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 Math Quiz pro hodnotu Text a poté zvolte 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 správná velikost nezobrazí jako hodnota Velikost v okně Vlastnosti. Ú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 Size.

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

   Tyto hodnoty brání účastníků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 štítek. Do pozdějšího 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 Panel nástrojů. Pokud panel nástrojů nevidíte, vyberte Zobrazení>Panel nástrojů z nabídkové lišty nebo Ctrl+Alt+X.

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

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

   • Nastavte (Název) na timeLabel .
   • Změňte AutoSize na False, abyste mohli změnit velikost okna.
   • Změňte BorderStyle na FixedSingle, aby se kolem rámečku vytvořila čára.
   • Nastavte velikosti 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 potom 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 další ovládací prvek Popisek z panelu nástrojůa pak jeho velikost písma nastavte na 15,75.

6. Nastavte vlastnost textu tohoto popisku na Zbývající čas.

7. Přesuňte popisek tak, aby byl zarovnán vlevo od popisku timeLabel.

   

Přidejte ovládací prvky pro problém sčítání

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. Do formuláře přidejte ovládací prvek Popisek z panelu nástrojů .

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

   • Nastavte text na ? (otazník).
   • Nastavte hodnotu AutoSize 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 (Název) na plusLeftLabel.

3. Ve formuláři vyberte popisek plusLeftLabel, který jste vytvořili. Zkopírujte popisek tak, že vyberete Upravit>Kopírovat nebo Ctrl+C.

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

5. Uspořádejte tři nové popisky do řady napravo od popisku plusLeftLabel.

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

7. Nastavte vlastnost (Název) třetího popisku na plusRightLabel.

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

9. Do formuláře přidejte ovládací prvek NumericUpDown ze sady nástrojů. Další informace o tomto typu ovládacího prvku se dozvíte později.

10. V poli Vlastnosti nastavte následující vlastnosti ovládacího prvku NumericUpDown:

    • Nastavte velikost písma na 18.
    • V části MaximumSizenastavte šířku na 100.
    • Nastavte (Název) na součet .

11. Zarovnejte ovládací prvek NumericUpDown se štítky pro příklad sčítání.

    

Přidejte ovládání pro úlohy na 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 přidávané ovládací prvky.

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

   • Nastavte název () prvního popisku s otazníkem 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 přidání a vložte je do formuláře ještě dvakrát.

5. Pro třetí řádek:

   • Nastavte (Název) prvního štítku s otazníkem na timesLeftLabel.
   • Nastavte Text druhého štítku na × (znak 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 s otazníkem na timesRightLabel.
   • Nastavte (Název) ovládacího prvku NumericUpDown na produkt.

6. Čtvrtý řádek:

   • Nastavte (Název) prvního popisku otazníku na dividedLeftLabel.
   • 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 dividedRightLabel.
   • Nastavte (Název) ovládacího prvku NumericUpDown na uvozovek .

Přidej tlačítko Start a nastav pořadí indexu tabulátoru

V této části se dozvíte, jak přidat tlačítko Start. Také určíte pořadí ovládacích prvků pro tabulátorové přepínání. Toto řazení určuje, jak se účastník kvízu přesune z jednoho ovládacího prvku na druhý pomocí klávesy Tab.

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

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

   • Nastavte (Název) na startButton.
   • Nastavte Text na Zahájit kvíz.
   • Nastavte velikost písma na 14.
   • Nastavte automatické velikosti na true, což způsobí, že se tlačítko automaticky změní tak, aby odpovídalo textu.
   • Nastavte TabIndex na 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

   

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

   • Nastavte TabIndex ovládacího prvku součtu na 1.
   • Nastavte TabIndex ovládacího prvku rozdíl na 2.
   • Nastavte TabIndex ovládacího prvku produktu na 3.
   • Nastavte TabIndex ovládacího prvku na 4.

Spuštění aplikace

Matematické úlohy ještě ve vašem kvízu nefungují. Přesto ale můžete aplikaci spustit a zkontrolovat, jestli TabIndex hodnoty 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 panelu nabídek vyberte Ladit>Spustit ladění.
   • Na panelu nástrojů vyberte tlačítko Start.

3. Několikrát vyberte klávesu tabulátoru a podívejte se, jak se fokus přesune z jednoho ovládacího prvku na druhý.

Další krok

Přejděte na další tutoriál a přidejte do matematického kvízu náhodné matematické problémy a obslužnou rutinu události.

Kurz – část 2: Přidání matematických problémů do aplikace WinForms matematického kvízu