Sdílet prostřednictvím

Návod: Uspořádání ovládacích prvků ve Windows Forms pomocí vodicích linek

  • Článek

Přesné umístění ovládacích prvků ve formuláři je pro mnoho aplikací vysokou prioritou. Windows Forms Designer nabízí mnoho nástrojů pro rozložení, které vám umožní toho dosáhnout. Jednou z nejdůležitějších funkcí je SnapLine.

Vodítka vám přesně ukážou, kde zarovnat ovládací prvky s dalšími ovládacími prvky. Zobrazují se také doporučené vzdálenosti pro okraje mezi ovládacími prvky, jak je uvedeno v pokynech pro uživatelské rozhraní systému Windows .

Vodicí linky usnadňují zarovnání ovládacích prvků a zajistit tak ostrý, profesionální vzhled a chování (vzhled a dojem).

Vytvoření projektu

  1. V sadě Visual Studio vytvořte projekt aplikace založený na Systému Windows s názvem SnaplineExample.

  2. Vyberte formulář v Návrháři formulářů.

Umístěte a zarovnejte ovládací prvky

Vodicí linky poskytují přesný a intuitivní způsob zarovnání ovládacích prvků ve formuláři. Zobrazí se při přesouvání vybraného ovládacího prvku nebo ovládacích prvků poblíž pozice, která by byla zarovnaná s jiným ovládacím prvku nebo sadou ovládacích prvků. Výběr se při přesouvání přes ostatní ovládací prvky "přichytí" k navrhované pozici.

Uspořádání ovládacích prvků pomocí zachytávacích čar

  1. Přetáhněte ovládací prvek Button z panelu nástrojů do formuláře.

  2. Přesuňte ovládací prvek Button do pravého dolního rohu formuláře. Všimněte si vodítek, které se objeví, když se ovládací prvek Button přiblíží k dolnímu a pravému okraji formuláře. Tyto křivky zobrazují doporučenou vzdálenost mezi ohraničením ovládacího prvku a formulářem.

  3. Přesuňte ovládací prvek Button kolem ohraničení formuláře a všimněte si, kde se zobrazují křivky. Až budete hotovi, přesuňte ovládací prvek Button poblíž středu formuláře.

  4. Přetáhněte jiný ovládací prvek Button z panelu nástrojů do formuláře.

  5. Přesuňte druhý ovládací prvek Button, dokud nebude téměř narovnaný s prvním. Všimněte si čáry přichycení, která se zobrazí na účaří textu obou tlačítek, a také toho, že ovládací prvek, který přesouváte, se přichytí na pozici přesně vyrovnanou s druhým ovládacím prvkem.

  6. Přesuňte druhý ovládací prvek Button, dokud nebude umístěn přímo nad prvním. Všimněte si čar, které se zobrazí podél levého a pravého okraje obou tlačítek, a všimněte si, že ovládací prvek, který přesouváte, se přichytí k pozici, která je přesně zarovnaná s druhým ovládacím tlačítkem.

  7. Vyberte jeden z Button ovládacích prvků a přesuňte ho blíž k druhému, dokud se téměř nedotýkají. Všimněte si křivky, která se mezi nimi zobrazí. Tato vzdálenost je doporučená vzdálenost mezi ohraničeními ovládacích prvků. Všimněte si také, že ovládací prvek, který přesouváte, se k této pozici přichytí.

  8. Přetáhněte dva ovládací prvky Panel z panelu nástrojů do formuláře.

  9. Přesuňte jeden z ovládacích prvků Panel, dokud nebude téměř na úrovni prvního. Všimněte si čar, které se zobrazují podél horních a dolních okrajů obou ovládacích prvků, a všimněte si, že ovládací prvek, který přesouváte, se přichytí k pozici, která je přesně na úrovni druhého ovládacího prvku.

Zarovnání k okrajům formuláře a kontejneru

Vodicí linky vám pomohou s konzistentním zarovnáním ovládacích prvků na okraje formulářů a kontejnerů.

  1. Vyberte jeden z ovládacích prvků Button a přesuňte ho do pravého okraje formuláře, dokud se nezobrazí křivka. Vzdálenost přichycení od pravého okraje je součtem hodnot vlastnosti Margin ovládacího prvku a vlastnosti Padding formuláře.

    Poznámka

    Pokud je vlastnost Padding formuláře nastavená na 0,0,0,0, poskytuje Návrhář formulářů tomuto formuláři stínovanou hodnotu Padding ve formátu 9,9,9,9. Chcete-li toto chování přepsat, přiřaďte jinou hodnotu než 0,0,0,0.

  2. Změňte hodnotu vlastnosti Margin ovládacího prvku Button rozbalením položky Margin v okně Vlastnosti a nastavením vlastnosti All na hodnotu 0. Podrobnosti najdete v tématu Návod: Rozložení ovládacích prvků Windows Forms s odsazením, okraji a vlastností AutoSize.

  3. Přesuňte ovládací prvek Button blízko pravého okraje formuláře, dokud se nezobrazí čára přichycení. Tato vzdálenost je nyní uvedena hodnotou vlastnosti Padding formuláře.

  4. Přetáhněte ovládací prvek GroupBox z panelu nástrojů do formuláře.

  5. Změňte hodnotu vlastnosti Padding ovládacího prvku GroupBox rozbalením položky Padding v okně Vlastnosti a nastavením vlastnosti All na hodnotu 10.

  6. Přetáhněte ovládací prvek Button z panelu nástrojů do ovládacího prvku GroupBox.

  7. Přesuňte ovládací prvek Button blízko pravého okraje ovládacího prvku GroupBox, dokud se nezobrazí křivka. Přesuňte ovládací prvek Button v ovládacím prvku GroupBox a všimněte si, kde se nachází křivky.

Zarovnat k seskupeným ovládacím prvkům

Pro zarovnání seskupených ovládacích prvků a ovládacích prvků uvnitř ovládacího prvku GroupBox můžete použít přichycovací čáry.

  1. Vyberte dva ovládací prvky ve formuláři. Přesuňte výběr kolem a poznamenejte si křivky, které se zobrazí mezi vaším výběrem a ostatními ovládacími prvky.

  2. Přetáhněte ovládací prvek GroupBox z panelu nástrojů do formuláře.

  3. Přetáhněte ovládací prvek Button z panelu nástrojů do ovládacího prvku GroupBox.

  4. Vyberte jeden z ovládacích prvků Button a přesuňte ho kolem ovládacího prvku GroupBox. Všimněte si zachytávacích čar, které se zobrazí na okrajích ovládacího prvku GroupBox. Všimněte si také vodicích linek, které se zobrazí na okrajích ovládacího prvku Button, který je obsažen v ovládacím prvku GroupBox. Ovládací prvky, jež jsou součástí ovládacího prvku kontejneru, také podporují snaplines.

Použijte přichycovací čáry k umístění ovládacího prvku podle obrysu jeho velikosti.

  1. Vpanelu nástrojů klikněte na ikonu ovládacího prvku . Nepřetáhněte jej do formuláře.

  2. Přesuňte ukazatel myši na návrhovou plochu formuláře. Všimněte si, že ukazatel se změní na křížek s připojenou ikonou ovládacího prvku Button. Všimněte si také čar přichycení, které se zobrazují a naznačují zarovnané pozice pro ovládací prvek Button.

  3. Klikněte a podržte tlačítko myši.

  4. Přetáhněte ukazatel myši kolem formuláře. Všimněte si, že je nakreslený obrys označující pozici a velikost ovládacího prvku.

  5. Přetáhněte ukazatel, dokud se nezarovná s jiným ovládacím prvku ve formuláři. Všimněte si, že se zobrazí křivka, která označuje zarovnání.

  6. Uvolněte tlačítko myši. Ovládací prvek je vytvořen na pozici a o velikosti, které označuje obrys.

Použijte zarovnávací linky při přetahování ovládacího prvku z panelu nástrojů

  1. Přetáhněte ovládací prvek Button z panelu nástrojů do formuláře, ale neuvolněte tlačítko myši.

  2. Přesuňte ukazatel myši na návrhovou plochu formuláře. Všimněte si, že ukazatel se změní tak, aby označí pozici, ve které se vytvoří nový ovládací prvek Button.

  3. Přetáhněte ukazatel myši kolem formuláře. Všimněte si zarovnaných pozic pro ovládací prvek Button. Najděte pozici, která je zarovnaná s jinými ovládacími prvky.

  4. Uvolněte tlačítko myši. Ovládací prvek se vytvoří na pozici označené vodicími linkami.

Změna velikosti ovládacího prvku pomocí vodicích linek

  1. Přetáhněte ovládací prvek Button z panelu nástrojů do formuláře.

  2. Změňte velikost ovládacího prvku Button tak, že uchopíte jeden z rohových úchytů pro změnu velikosti a přetáhnete ho. Podrobnosti najdete v tématu Postupy: Změna velikosti ovládacích prvků ve Windows Forms.

  3. Přetáhněte úchyt pro změnu velikosti, dokud nebude ohraničení ovládacího prvku Button zarovnané s jiným ovládacím prvku. Všimněte si, že se zobrazí vodicí linka. Všimněte si také, že úchyt pro změnu velikosti se přichytí k poloze označené vodicí čárou.

  4. Změňte velikost ovládacího prvku Button v různých směrech a zarovnejte úchyt pro změnu velikosti k různým ovládacím prvkům. Všimněte si, jak se čáry přichycení zobrazují v různých orientacích, aby označily zarovnání.

Zarovnání popisku k textu ovládacího prvku

  1. Přetáhněte ovládací prvek TextBox z panelu nástrojů do formuláře. Když ovládací prvek TextBox přetáhnete do formuláře, klikněte na glyph chytré značky a vyberte možnost Nastavit text na textBox1. Podrobnosti najdete v tématu Návod: Provádění běžných úloh pomocí akcí návrháře.

  2. Přetáhněte ovládací prvek Label z panelu nástrojů do formuláře.

  3. Změňte hodnotu vlastnosti AutoSize ovládacího prvku Label na true. Všimněte si, že ohraničení ovládacího prvku se upraví tak, aby odpovídalo zobrazovaného textu.

  4. Přesuňte ovládací prvek Label vlevo od ovládacího prvku TextBox, aby byl zarovnaný s dolním okrajem ovládacího prvku TextBox. Všimněte si křivky, která se zobrazí podél dolních okrajů dvou ovládacích prvků.

  5. Přesuňte ovládací prvek Label mírně nahoru, dokud Label text a TextBox text nebudou zarovnané. Všimněte si odlišně stylizované vodící linky, která se zobrazí a označuje, kdy jsou textová pole obou ovládacích prvků zarovnaná.

Použijte vodicí linky s navigací pomocí klávesnice

  1. Přetáhněte ovládací prvek Button z panelu nástrojů do formuláře. Umístěte ho do levého horního rohu formuláře.

  2. Stiskněte ctrl+šipku dolů. Všimněte si, že ovládací prvek přesune formulář dolů na první dostupnou vodorovnou pozici zarovnání.

  3. Stiskněte Ctrl+šipku dolů, dokud ovládací prvek nedosáhne dolní části formuláře. Všimněte si pozic, které zabírá, když se přesune dolů ve formuláři.

  4. Stiskněte Ctrl+šipku doprava. Všimněte si, že ovládací prvek se přesune přes formulář na první dostupnou svislou pozici zarovnání.

  5. Stiskněte Ctrl+šipku doprava, dokud ovládací prvek nedosáhne strany formuláře. Všimněte si pozic, které zabírá při pohybu přes formulář.

  6. Přesuňte ovládací prvek kolem formuláře pomocí kombinace kláves se šipkami. Všimněte si pozic, které ovládací prvek zabírá, a vodicích linek, které je doprovázejí.

  7. Stisknutím kláves Shift+šipkových kláves změňte velikost ovládacího prvku Button o jeden pixel.

  8. Stisknutím kláves Ctrl+Shift+a šipkami změňte velikost ovladače Button na příslušné pozice.

Selektivní zakázání přichytávacích linek

  1. Přetáhněte ovládací prvek TableLayoutPanel z panelu nástrojů do formuláře.

  2. Poklikejte na ikonu ovládacího prvku Button v panelu nástrojů . Všimněte si, že v první buňce ovládacího prvku TableLayoutPanel se zobrazí nový ovládací prvek.

  3. Dvakrát rychle za sebou klikněte na ikonu ovládacího prvku Button v panelu nástrojů ještě dvakrát. Tím se v ovládacím prvku TableLayoutPanel ponechá jedna prázdná buňka.

  4. Přetáhněte ovládací prvek Button z panelu nástrojů do prázdné buňky ovládacího prvku TableLayoutPanel. Všimněte si, že se nezobrazují žádné vodicí čáry.

  5. Přetáhněte ovládací prvek Button mimo ovládací prvek TableLayoutPanel a přesuňte ho kolem ovládacího prvku TableLayoutPanel. Všimněte si, že se křivky přichycení zobrazí znovu.

Zakázat vodicí čáry

Stiskněte klávesu Alt a při přesouvání ovládacího prvku kolem formuláře.

Nezobrazují se žádné vodicí čáry a ovládací prvek se nepřichytí k žádným potenciálním polohám zarovnání.

Zakázání vykreslovacích čar v návrhovém prostředí

  1. V nabídce Nástroje otevřete dialogové okno Možnosti. Vyberte Windows Forms Designer.

  2. Vyberte uzel Obecné. V režimu rozložení změňte výběr z SnapLines na SnapToGrid.

  3. Pokud chcete nastavení použít, vyberte OK.

  4. Vyberte ovládací prvek ve formuláři a přesuňte ho kolem ostatních ovládacích prvků. Všimněte si, že se nezobrazují křivky snapline.

Další kroky

Přichycení nabízí intuitivní způsob zarovnání ovládacích prvků ve formuláři. Mezi návrhy pro další zkoumání patří:

  • Zkuste vnořit ovládací prvek GroupBox do jiného ovládacího prvku GroupBox. Umístěte ovládací prvek Button do podřízeného ovládacího prvku GroupBox a do jiného ovládacího prvku nadřazeného GroupBox. Přesuňte ovládací prvky Button a sledujte, jak vodicí čáry přecházejí přes hranice kontejnerů.

  • Vytvořte sloupec ovládacích prvků TextBox a odpovídající sloupec ovládacích prvků Label. Nastavte hodnotu vlastnosti AutoSize ovládacích prvků Label na true. Pomocí vodítek zarovnání přesuňte ovládací prvky Label tak, aby jejich zobrazený text byl zarovnaný s textem v ovládacích prvcích TextBox.

Viz také