Krok 1: Vytvořte projekt a přidejte do svého formuláře tabulku

Prvním krokem při vytváření porovnávací hry je vytvořit projekt a přidat tabulku do formuláře.Tabulka pomáhá zarovnat ikony do mřížky 4x4.Nastavením několika vlastností můžete také vylepšit vzhled hrací plochy.

Vytvoření projektu a přidání tabulky do formuláře

1. Na řádku nabídek klikněte na položky Soubor, Nový, Projekt.

2. Pokud nepoužíváte Visual Studio Express, musíte nejprve vybrat programovací jazyk.V seznamu Nainstalované šablony zvolte buď možnost Visual C#, nebo Visual Basic.

3. V seznamu šablon projektu vyberte šablonu Formulářová aplikace Windows, pojmenujte projekt Porovnávací hra a klikněte na tlačítko OK.

4. V okně Vlastnosti nastavte následující vlastnosti formuláře.

   1. Změňte vlastnost formuláře Text z Form1 na Porovnávací hra.Tento text se zobrazí v horní části herního okna.

   2. Nastavte velikost formuláře na šířku 550 pixelů a výšku 550 pixelů.Můžete to provést buď nastavením vlastnosti Velikost na hodnotu 550, 550, nebo tažením rohu formuláře, dokud se správná velikost nezobrazí v pravém dolním rohu integrovaného vývojového prostředí (IDE).

5. Výběrem karty Sada nástrojů v levé části IDE zobrazte sadu nástrojů.

6. Přetáhněte ovládací prvek TableLayoutPanel z kategorie Kontejnery v sadě nástrojů a nastavte pro něj následující vlastnosti.

   1. Nastavte vlastnost BackColor na hodnotu CornflowerBlue.Kliknutím na rozevírací šipku vedle vlastnosti BackColor v okně Vlastnosti otevřete dialogové okno BackColor. Pak kliknutím na kartu Web v dialogovém okně BackColor zobrazte seznam názvů dostupných barev.

      [!POZNÁMKA]

      Barvy nejsou zobrazeny v abecedním pořadí a položka CornflowerBlue je v dolní části seznamu.

   2. Nastavte vlastnost Ukotvit na hodnotu Výplň kliknutím na rozevírací tlačítko vedle vlastnosti a kliknutím na velké prostřední tlačítko.Rozšíříte tak tabulku, aby zahrnovala celý formulář.

   3. Nastavte vlastnost CellBorderStyle na hodnotu Inset.Nastavíte tak vizuální hranice mezi každou buňkou na ploše.

   4. Kliknutím na tlačítko trojúhelníku v pravém horním rohu kontejneru TableLayoutPanel zobrazíte nabídku úloh.

   5. V nabídce úloh klikněte dvakrát na příkaz Přidat řádek a přidejte tak další dva řádky. Pak dvakrát klikněte na příkaz Přidat sloupec a přidejte tak další dva sloupce.

   6. V nabídce úloh výběrem položky Upravit řádky a sloupce zobrazte okno Styly řádků a sloupců.Vyberte jednotlivé sloupce, klikněte na tlačítko Procento a nastavte šířku každého sloupce na 25 procent celkové šířky.Pak z rozevírací nabídky v horní části okna vyberte položku Řádky a nastavte výšku každého řádku na 25 procent.Až skončíte, klikněte na tlačítko OK.

   Váš kontejner TableLayoutPanel by nyní měl být mřížka 4x4, se 16 stejně velkými čtvercovými buňkami.Na místě těchto řádků a sloupců se později zobrazí obrázky ikon.

7. Kontejner TableLayoutPanel musí být vybrán v editoru formuláře.V horní části okna Vlastnosti byste měli vidět tableLayoutPanel1.Pokud vybrán není, vyberte kontejner TableLayoutPanel ve formuláři nebo jej zvolte v ovládacím prvku rozevíracího seznamu v horní části okna Vlastnosti.

   Je-li kontejner TableLayoutPanel vybrán, otevřete sadu nástrojů a do levé horní buňky kontejneru TableLayoutPanel přidejte Popisek (nachází se v kategorii Běžné ovládací prvky).V integrovaném vývojovém prostředí by měl nyní být vybrán ovládací prvek Popisek.Nastavte pro něj následující vlastnosti.

   1. Ověřte, zda vlastnost popisku BackColor je nastavena na hodnotu CornflowerBlue.

   2. Nastavte vlastnost Automaticky přizpůsobit velikost na hodnotu Nepravda.

   3. Nastavte vlastnost Ukotvení na hodnotu Výplň.

   4. Nastavte vlastnost TextAlign na hodnotu MiddleCenter kliknutím na rozevírací tlačítko vedle vlastnosti a kliknutím na prostřední tlačítko.Ikona se tak zobrazí uprostřed buňky.

   5. Zvolte vlastnost Písmo.Mělo by se zobrazit tlačítko tří teček (...).

   6. Kliknutím na tlačítko tří teček nastavte hodnotu Písmo na Webdings, hodnotu Styl písma na Tučné a hodnotu Velikost na 72.

   7. Hodnotu vlastnosti Text nastavte na písmeno c.

      Levá horní buňka v kontejneru TableLayoutPanel by měla nyní obsahovat černé pole zarovnané na střed na modrém pozadí.

      [!POZNÁMKA]

      Písmo Webdings je písmo ikon dodávané s operačním systémem Windows.Ve vaší porovnávací hře musí hráči hledat dvojice ikon, takže toto písmo použijete k zobrazení ikon, které mají být spárovány.Namísto vložení hodnoty c do vlastnosti Text zkuste zadat různá písmena a zjistit, jaké ikony se zobrazí.Vykřičník je pavouk, velké písmeno N je oko a čárka je čili paprička.

8. Zvolte svůj ovládací prvek popisku a zkopírujte jej na další buňku v kontejneru TableLayoutPanel. (Stiskněte klávesy Ctrl+C nebo na řádku nabídek zvolte položky Upravit, Kopírovat.) Potom jej vložte. (Stiskněte klávesy Ctrl+V nebo na řádku nabídek zvolte položky Upravit, Vložit.) Kopie prvního popisku se zobrazí v druhé buňce kontejneru TableLayoutPanel.Vložit jej znovu a ve třetí buňce se zobrazí další popisek.Pokračujte ve vkládání ovládacího prvku Popisek, dokud nejsou vyplněny všechny buňky.

   [!POZNÁMKA]

   Pokud popisek vložíte příliš často, rozhraní IDE přidá do kontejneru TableLayoutPanel nový řádek tak, aby bylo místo pro přidání nového ovládacího prvku popisku.Akci můžete vrátit zpět.Chcete-li novou buňku odstranit, stiskněte klávesy Ctrl+Z nebo na panelu nabídek zvolte položky Upravit, Zpět.

   Rozvržení vašeho formuláře je nyní hotovo.Mělo by vypadat jako na následujícím obrázku.

   Počáteční formulář porovnávací hry

   

Chcete-li pokračovat nebo přezkoumat

• Chcete-li zobrazit další krok tutoriálu, přejděte na Krok 2: Přidejte náhodný objekt a seznam ikon.

• Pro návrat na téma přehledu přejděte na Tutoriál 3: Vytvoření hry s hledáním shody.