Sdílet prostřednictvím

Postupy: Uspořádání ovládacích prvků na formuláři Windows s použitím ovládacího prvku FlowLayoutPanel

  • Článek

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ů na model 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í konců toků

  • 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> model 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. FlowLayoutPanel Přetáhněte ovládací prvek ze sady 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 umístění Button ovládacích prvků, dokud se jeden nezalomí na další řádek.

  5. Změňte hodnotu FlowLayoutPanel vlastnosti ovládacího prvku WrapContents na false. Všimněte si, že podřízené ovládací prvky už nebudou přetékat na další řádek. Místo toho se přesunou na první řádek a vystřihnou.

  6. Změňte hodnotu FlowLayoutPanel vlastnosti ovládacího prvku WrapContents na true. Všimněte si, že podřízené ovládací prvky se znovu zabalí 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.

Změna směru toku v sadě FlowLayoutPanel

  1. Změňte hodnotu FlowLayoutPanel vlastnosti 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ů. Všimněte si, že FlowLayoutPanel změna uspořádání podřízených ovládacích prvků tak, aby tok 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 FlowLayoutPanel vlastnosti ovládacího prvku FlowDirection na RightToLeft. Všimněte si, že pozice podřízených ovládacích prvků jsou obrácené. Při změně hodnoty FlowDirection vlastnosti BottomUpna .

Vkládání konců toků

Ovládací FlowLayoutPanel prvek poskytuje Vlastnost FlowBreak jeho podřízeným ovládacím prvkům. Nastavení hodnoty FlowBreak vlastnost způsobíFlowLayoutPanel, že true ovládací prvek přestane rozkládat ovládací prvky v aktuálním směru toku a zalamuje do dalšího řádku nebo sloupce.

Vložení konců toků

  1. Změňte hodnotu FlowLayoutPanel vlastnosti 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. Všimněte si, že sloupec je poškozený a ovládací prvky, které následují za vybraným Button tokem ovládacího prvku, 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í ukotvení a ukotvení

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

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

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

  2. Vyberte horní Button ovládací prvek. 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ů

Ovládací prvky v ovládacím prvku můžete také uspořádat tak, že změníte FlowLayoutPanel vlastnosti Padding a Margin vlastnosti.

Vlastnost Padding umožňuje řídit umístění ovládacích prvků v FlowLayoutPanel buňce ovládacího prvku. Určuje mezery mezi podřízenými ovládacími prvky a FlowLayoutPanel ohraničením 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í Odsazení a Okraj

  1. Změňte hodnotu FlowLayoutPanel vlastnosti 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ů model Windows Forms s odsazením, okraji a vlastností AutoSize. Všimněte si, že podřízené ovládací prvky se přesunou do středu FlowLayoutPanel ovládacího prvku. Zvýšená hodnota vlastnosti Padding posune podřízené ovládací prvky mimo FlowLayoutPanel ohraničení ovládacího prvku.

  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 ovládacího prvku tak FlowLayoutPanel , aby byl 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 Button ikonu ovládacího prvku v panelu nástrojů. Všimněte si, že se v ovládacím FlowLayoutPanel prvku zobrazí nový Button 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. V panelu nástrojů klikněte na Button 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 Button ovládacího prvku.

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

  4. Přetažením ukazatele myši nakreslete obrys Button ovládacího prvku. 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í

Ovládací prvky můžete vložit na konkrétní pozici FlowLayoutPanel ovládacího prvku. 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 přejděte 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 se umístí, když se umístí do FlowLayoutPanel ovládacího 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 kurzor přesune.

  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. V panelu nástrojů klikněte na FlowLayoutPanel ikonu ovládacího prvku. Nepřetáhněte jej do formuláře.

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

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

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

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

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

Viz také