Dela via

Genomgång: Ordna kontroller i Windows-formulär med hjälp av en FlowLayoutPanel

Vissa applikationer kräver ett formulär med en layout som anpassar sig lämpligt när formuläret ändras i storlek eller när innehållet ändrar storlek. När du behöver en dynamisk layout och inte vill hantera Layout händelser uttryckligen i koden bör du överväga att använda en layoutpanel.

Kontrollen FlowLayoutPanel och TableLayoutPanel ger intuitiva sätt att ordna kontroller i formuläret. Båda ger en automatisk, konfigurerbar möjlighet att kontrollera de relativa positionerna för underordnade kontroller som finns i dem, och båda ger dig dynamisk layoutfunktionalitet när körningen pågår, så att de kan ändra storlek på, samt flytta, underordnade kontroller när dimensionerna för det överordnade formuläret ändras. Layoutpaneler kan kapslas i layoutpaneler för att möjliggöra förverkligande av avancerade användargränssnitt.

TableLayoutPanel ordnar innehållet i ett rutnät och tillhandahåller funktioner som liknar HTML-<tabell> element. Dess celler är ordnade i rader och kolumner, och dessa kan ha olika storlekar. Mer information finns i Genomgång: Ordna kontroller i Windows Forms genom att använda en TableLayoutPanel.

FlowLayoutPanel ordnar innehållet i en specifik flödesriktning: vågrät eller lodrät. Innehållet kan omslutas från en rad till en annan, eller från en kolumn till en annan. Alternativt kan innehållet beskäras i stället för att omslutas. Uppgifter som illustreras i den här genomgången är:

  • Skapa ett Windows Forms-projekt

  • Ordna kontroller vågrätt och lodrätt

  • Ändra flödesriktning

  • Infoga flödesbrytningar

  • Ordna kontroller med utfyllnad och marginaler

  • Infoga kontroller genom att dubbelklicka på dem i verktygslådan

  • Infoga en kontroll genom att rita dess kontur

  • Infoga kontroller med hjälp av caret

  • Överlåta befintliga kontroller till en annan förälder

När du är klar har du en förståelse för vilken roll dessa viktiga layoutfunktioner spelar.

Skapa projektet

  1. I Visual Studio skapar du ett Windows-baserat programprojekt med namnet "FlowLayoutPanelExample" (File>New>Project>Visual C# eller Visual Basic>Classic Desktop>Windows Forms Application).

  2. Välj formuläret i Forms Designer.

Ordna kontroller vågrätt och lodrätt

Med FlowLayoutPanel-kontrollen kan du placera kontroller längs rader eller kolumner utan att du behöver exakt ange positionen för varje enskild kontroll.

Kontrollen FlowLayoutPanel kan ändra storlek på eller anpassa om sina underordnade kontroller när dimensionerna på det överordnade formuläret ändras.

Ordna kontroller vågrätt och lodrätt med hjälp av en FlowLayoutPanel

  1. Dra ett FlowLayoutPanel-kontrollelement från -verktygslådan till ditt formulär.

  2. Dra en Button-kontroll från verktygslådan till FlowLayoutPanel. Observera att den automatiskt flyttas till det övre vänstra hörnet i FlowLayoutPanel-kontrollen.

  3. Dra en annan Button-kontroll från -verktygslådan till FlowLayoutPanel. Observera att kontrollen Button flyttas automatiskt till en position bredvid den första Button kontrollen. Om din FlowLayoutPanel är för smal för att passa de två kontrollerna på samma rad flyttas den nya Button kontrollen automatiskt till nästa rad.

  4. Dra ytterligare flera Button kontroller från Toolbox- till FlowLayoutPanel. Fortsätt att placera Button kontroller tills en rad flyttas till nästa rad.

  5. Ändra värdet för FlowLayoutPanel-kontrollens egenskap WrapContents till false. Observera att de underordnade kontrollerna inte längre överförs till nästa rad. I stället flyttas de till den första raden och klipps bort.

  6. Ändra värdet för FlowLayoutPanel-kontrollens egenskap WrapContents till true. Observera att de underordnade kontrollerna återigen omsluts till nästa rad.

  7. Minska bredden på den FlowLayoutPanel kontrollen tills alla Button kontroller flyttas till den första kolumnen.

  8. Öka bredden på FlowLayoutPanel kontroll tills alla Button kontroller flyttas till den första raden. Du kan behöva ändra storlek på formuläret för att få en större bredd.

Ändra flödesriktning

Med egenskapen FlowDirection kan du ändra i vilken riktning kontrollerna ska ordnas. Du kan ordna underordnade kontroller från vänster till höger, från höger till vänster, uppifrån och ned eller från nederkant till överkant.

Ändra flödesriktningen i en FlowLayoutPanel

  1. Ändra värdet för FlowLayoutPanel-kontrollens egenskap FlowDirection till TopDown. Observera att de underordnade kontrollerna ordnas om till en eller flera kolumner, beroende på kontrollens höjd.

  2. Ändra storlek på FlowLayoutPanel så att dess höjd är kortare än kolumnen i Button kontroller. Observera att FlowLayoutPanel placerar om barnkontrollerna så att de flödar in i nästa kolumn. Fortsätt att minska höjden och observera att barnkontrollerna flyttas till efterföljande kolumner. Ändra värdet för FlowLayoutPanel-kontrollens egenskap FlowDirection till RightToLeft. Observera att positionerna för barnkontrollerna är omvända. Observera layouten när du ändrar värdet för egenskapen FlowDirection till BottomUp.

Infoga flödesbrytningar

Kontrollen FlowLayoutPanel tillhandahåller en FlowBreak-egenskap till dess underordnade kontroller. Om egenskapen FlowBreak anges till värdet true, kommer FlowLayoutPanel-kontrollen att sluta lägga ut kontroller i den aktuella flödesriktningen och istället gå över till nästa rad eller kolumn.

Infoga flödesbrytningar

  1. Ändra värdet för FlowLayoutPanel-kontrollens egenskap FlowDirection till TopDown.

  2. Välj en av de Button kontrollerna i mitten av kolumnen längst till vänster.

  3. Ange värdet för Button-kontrollens FlowBreak-egenskap till true. Observera att kolumnen är avbruten och att kontrollerna som följer det valda Button-kontrollflödet går över till nästa kolumn. Ange värdet för Button-kontrollens FlowBreak-egenskap till false för att återgå till det ursprungliga beteendet.

Positioneringskontroller med dockning och förankring

Docknings- och förankringsbeteenden för underordnade kontroller skiljer sig från beteendet i andra containerkontroller. Både dockning och förankring är relativa till den största kontrollen i flödesriktningen.

Att placera kontroller genom att använda dockning och förankring

  1. Öka storleken på FlowLayoutPanel tills alla Button kontroller är ordnade i en kolumn.

  2. Välj den översta, Button kontrollen. Öka bredden så att den är ungefär dubbelt så bred som de andra Button kontroller.

  3. Välj den andra Button kontrollen. Ändra värdet för egenskapen Anchor till Right. Notera att den flyttas så att dess högra kant är i linje med den första Button-kontrollens högra kant.

  4. Ändra värdet för egenskapen Anchor till Right och Left. Observera att den har samma bredd som den första Button kontrollen.

  5. Välj den tredje Button kontrollen. Ändra värdet för egenskapen Dock till Fill. Observera att den har samma bredd som den första Button kontrollen.

Ordna kontroller med utfyllnad och marginaler

Du kan också ordna kontroller i din FlowLayoutPanel-kontroll genom att ändra egenskaperna Padding och Margin.

Med egenskapen Padding kan du styra placeringen av kontroller i en FlowLayoutPanel kontrolls cell. Den anger avståndet mellan de underordnade kontrollerna och kantlinjen för FlowLayoutPanel-kontrollen.

Med egenskapen Margin kan du styra avståndet mellan kontrollerna.

Ordna kontroller med hjälp av utfyllnads- och marginalegenskaperna

  1. Ändra värdet för FlowLayoutPanel-kontrollens egenskap Dock till Fill. Om formuläret är tillräckligt stort flyttas kontrollerna i Button till första kolumnen i kontrollen för FlowLayoutPanel.

  2. Ändra värdet för FlowLayoutPanel-kontrollens Padding-egenskap genom att expandera posten Padding i fönstret Egenskaper och ange egenskapen All till 20. För mer information, se Genomgång: Placera ut Windows Forms-kontroller med mellanrum, marginaler och egenskapen AutoSize. Observera att de underordnade kontrollerna flyttas mot mitten av kontrollen FlowLayoutPanel. Det ökade värdet för egenskapen Padding gör att de underordnade elementen flyttas bort från kantlinjerna för kontrollen FlowLayoutPanel.

  3. Välj alla Button kontroller i FlowLayoutPanel och ange värdet för egenskapen Margin till 20. Observera att avståndet mellan de Button kontrollerna ökar, så att de flyttas längre ifrån varandra. Du kan behöva ändra storlek på FlowLayoutPanel-kontrollen för att förstora den och se alla underkontroller.

Infoga kontroller genom att dubbelklicka på dem i verktygslådan

Du kan fylla på din FlowLayoutPanel-kontroll genom att dubbelklicka på kontrollerna i Verktygslåda.

Infoga kontroller genom att dubbelklicka i verktygslådan

  1. Dubbelklicka på Button-kontrollikonen i Toolbox-. Observera att ett nytt Button-kontrollelement visas i FlowLayoutPanel-kontrollen.

  2. Dubbelklicka på fler kontroller i Toolbox-. Observera att de nya kontrollerna visas successivt i den FlowLayoutPanel kontrollen.

Infoga en kontroll genom att rita dess kontur

Du kan infoga en kontroll i en FlowLayoutPanel-kontroll och ange dess storlek genom att rita dess kontur i en cell.

Infoga en kontroll genom att rita dess kontur

  1. I Toolboxklickar du på kontrollikonen Button. Dra den inte till formuläret.

  2. Flytta muspekaren över FlowLayoutPanel kontrollen. Observera att pekaren ändras till ett hårkors och har ikonen Button för kontroll kopplad.

  3. Klicka och håll musknappen.

  4. Dra muspekaren för att rita konturen av Button kontrollen. När du är nöjd med storleken släpper du musknappen. Observera att Button-kontrollen skapas på nästa öppna plats för FlowLayoutPanel-kontrollen.

Infoga kontroller med hjälp av infogningsfältet

Du kan infoga kontroller på en viss position i en FlowLayoutPanel kontroll. När du drar en kontroll till FlowLayoutPanel-kontrollens klientområde visas ett infogningsfält som anger var kontrollen ska infogas.

Så här infogar du en kontroll med hjälp av markören

  1. Dra en Button-kontroll från Toolbox- till kontrollen FlowLayoutPanel och peka på utrymmet mellan två Button kontroller. Observera att ett infogningsfält ritas, vilket anger var Button placeras när den släpps i FlowLayoutPanel-kontrollen. Innan du släpper den nya Button-kontrollen i FlowLayoutPanel-kontrollen flyttar du muspekaren runt för att se hur infogningsfältet rör sig.

  2. Släpp det nya Button-kontrollelementet i FlowLayoutPanel-kontrollelementet. Observera att den nya Button kontrollen inte är i linje med de andra, eftersom dess Margin egenskap har ett annat värde.

Överlåta befintliga kontroller till en annan förälder

Du kan tilldela kontroller som finns i formuläret till en ny FlowLayoutPanel kontroll.

Så här återställer du befintliga kontroller

  1. Dra tre Button kontroller från Toolbox- till formuläret. Placera dem nära varandra, men lämna dem ojusterade.

  2. I Toolboxklickar du på kontrollikonen FlowLayoutPanel. Dra den inte till formuläret.

  3. Flytta muspekaren nära de tre Button kontrollerna. Observera att pekaren ändras till ett hårkors och har ikonen FlowLayoutPanel för kontroll kopplad.

  4. Klicka och håll musknappen.

  5. Dra muspekaren för att rita konturen av FlowLayoutPanel kontrollen. Rita konturen runt de tre Button kontrollerna.

  6. Släpp musknappen. Observera att de tre Button kontrollerna infogas i FlowLayoutPanel-kontrollen.

Nästa steg

Du kan uppnå en komplex layout med hjälp av en kombination av layoutpaneler och kontroller. Förslag på mer utforskning är:

  • Ändra storlek på en av de Button kontrollerna till en större storlek och notera effekten på layouten.

  • Layout-paneler kan innehålla andra layout-paneler. Experimentera med att integrera en TableLayoutPanel kontrollenhet i den befintliga kontrollenheten.

  • Docka kontrollen FlowLayoutPanel till det överordnade formuläret. Ändra storlek på formuläret och notera effekten på layouten.

  • Ange egenskapen Visible för en av kontrollerna till false och notera hur FlowLayoutPanel flödar om som svar.

Se även