Krok 5: Přidat ovládací prvky do formuláře

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.

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

1. Přejděte do Panelu nástrojů a rozbalte skupinu Běžné ovládací prvky. Toto zobrazí nejběžnější ovládací prvky, které vidíte ve formulářích.

2. Dvakrát klikněte na ovládací prvek PictureBox. Rozhraní IDE přidá ovládací prvek 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.

3. Klikněte 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. Klikněte pravým tlačítkem myši na ovládací prvek a potom klikněte na tlačítko Odstranit z nabídky. Můžete také vybrat Vrácení zpět z nabídky Úpravy k odebrání ovládacích prvků z formuláře.

4. Klikněte na propojení Ukotvit v nadřazeném kontejneru. Tím se automaticky nastaví vlastnost PictureBox Dock na hodnotu Fill. Toto zobrazíte kliknutím na ovládací prvek PictureBox k jeho vybrání, přejdete do okna Vlastnosti a ujistěte se, ze vlastnost Dock je nastavena na hodnotu Fill.

5. 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.

6. Přidejte ovládací prvek CheckBox do formuláře. Dvakrát klikněte na položku CheckBox v Panelu nástrojů, aby rozhraní IDE přidalo nový ovládací prvek CheckBox do další volné buňky v tabulce. Protože PictureBox zabírá první dvě buňky, ovládací prvek CheckBox je přidán do levé dolní buňky. Vyberte nový ovládací prvek CheckBox a nastavte jeho vlastnost Text na hodnotu Stretch, jak je znázorněno na následujícím obrázku.

   Ovládací prvek TextBox s vlastností Stretch

   

7. 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 jej ukotvěte do nadřazeného kontejneru (buď výběrem Ukotvit v nadřazeném kontejneru ze seznam úkolů nebo nastavením jeho vlastnosti Dock na hodnotu Fill).

   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.

Přidat tlačítka

1. Vyberte FlowLayoutPanel, který jste přidali. Přejděte na Běžné ovládací prvky v Panelu nástrojů a dvakrát klikněte na ikonu Button k přidání 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.

   Poznámka

   V jazyce Visual Basic jsou pojmenovány tlačítka s počáteční velkým písmenem, takže button1 je Button1, button2 je Button2 atd.

2. Obvykle přidáte další tlačítka pomocí Panelu nástrojů. Tentokrát klikněte na button2 a potom na nabídku Úpravy, klikněte na Kopírovat (nebo stisknutím kombinace kláves Ctrl+C). V nabídce Úpravy klikněte na Vložit (nebo stiskněte klávesy Ctrl+V) k vložení kopie vašeho tlačítka. Nyní jej vložte znovu. Rozhraní IDE nyní přidalo button3 a button4.

   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šich třech tlačítek na hodnotuVymazat 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 levé 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ěly 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 kliknout na jedno z tlačítek a přetáhnout jej doleva nebo doprava.

5. Klikněte na tlačítko Zavřít k jeho výběru. Podržte stisknutou klávesu Ctrl a klikněte na 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šechny č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ář. Kliknutím na tlačítka a zaškrtávací políčko ještě nic neudělá, ale bude to pracovat brzy.

Chcete-li pokračovat nebo znovu projít

• Přechod na další výukový program naleznete v tématu Krok 6: Pojmenovat vaše tlačítka.

• K návratu do předchozího kroku výukového programu přejděte na Krok 4: Rozložit formulář s ovládacím prvkem TableLayoutPanel.