Sdílet prostřednictvím

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

Některé aplikace vyžadují formulář s rozložením, které se správně uspořádá, protože formulář se změní nebo se změní velikost obsahu. Pokud potřebujete dynamické rozložení a nechcete zpracovávat Layout události explicitně v kódu, zvažte použití panelu rozložení.

Ovládací FlowLayoutPanel prvek a TableLayoutPanel ovládací prvek poskytují intuitivní způsoby uspořádání ovládacích prvků ve formuláři. Oba poskytují automatickou konfigurovatelnou možnost řídit relativní pozice podřízených ovládacích prvků obsažených v nich, a oba poskytují dynamické funkce rozložení za běhu, aby mohly měnit velikost a umístění podřízených ovládacích prvků při změně dimenzí nadřazeného formuláře. Panely rozložení lze vnořit do panelů rozložení, aby bylo možné realizovat sofistikovaná uživatelská rozhraní.

Uspořádá TableLayoutPanel jeho obsah do mřížky a poskytuje funkce podobné elementu tabulky< HTML>. Buňky jsou uspořádány v řádcích a sloupcích a můžou mít různé velikosti. Další informace naleznete v tématu Návod: Uspořádání ovládacích prvků v aplikacích Windows Forms pomocí TableLayoutPanel.

Uspořádá FlowLayoutPanel jeho obsah v určitém směru toku: vodorovně nebo svisle. Jeho obsah lze zabalit z jednoho řádku na další nebo z jednoho sloupce na další. Případně můžete jeho obsah vystřihot místo zabalení. Mezi úlohy znázorněné v tomto názorném postupu patří:

  • Vytvoření projektu model Windows Forms

  • Uspořádání ovládacích prvků vodorovně a svisle

  • Změna směru toku

  • Vkládání přerušení toku

  • Uspořádání ovládacích prvků pomocí odsazení a okrajů

  • Vložení ovládacích prvků poklikáním na ně v sadě nástrojů

  • Vložení ovládacího prvku výkresem jeho obrysu

  • Vkládání ovládacích prvků pomocí kurzoru

  • Změna přiřazení existujících ovládacích prvků k jinému nadřazení

Až budete hotovi, budete mít přehled o roli, kterou hrají tyto důležité funkce rozložení.

Vytvoření projektu

  1. V sadě Visual Studio vytvořte projekt aplikace založený na Windows s názvem FlowLayoutPanelExample (File>New>Project>Visual C# nebo Visual Basic>Classic Desktop Windows>Forms Application).

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

Uspořádání ovládacích prvků vodorovně a svisle

Ovládací FlowLayoutPanel prvek umožňuje umístit ovládací prvky podél řádků nebo sloupců, aniž byste museli přesně určit pozici jednotlivých ovládacích prvků.

Ovládací FlowLayoutPanel prvek může změnit velikost nebo přeformátovat podřízené ovládací prvky při změně dimenzí nadřazeného formuláře.

Uspořádání ovládacích prvků vodorovně a svisle pomocí flowLayoutPanel

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

  2. Button Přetáhněte ovládací prvek ze sady nástrojů do objektu FlowLayoutPanel. Všimněte si, že se automaticky přesune do levého horního FlowLayoutPanel rohu ovládacího prvku.

  3. Přetáhněte jiný Button ovládací prvek ze sady nástrojů do objektu FlowLayoutPanel. Všimněte si, že ovládací Button prvek se automaticky přesune na pozici vedle prvního Button ovládacího prvku. Pokud je příliš FlowLayoutPanel úzký, aby se dva ovládací prvky vešly na stejný řádek, nový Button ovládací prvek se automaticky přesune na další řádek.

  4. Přetáhněte několik dalších Button ovládacích prvků ze sady nástrojů do objektu FlowLayoutPanel. Pokračujte v umisťování ovládacích prvků Button, dokud jeden nepřejde na následující řádek.

  5. Změňte hodnotu vlastnosti FlowLayoutPanel ovládacího prvku WrapContents na false. Všimněte si, že podřízené ovládací prvky už nepřecházejí na další řádek. Místo toho se přesunou na první řadu a oříznou.

  6. Změňte hodnotu vlastnosti FlowLayoutPanel ovládacího prvku WrapContents na true. Všimněte si, že podřízené ovládací prvky znovu přejdou na další řádek.

  7. Zmenší šířku FlowLayoutPanel ovládacího prvku, dokud se všechny Button ovládací prvky nepřesunou do prvního sloupce.

  8. Zvětšete šířku FlowLayoutPanel ovládacího prvku, dokud se všechny Button ovládací prvky nepřesunou na první řádek. Možná budete muset změnit velikost formuláře tak, aby vyhovoval větší šířce.

Změna směru toku

Vlastnost FlowDirection umožňuje změnit směr uspořádání ovládacích prvků. Podřízené ovládací prvky můžete uspořádat zleva doprava, zprava doleva, shora dolů nebo shora nahoru.

Jak změnit směr toku v komponentě FlowLayoutPanel

  1. Změňte hodnotu vlastnosti FlowLayoutPanel ovládacího prvku FlowDirection na TopDown. Všimněte si, že podřízené ovládací prvky se přeuspořádají do jednoho nebo více sloupců v závislosti na výšce ovládacího prvku.

  2. FlowLayoutPanel Změňte velikost tak, aby jeho výška byla kratší než sloupec ovládacích Button prvků. Pamatujte, že FlowLayoutPanel přeuspořádává podřízené ovládací prvky, aby plynule pokračovaly do dalšího sloupce. Pokračujte ve snížení výšky a všimněte si, že podřízené ovládací prvky přetékají do po sobě jdoucích sloupců. Změňte hodnotu vlastnosti FlowLayoutPanel ovládacího prvku FlowDirection na RightToLeft. Všimněte si, že umístění podřízených ovládacích prvků jsou obrácená. Dávejte pozor na rozložení, když změníte hodnotu vlastnosti FlowDirection na BottomUp.

Vkládání přerušení toku

Ovládací FlowLayoutPanel prvek poskytuje Vlastnost FlowBreak jeho podřízeným ovládacím prvkům. Nastavení hodnoty vlastnosti FlowBreak na true způsobí, že ovládací prvek FlowLayoutPanel zastaví rozložení ovládacích prvků v aktuálním směru toku a zabalí do dalšího řádku nebo sloupce.

Pro vložení přerušení toku

  1. Změňte hodnotu vlastnosti FlowLayoutPanel ovládacího prvku FlowDirection na TopDown.

  2. Vyberte jeden z ovládacích Button prvků uprostřed levého sloupce.

  3. Nastavte hodnotu Button vlastnosti FlowBreak ovládacího prvku na true. Upozorňujeme, že sloupec je rozbitý a ovládací prvky, které následují po vybraném Button ovládacím prvku, se přesouvají do dalšího sloupce. Nastavte hodnotu Button vlastnosti FlowBreak ovládacího prvku tak, aby false se vrátila k původnímu chování.

Umístění ovládacích prvků pomocí doku a ukotvení

Chování dokování a ukotvení podřízených ovládacích prvků se liší od chování v jiných kontejnerových ovládacích prvcích. Ukotvení i připojení jsou relativní vzhledem k největšímu ovládacímu prvku ve směru toku.

Umístění ovládacích prvků pomocí ukotvení a zarovnání

  1. Zvětšete velikost FlowLayoutPanel, dokud nebudou všechny ovládací prvky Button uspořádány ve sloupci.

  2. Vyberte ovládací prvek nahoře Button. Zvětšete jeho šířku tak, aby byla přibližně dvakrát širší než ostatní Button ovládací prvky.

  3. Vyberte druhý Button ovládací prvek. Změňte hodnotu jeho Anchor vlastnosti na Right. Všimněte si, že se přesune tak, aby jeho pravé ohraničení odpovídalo pravému ohraničení prvního Button ovládacího prvku.

  4. Změňte hodnotu jeho Anchor vlastnosti na Right a Left. Všimněte si, že má velikost stejné šířky jako první Button ovládací prvek.

  5. Vyberte třetí Button ovládací prvek. Změňte hodnotu jeho Dock vlastnosti na Fill. Všimněte si, že má velikost stejné šířky jako první Button ovládací prvek.

Uspořádání ovládacích prvků pomocí odsazení a okrajů

Můžete také uspořádat ovládací prvky v rámci ovládacího prvku změnou vlastností FlowLayoutPanel a Padding.

Vlastnost Padding umožňuje řídit umístění ovládacích prvků v FlowLayoutPanel buňce ovládacího prvku. Určuje rozestupy mezi dětskými ovládacími prvky a FlowLayoutPanel okrajem ovládacího prvku.

Tato Margin vlastnost umožňuje řídit mezery mezi ovládacími prvky.

Uspořádání ovládacích prvků pomocí vlastností Okraje a Margin

  1. Změňte hodnotu vlastnosti FlowLayoutPanel ovládacího prvku Dock na Fill. Pokud je formulář dostatečně velký, Button ovládací prvky se přesunou do prvního sloupce FlowLayoutPanel ovládacího prvku.

  2. Změňte hodnotu FlowLayoutPanel vlastnosti ovládacího prvku Padding rozbalením Padding položky v okně Vlastnosti a nastavením All vlastnosti na hodnotu 20. Další informace naleznete v tématu Návod: Rozložení ovládacích prvků Windows Forms pomocí odsazení, okrajů a vlastnosti AutoSize. Upozorňujeme, že podřízené ovládací prvky jsou přesunuty směrem ke středu hlavního ovládacího prvku FlowLayoutPanel. Zvýšená hodnota vlastnosti Padding posune podřízené ovládací prvky dále od okrajů ovládacího prvku FlowLayoutPanel.

  3. Vyberte všechny Button ovládací prvky v FlowLayoutPanel a nastavte hodnotu Margin vlastnosti na 20. Všimněte si, že mezery mezi Button ovládacími prvky se zvětšují, takže se posunou dále od sebe. Možná budete muset změnit velikost FlowLayoutPanel ovládacího prvku na větší, aby se zobrazily všechny podřízené ovládací prvky.

Vložení ovládacích prvků poklikáním na ně v sadě nástrojů

Ovládací prvek můžete naplnit FlowLayoutPanel poklikáním na ovládací prvky v sadě nástrojů.

Vložení ovládacích prvků poklikáním na panel nástrojů

  1. Poklikejte na ikonu ovládacího prvku Button v panelu nástrojů . Všimněte si, že se v ovládacím Button prvku zobrazí nový FlowLayoutPanel ovládací prvek.

  2. Poklikejte na několik dalších ovládacích prvků na panelu nástrojů. Všimněte si, že nové ovládací prvky se v ovládacím FlowLayoutPanel prvku zobrazují postupně.

Vložení ovládacího prvku výkresem jeho obrysu

Ovládací prvek můžete vložit do FlowLayoutPanel ovládacího prvku a určit jeho velikost vykreslením obrysu v buňce.

Vložení ovládacího prvku nakreslením jeho obrysu

  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 FlowLayoutPanel ovládací prvek. Všimněte si, že ukazatel se změní na křížek s připojenou ikonou ovládacího prvku Button.

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

  4. Přetažením ukazatele myši nakreslete obrys ovládacího prvku Button. Až budete s velikostí spokojeni, uvolněte tlačítko myši. Všimněte si, že ovládací Button prvek se vytvoří v dalším otevřeném umístění FlowLayoutPanel ovládacího prvku.

Vkládání ovládacích prvků pomocí panelu vložení

Do ovládacího prvku FlowLayoutPanel můžete vložit ovládací prvky na konkrétní pozici. Když ovládací prvek přetáhnete do FlowLayoutPanel klientské oblasti ovládacího prvku, zobrazí se panel vložení označující, kam bude ovládací prvek vložen.

Vložení ovládacího prvku pomocí kurzoru

  1. Button Přetáhněte ovládací prvek ze sady nástrojů do FlowLayoutPanel ovládacího prvku a nasměrujte na mezeru mezi dvěma Button ovládacími prvky. Všimněte si, že je nakreslený pruh vložení, který označuje, kam Button bude umístěn, když bude vložen v FlowLayoutPanel ovládacím prvku. Před přetažením nového Button ovládacího prvku do FlowLayoutPanel ovládacího prvku pohybujte ukazatelem myši, abyste viděli, jak se přesouvá čárka vložení.

  2. Přetáhněte nový Button ovládací prvek do FlowLayoutPanel ovládacího prvku. Všimněte si, že nový Button ovládací prvek není v souladu s ostatními, protože jeho Margin vlastnost má jinou hodnotu.

Změna přiřazení existujících ovládacích prvků k jinému nadřazení

Ovládací prvky, které existují ve formuláři, můžete přiřadit novému FlowLayoutPanel ovládacímu prvku.

Opětovné zobrazení existujících ovládacích prvků

  1. Přetáhněte tři Button ovládací prvky ze sady nástrojů do formuláře. Umístěte je blízko sebe, ale nechte je nezarovnané.

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

  3. Přesuňte ukazatel myši blízko tří ovládacích prvků Button. Všimněte si, že ukazatel se změní na křížek s připojenou ikonou ovládacího prvku FlowLayoutPanel.

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

  5. Přetažením ukazatele myši nakreslete obrys ovládacího prvku FlowLayoutPanel. Nakreslete obrys kolem tří ovládacích prvků Button.

  6. Uvolněte tlačítko myši. Všimněte si, že tři Button ovládací prvky jsou vloženy do FlowLayoutPanel ovládacího prvku.

Další kroky

Složité rozložení můžete dosáhnout pomocí kombinace panelů rozložení a ovládacích prvků. Mezi návrhy pro další zkoumání patří:

  • Změňte velikost jednoho z ovládacích Button prvků na větší velikost a všimněte si efektu rozložení.

  • Panely rozložení můžou obsahovat další panely rozložení. Experimentujte s vyřazením TableLayoutPanel ovládacího prvku do existujícího ovládacího prvku.

  • Ukotvit FlowLayoutPanel ovládací prvek do nadřazeného formuláře. Změňte velikost formuláře a všimněte si efektu rozložení.

  • Nastavte vlastnost jednoho z ovládacích prvků na Visible a všimněte si, jak se false přeformátuje v reakci.

Viz také

  • Last updated on