Kurz: Přidání ovládacích prvků uživatelského rozhraní do prohlížeče obrázků model Windows Forms aplikace v sadě Visual Studio

V této sérii tří kurzů vytvoříte model Windows Forms aplikaci, která načte obrázek a zobrazí ji. Integrované vývojové prostředí (IDE) sady Visual Studio poskytuje nástroje, které potřebujete k vytvoření aplikace. Další informace najdete v tématu Vítá vás integrované vývojové prostředí sady Visual Studio.

Tento program obsahuje pole s obrázkem, zaškrtávací políčko a několik tlačítek, která slouží k ovládání aplikace. V tomto kurzu se dozvíte, jak tyto ovládací prvky přidat.

V tomto druhém kurzu se naučíte:

• Přidání ovládacích prvků do aplikace
• Přidání tlačítek na panelu rozložení
• Změna názvů a umístění ovládacích prvků
• Přidání komponent dialogových oken

Požadavky

Tento kurz vychází z předchozího kurzu– Vytvoření aplikace prohlížeče obrázků. Pokud jste tento kurz ještě neudělali, projděte si ho jako první.

Přidání ovládacích prvků do aplikace

Aplikace Prohlížeč obrázků používá k zobrazení obrázku ovládací prvek PictureBox. Ke správě obrázku a pozadí a zavření aplikace se používá zaškrtávací políčko a několik tlačítek. Do panelu nástrojů v integrovaném vývojovém prostředí sady Visual Studio přidáte PictureBox a zaškrtávací políčko.

1. Otevřete sadu Visual Studio. Projekt Prohlížeč obrázků se zobrazí v části Otevřít poslední.

2. V návrháři model Windows Forms vyberte TableLayoutPanel, který jste přidali v předchozím kurzu. Zkontrolujte, zda se tabulkaLayoutPanel1 zobrazí v okně Vlastnosti .

3. Na levé straně integrovaného vývojového prostředí sady Visual Studio vyberte kartu Sada nástrojů. Pokud ho nevidíte, vyberte v>řádku nabídek panelu nabídek nebo kombinaci kláves Ctrl+Alt+X. Na panelu nástrojů rozbalte společné ovládací prvky.

4. Poklikáním na PictureBox přidáte do formuláře ovládací prvek PictureBox. Integrované vývojové prostředí sady Visual Studio přidá ovládací prvek PictureBox do první prázdné buňky TableLayoutPanel.

5. Vyberte nový ovládací prvek PictureBox , který chcete vybrat, a pak výběrem černého trojúhelníku v novém ovládacím prvku PictureBox zobrazte jeho seznam úkolů.

   

6. Vyberte Dock v nadřazené kontejneru, který nastaví Vlastnost PictureBox Dock na Fill. Tuto hodnotu můžete zobrazit v okně Vlastnosti .

7. V okně Vlastnosti pro PictureBox nastavte ColumnSpan vlastnost na 2. PictureBox teď vyplní oba sloupce.

8. Nastavte Vlastnost BorderStyle na Fixed3D.

9. V návrháři model Windows Forms vyberte TableLayoutPanel. Potom v sadě nástrojů poklikejte na položku CheckBox a přidejte nový ovládací prvek CheckBox. Váš PictureBox zabírá první dvě buňky v Prvku TableLayoutPanel, takže ovládací prvek CheckBox je přidán do levé dolní buňky.

10. Zvolte vlastnost Text a zadejte Stretch.

    

Přidání tlačítek na panelu rozložení

Zatím byly ovládací prvky přidány do TableLayoutPanel. Tyto kroky ukazují, jak přidat čtyři tlačítka na nový panel rozložení v panelu TableLayoutPanel.

1. Ve formuláři vyberte TableLayoutPanel. Otevřete panel nástrojů a vyberte Kontejnery. Poklikejte na FlowLayoutPanel a přidejte nový ovládací prvek do poslední buňky TableLayoutPanel.

2. Nastavte Vlastnost Dock FlowLayoutPanel na Fill. Tuto vlastnost můžete nastavit tak, že vyberete černý trojúhelník a pak vyberete Dock v nadřazené kontejneru.

   A FlowLayoutPanel je kontejner, který uspořádá další ovládací prvky na řádku, jeden za druhým.

3. Vyberte nový FlowLayoutPanel a pak otevřete panel nástrojů a vyberte Běžné ovládací prvky. Poklikejte na položku Tlačítko a přidejte ovládací prvek tlačítka s názvem button1.

4. Dalším kliknutím na tlačítko znovu přidejte další tlačítko. Integrované vývojové prostředí volá další tlačítko2.

5. Tímto způsobem přidejte dvě další tlačítka. Další možností je vybrat tlačítko2 a pak vybrat upravit>kopii nebo stisknout Ctrl+C. Potom v řádku nabídek zvolte Upravit>vložení nebo stiskněte Ctrl+ V. Pokud chcete vložit kopii tlačítka. Teď ho vložte znovu. Všimněte si, že integrované vývojové prostředí (IDE) přidá tlačítko3 a button4 do objektu FlowLayoutPanel.

6. Vyberte první tlačítko a nastavte jeho vlastnost Text na Zobrazit obrázek.

7. Nastavte vlastnosti textu u dalších tří tlačítek na Vymazání obrázku, nastavení barvy pozadí a zavření.

8. Pokud chcete změnit velikost tlačítek a uspořádat je, vyberte FlowLayoutPanel. Nastavte Vlastnost FlowDirection na RightToLeft.

   Tlačítka by se měla zarovnat k pravé straně buňky a vrátit jejich pořadí tak, aby bylo tlačítko Zobrazit obrázek vpravo. Tlačítka můžete přetáhnout kolem panelu FlowLayoutPanel a uspořádat je v libovolném pořadí.

9. Výběrem tlačítka Zavřít ho vyberte. Pokud pak chcete vybrat zbývající tlačítka najednou, stiskněte a podržte klávesu Ctrl a vyberte je také.

10. V okně Vlastnosti nastavte vlastnost AutoSize na True. Velikost tlačítek se změní tak, aby odpovídala textu.

    

Spuštěním programu můžete zjistit, jak ovládací prvky vypadají. Vyberte klávesu F5, vyberte >Spustit ladění nebo vyberte tlačítko Start. Tlačítka, která jste přidali, zatím nic nedělá.

Změna názvů ovládacích prvků

Ve formuláři jsou čtyři tlačítka s názvem button1, button2, button3 a button4 v jazyce C#. Ve Visual Basicu je výchozí první písmeno libovolného názvu ovládacího prvku velké, takže tlačítka mají název Button1, Button2, Button3 a Button4. Pomocí těchto kroků dejte jim více informativních názvů.

1. Ve formuláři zvolte tlačítko Zavřít . Pokud máte stále vybraná všechna tlačítka, kliknutím na Esc výběr zrušte.

2. V okně Vlastnosti vyhledejte (Název). Změňte název na closeButton.

   

   Integrované vývojové prostředí (IDE) nepřijímá názvy, které obsahují mezery.

3. Přejmenujte ostatní tři tlačítka na backgroundButton, clearButton a showButton. Názvy můžete ověřit tak, že v okně Vlastnosti vyberete rozevírací seznam selektoru ovládacího prvku. Zobrazí se názvy nových tlačítek.

Můžete změnit název libovolného ovládacího prvku, například TableLayoutPanel nebo zaškrtávací políčko.

Přidání komponent dialogových oken

Aplikace může otevírat soubory obrázků a zvolit barvu pozadí pomocí komponent. Komponenta je jako ovládací prvek. Pomocí panelu nástrojů můžete do formuláře přidat komponentu. Jeho vlastnosti nastavíte pomocí okna Vlastnosti .

Na rozdíl od ovládacího prvku přidání komponenty do formuláře nepřidá viditelnou položku. Místo toho poskytuje určité chování, které můžete aktivovat pomocí kódu. Jedná se například o komponentu, která otevře dialogové okno Otevřít soubor .

V této části přidáte do formuláře komponentu OpenFileDialog a komponentu ColorDialog .

1. Vyberte návrháře model Windows Forms (Form1.cs [Návrh]). Pak otevřete panel nástrojů a vyberte skupinu Dialogy .

2. Poklikáním na OpenFileDialog přidejte do formuláře komponentu s názvem openFileDialog1 .

3. Poklikáním na ColorDialog přidejte komponentu s názvem colorDialog1. Komponenty se zobrazí v dolní části model Windows Forms Designeru jako ikony.

   

4. Zvolte ikonu openFileDialog1 a nastavte dvě vlastnosti:

   • Nastavte vlastnost Filter na následující:

     JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
     

   • Nastavte vlastnost Název na následující: Vyberte soubor obrázku.

   Nastavení vlastnosti Filtr určuje typy, které se zobrazí v dialogovém okně Vybrat obrázek .

Další kroky

V dalším kurzu se dozvíte, jak do aplikace přidat kód.

Kurz 3. část: Přidání kódu do Prohlížeče obrázků