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 TableLayoutPanel

  • Č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á 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í. Další informace naleznete v tématu Návod: Uspořádání ovládacích prvků na model Windows Forms pomocí FlowLayoutPanel.

Uspořádá TableLayoutPanel jeho obsah do mřížky a poskytuje funkce podobné elementu tabulky> HTML<. Ovládací TableLayoutPanel prvek umožňuje umístit ovládací prvky do rozložení mřížky, aniž byste museli přesně určit pozici jednotlivých ovládacích prvků. Buňky jsou uspořádány v řádcích a sloupcích a můžou mít různé velikosti. Buňky lze sloučit mezi řádky a sloupci. Buňky můžou obsahovat cokoli, co formulář může obsahovat, a chovat se ve většině ostatních ohledech jako kontejnery.

Ovládací TableLayoutPanel prvek také poskytuje proporcionální schopnost změny velikosti za běhu, takže rozložení se může bez problémů měnit při změně velikosti formuláře. Díky tomu je TableLayoutPanel ovládací prvek vhodný pro účely, jako jsou formuláře pro zadávání dat a lokalizované aplikace. Další informace naleznete v tématu Návod: Vytvoření formuláře Windows Form pro změnu velikosti pro zadávání dat a návod: Vytvoření lokalizovatelného formuláře Systému Windows.

Obecně byste neměli používat TableLayoutPanel ovládací prvek jako kontejner pro celé rozložení. Pomocí TableLayoutPanel ovládacích prvků můžete poskytnout proporcionální možnosti změny velikosti pro části rozložení.

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ů v řádcích a sloupcích

  • Nastavení vlastností řádků a sloupců

  • Prolétnutí řádků a sloupců pomocí ovládacího prvku

  • Automatické zpracování přetečení

  • 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

  • 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

Prvním krokem je vytvoření projektu a nastavení formuláře.

Vytvoření projektu

  1. Vytvořte projekt aplikace pro Windows s názvem TableLayoutPanelExample. Další informace naleznete v tématu Postupy: Vytvoření projektu aplikace model Windows Forms .

  2. Vyberte formulář v nástroji WindowsForms Designer.

Uspořádání ovládacích prvků v řádcích a sloupcích

Ovládací TableLayoutPanel prvek umožňuje snadno uspořádat ovládací prvky do řádků a sloupců.

Uspořádání ovládacích prvků v řádcích a sloupcích pomocí prvku TableLayoutPanel

  1. TableLayoutPanel Přetáhněte ovládací prvek ze sady nástrojů do formuláře. Všimněte si, že ve výchozím nastavení TableLayoutPanel má ovládací prvek čtyři buňky.

  2. Button Přetáhněte ovládací prvek ze sady nástrojů do TableLayoutPanel ovládacího prvku a přetáhněte ho do jedné z buněk. Všimněte si, že ovládací Button prvek se vytvoří v buňce, kterou jste vybrali.

  3. Přetáhněte tři další Button ovládací prvky ze sady nástrojů do TableLayoutPanel ovládacího prvku, aby každá buňka obsahovala tlačítko.

  4. Uchopte svislý úchyt pro změnu velikosti mezi těmito dvěma sloupci a přesuňte ho doleva. Všimněte si, že Button se změní velikost ovládacích prvků v prvním sloupci na menší šířku, zatímco velikost ovládacích Button prvků ve druhém sloupci se nezmění.

  5. Uchopte svislý úchyt pro změnu velikosti mezi těmito dvěma sloupci a přesuňte ho doprava. Všimněte si, že Button ovládací prvky v prvním sloupci se vrátí k původní velikosti, zatímco Button ovládací prvky ve druhém sloupci se přesunou doprava.

  6. Přesunutím vodorovného úchytu pro změnu velikosti nahoru a dolů zobrazíte efekt ovládacích prvků na panelu.

Umístění ovládacích prvků v buňkách pomocí ukotvení a ukotvení

Chování ukotvení podřízených ovládacích prvků se TableLayoutPanel liší od chování v jiných ovládacích prvcích kontejneru. Chování ukotvení podřízených ovládacích prvků je stejné jako ostatní ovládací prvky kontejneru.

Umístění ovládacích prvků v buňkách

  1. Vyberte první Button ovládací prvek. Změňte hodnotu jeho Dock vlastnosti na Fill. Všimněte si, že ovládací Button prvek se rozbalí a vyplní její buňku.

  2. Vyberte jeden z ostatních Button ovládacích prvků. Změňte hodnotu jeho Anchor vlastnosti na Right. Všimněte si, že se přesune tak, aby jeho pravé ohraničení bylo blízko pravého okraje buňky. Vzdálenost mezi ohraničením je součet Button vlastnosti ovládacího prvku Margin a vlastnosti panelu Padding .

  3. Změňte hodnotu Button vlastnosti ovládacího prvku Anchor na Right a Left. Všimněte si, že ovládací prvek má velikost na šířku buňky s ohledem na Margin hodnoty a Padding hodnoty.

  4. Opakujte kroky 2 a 3 se styly Top a Bottom styly.

Nastavení vlastností řádků a sloupců

Jednotlivé vlastnosti řádků a sloupců můžete nastavit pomocí RowStyles a ColumnStyles kolekcí.

Nastavení vlastností řádků a sloupců

  1. TableLayoutPanel Vyberte ovládací prvek v návrháři model Windows Forms.

  2. V oknech Vlastnosti otevřete kolekci kliknutím na tlačítko se třemi tečkou (The Ellipsis button (...) in the Properties window of Visual Studio.) vedle položky Sloupce.ColumnStyles

  3. Vyberte první sloupec a změňte hodnotu jeho SizeType vlastnosti na AutoSize. Kliknutím na TLAČÍTKO OK změnu přijměte. Všimněte si, že šířka prvního sloupce se zmenší tak, aby odpovídala ovládacímu Button prvku. Všimněte si také, že šířka sloupce se nedá měnit.

  4. V okně Vlastnosti otevřete kolekci ColumnStyles a vyberte první sloupec. Změňte hodnotu jeho SizeType vlastnosti na Percent. Kliknutím na TLAČÍTKO OK změnu přijměte. TableLayoutPanel Změňte velikost ovládacího prvku na větší šířku a všimněte si, že šířka prvního sloupce se rozbalí. TableLayoutPanel Změňte velikost ovládacího prvku na menší šířku a všimněte si, že tlačítka v prvním sloupci mají velikost odpovídající buňce. Všimněte si také, že šířka sloupce se dá měnit.

  5. V okně Vlastnosti otevřete kolekci ColumnStyles a vyberte všechny uvedené sloupce. Nastavte hodnotu každé SizeType vlastnosti na Percenthodnotu . Kliknutím na TLAČÍTKO OK změnu přijměte. Opakujte s kolekcí RowStyles .

  6. Uchopte jeden z rohových úchytů pro změnu velikosti a změňte šířku i výšku TableLayoutPanel ovládacího prvku. Všimněte si, že při změně velikosti ovládacího prvku se změní TableLayoutPanel velikost řádků a sloupců. Všimněte si také, že řádky a sloupce se dají měnit velikostí pomocí vodorovných a svislých úchytů pro změnu velikosti.

Prolétnutí řádků a sloupců pomocí ovládacího prvku

Ovládací TableLayoutPanel prvek přidá do ovládacích prvků v době návrhu několik nových vlastností. Dvě z těchto vlastností jsou RowSpan a ColumnSpan. Pomocí těchto vlastností můžete nastavit rozsah ovládacího prvku na více než jeden řádek nebo sloupec.

Rozsah řádků a sloupců pomocí ovládacího prvku

  1. Button Vyberte ovládací prvek v prvním řádku a prvním sloupci.

  2. V oknech Vlastnosti změňte hodnotu ColumnSpan vlastnosti na 2. Všimněte si, že Button ovládací prvek vyplní první sloupec a druhý sloupec. Všimněte si také, že než byl přidán další řádek, aby se tato změna přizpůsobila.

  3. Opakujte krok 2 pro RowSpan vlastnost.

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

Ovládací prvek můžete naplnit TableLayoutPanel 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. TableLayoutPanel Přetáhněte ovládací prvek ze sady nástrojů do formuláře.

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

  3. Poklikejte na několik dalších ovládacích prvků na panelu nástrojů. Všimněte si, že nové ovládací prvky se postupně zobrazují v TableLayoutPanel neokupených buňkách ovládacího prvku. Všimněte si také, že ovládací prvek se rozbalí tak, TableLayoutPanel aby vyhovoval novým ovládacím prvkům, pokud nejsou k dispozici žádné otevřené buňky.

Automatické zpracování přetečení

Při vkládání ovládacích prvků do TableLayoutPanel ovládacího prvku může do nového ovládacího prvku dojít z prázdných buněk. Ovládací TableLayoutPanel prvek tuto situaci zpracuje automaticky zvýšením počtu buněk.

Sledování automatického zpracování přetečení

  1. Pokud jsou v ovládacím TableLayoutPanel prvku stále prázdné buňky, pokračujte vkládáním nových Button ovládacích prvků, dokud TableLayoutPanel nebude ovládací prvek plný.

  2. TableLayoutPanel Jakmile je ovládací prvek plný, poklikejte na Button ikonu v sadě nástrojů a vložte další Button ovládací prvek. Všimněte si, že TableLayoutPanel ovládací prvek vytvoří nové buňky pro přizpůsobení nového ovládacího prvku. Vložte několik dalších ovládacích prvků a sledujte chování změny velikosti.

  3. Změňte hodnotu TableLayoutPanel vlastnosti ovládacího prvku GrowStyle na FixedSize. Poklikejte na Button ikonu v panelu nástrojů a vložte Button ovládací prvky, dokud TableLayoutPanel nebude ovládací prvek plný. Poklikejte znovu na Button ikonu v sadě nástrojů . Všimněte si, že se v návrháři model Windows Forms zobrazí chybová zpráva s informací, že nelze vytvořit další řádky a sloupce.

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

Ovládací prvek můžete vložit do TableLayoutPanel 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. TableLayoutPanel Přetáhněte ovládací prvek ze sady nástrojů do formuláře.

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

  3. Přesuňte ukazatel myši na TableLayoutPanel ovládací prvek. Všimněte si, že ukazatel se změní na křížek s připojenou ikonou Button ovládacího prvku.

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

  5. 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 buňce, ve které jste nakreslili obrys ovládacího prvku.

Více ovládacích prvků v buňkách není povoleno

Ovládací TableLayoutPanel prvek může obsahovat pouze jeden podřízený ovládací prvek na buňku.

Předvedení, že více ovládacích prvků v buňkách není povoleno

  • Button Přetáhněte ovládací prvek ze sady nástrojů do TableLayoutPanel ovládacího prvku a přetáhněte ho do jedné z obsazených buněk. Všimněte si, že TableLayoutPanel ovládací prvek neumožňuje umístit Button ovládací prvek do obsazené buňky.

Prohození ovládacích prvků

Ovládací TableLayoutPanel prvek umožňuje prohodit ovládací prvky, které zabírají dvě různé buňky.

Prohození ovládacích prvků

  • Přetáhněte jeden z ovládacích Button prvků z obsazené buňky a přetáhněte je do jiné obsazené buňky. Všimněte si, že tyto dva ovládací prvky se přesunou z jedné buňky do druhé.

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ří:

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

  • Vložte do ovládacího prvku výběr více ovládacích prvků TableLayoutPanel a všimněte si, jak se ovládací prvky vloží.

  • 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 TableLayoutPanel ovládací prvek do nadřazeného formuláře. Změňte velikost formuláře a všimněte si efektu rozložení.

Viz také