Krok 5: Přidejte do svého formuláře ovládací prvky

V tomto kroku přidáte ovládací prvky, například ovládací prvek PictureBox a ovládací prvek CheckBox do formuláře.Potom přidáte tlačítka do formuláře.

Video verzi tohoto tématu naleznete v části Kurz 1: Vytvoření prohlížeče obrázků v jazyce Visual Basic - Video 2 nebo Kurz 1: Vytvoření prohlížeče obrázků v jazyce C# - Video 2.Tato videa používají starší verzi aplikace Visual Studio, takže existují mírné rozdíly v některých příkazech nabídek a jiných prvcích uživatelského rozhraní.Nicméně koncepty a postupy fungují podobně, jako v aktuální verzi aplikace Visual Studio.

Přidat ovládací prvky do formuláře

1. Přejděte na kartu Panel nástrojů (umístěna na levé straně rozhraní IDE sady Visual Studio) a rozbalte skupinu Běžné ovládací prvky.Toto zobrazí nejběžnější ovládací prvky, které vidíte ve formulářích.

2. Vyberte ovládací prvek TableLayoutPanel ve formuláři.Chcete-li ověřit, že je vybrán kontejner TableLayoutPanel, ujistěte se, že se jeho název zobrazuje v rozevíracím seznamu v horní části okna Vlastnosti.Můžete také vybrat ovládací prvky formuláře pomocí rozevíracího seznamu v horní části okna Vlastnosti.Výběr ovládacího prvku tímto způsobem může často být jednodušší než volba prvku tiny pomocí myši.

3. Poklepejte na položku PictureBox pro přidání ovládacího prvku PictureBox do formuláře.Protože kontejner TableLayoutPanel je ukotven k vyplnění formuláře, přidá rozhraní IDE ovládací prvek PictureBox do první prázdné buňky (levý horní roh).

4. Zvolte nový ovládací prvek PictureBox vyberte ho a poté zvolte na černý trojúhelník na novém ovládacím prvku PictureBox k zobrazení jeho seznamu úloh, jak je znázorněno na následujícím obrázku.

   Úlohy třídy PictureBox

   

   [!POZNÁMKA]

   Pokud omylem přidáte nesprávný typ ovládacího prvku do vašeho kontejneru TableLayoutPanel, můžete jej odstranit.Klepněte pravým tlačítkem na ovládací prvek a potom v kontextové nabídce zvolte možnost Odstranit.Můžete také odebrat ovládací prvky z formuláře pomocí panelu nabídek.V řádku nabídek zvolte možnost Úprava > Zpět nebo Úprava > Odstranit.

5. Vyberte propojení Ukotvit v nadřazeném kontejneru.Tím se automaticky nastaví vlastnost PictureBox Dock na hodnotu Fill.Toto zobrazíte výběrem ovládacího prvku PictureBox jej vyberte, přejdete do okna Vlastnosti a ujistěte se, ze vlastnost Dock je nastavena na hodnotu Fill.

6. Nechejte PictureBox roztáhnout oba sloupce změnou jeho vlastnosti ColumnSpan.Vyberte ovládací prvek PictureBox a nastavte jeho vlastnost ColumnSpan na hodnotu 2.Také když je PictureBox prázdný, chcete zobrazit prázdný rámeček.Nastavte jeho vlastnost BorderStyle na hodnotu Fixed3D.

   [!POZNÁMKA]

   Pokud nevidíte vlastnost ColumnSpan pro váš ovládací prvek PictureBox, pak je pravděpodobné, že ovládací prvek PictureBox byl přidán do formuláře, nikoli do TableLayoutPanel.Chcete-li odstranit tento problém, zvolte ovládací prvek PictureBox, odstraňte ho, zvolte TableLayoutPanel a potom přidejte nový prvek PictureBox.

7. Vyberte TableLayoutPanel ve formuláři a potom přidejte do formuláře ovládací prvek Zaškrtávací políčko.Dvakrát klikněte na položku CheckBox v Panelu nástrojů, chcete-li přidat nový ovládací prvek CheckBox do další volné buňky v tabulce.Protože PictureBox zabírá na panelu TableLayoutPanel první dvě buňky, ovládací prvek CheckBox je přidán do levé dolní buňky.Zvolte vlastnost Text a zadejte hledané klíčové slovo Roztáhnout, jak je znázorněno na následujícím obrázku.

   Ovládací prvek TextBox s vlastností Stretch

   

8. Vyberte TableLayoutPanel ve formuláři a poté přejděte na skupinu Kontejnery v Panelu nástrojů (kde jste získali váš ovládací prvek TableLayoutPanel) a dvakrát klikněte na položku FlowLayoutPanel k přidání nového ovládacího prvku do poslední buňky v PictureBox.Potom ukotvěte FlowLayoutPanel v TableLayoutPanel (výběrem možnosti Ukotvit v nadřízeném kontejneru v seznamu úloh černého trojúhelníku na panelu FlowLayoutPanel nebo nastavením vlastnosti Ukotvit panelu FlowLayoutPanel na Vyplnit).

   [!POZNÁMKA]

   FlowLayoutPanel je kontejner, který uspořádá jiné ovládací prvky do úhledných řádků v pořadí.Pokud změníte velikost FlowLayoutPanel, pokud má místo k rozložení všech ovládacích prvků v jediném řádku, udělá to.V opačném případě je uspořádá na řádcích, jednoho nad druhým.Použijte FlowLayoutPanel k podržení čtyř tlačítek.Pokud jsou tlačítka uspořádány při přidání jedno na druhém, ujistěte se, že je před přidáním tlačítek vybráno FlowLayoutPanel.Přestože bylo dříve uvedeno, že každá buňka může obsahovat pouze jeden ovládací prvek, pravá dolní buňka panelu TableLayoutPanel má čtyři ovládací prvky tlačítka.Důvodem je, že do buňky obsahující další ovládací prvky můžete umístit ovládací prvek.Tento druh ovládacího prvku se nazývá kontejner a kontejner FlowLayoutPanel je kontejner.

Přidat tlačítka

1. Vyberte nový FlowLayoutPanel, který jste přidali.Přejděte na Běžné ovládací prvky v Panelu nástrojů a dvakrát klikněte na položku Button k přidání ovládacího tlačítka nazvaného button1 do vašeho kontejneru FlowLayoutPanel.Opakujte k přidání dalšího tlačítka.Rozhraní IDE zjistí, že tam je již tlačítko nazvané button1 a další nazve button2.

2. Obvykle přidáte další tlačítka pomocí Panelu nástrojů.Tentokrát vyberte možnost button2 a potom na panelu nabídek vyberte možnosti Úpravy, Kopírovat (nebo stiskněte kombinaci kláves Ctrl+C).Na panelu nabídek zvolte možnost Úpravy, Vložit (nebo stiskněte klávesy Ctrl+V) k vložení kopie vašeho tlačítka.Nyní jej vložte znovu.IDE nyní přidalo button3 a button4 do FlowLayoutPanel.

   [!POZNÁMKA]

   Můžete zkopírovat a vložit libovolný ovládací prvek.Rozhraní IDE pojmenuje a umístí nové ovládací prvky logickým způsobem.Pokud vložíte ovládací prvek do kontejneru, rozhraní IDE zvolí další logický prostor pro umístění.

3. Vyberte první tlačítko a nastavte jeho vlastnost Text na hodnotu Zobrazit obrázek.Potom nastavte vlastnosti Text dalších tří tlačítek na hodnotu Vymazat obrázek, Nastavit barvu pozadí a Zavřít.

4. Dalším krokem je změnit velikost tlačítek a uspořádat je tak, aby jejich zarovnání bylo k pravé straně panelu.Vyberte FlowLayoutPanel a podívejte se na jeho vlastnost FlowDirection.Změňte ji tak, že nastavíte hodnotu RightToLeft.Ihned poté, co učiníte, by se měla tlačítka připojit na pravou stranu buňky a jejich pořadí se obrátit, takže tlačítko Zobrazit obrázek je na pravé straně.

   [!POZNÁMKA]

   Pokud jsou tlačítka stále v nesprávném pořadí, můžete přetáhnout tlačítka kolem kontejneru FlowLayoutPanel k změně jejich uspořádání v libovolném pořadí.Můžete zvolit tlačítko a přetáhnout je doleva nebo doprava.

5. Výběrem tlačítka Zavřít jej vyberte.Podržte stisknutou klávesu Ctrl a vyberte další tři tlačítka tak, aby byly všechny vybrány.Zatímco jsou všechna tlačítka vybrána, přejděte do okna Vlastnosti a posouvejte nahoru až na vlastnost AutoSize.Tato vlastnost říká tlačítku, že má automaticky měnit velikost tak, aby se do něj vešel všechen text.Nastavte ji na hodnotu true.Tlačítka by měla být nyní správně velká a být ve správném pořadí. (Dokud jsou vybrány všechna čtyři tlačítka, můžete změnit všechny čtyři vlastnosti AutoSize současně.) Následující obrázek znázorňuje čtyři tlačítka.

   Prohlížeč obrázků se čtyřmi tlačítky

   

6. Nyní spusťte váš program znovu, abyste viděli váš nově rozložený formulář.Volba tlačítek a zaškrtávacího políčka ještě nic neudělá, ale proces brzy začne.

Pokračování nebo kontrola

• Přechod na další výukový program naleznete v tématu Krok 6: Pojmenujte své ovládací prvky tlačítek.

• K návratu do předchozího kroku výukového programu přejděte na Krok 4: Rozvrhněte svůj formulář pomocí ovládacího prvku TableLayoutPanel.