Cómo: Delimitar y acoplar controles secundarios en un control FlowLayoutPanel

El control FlowLayoutPanel admite las propiedades Anchor y Dock en sus controles secundarios.

Para delimitar y acoplar controles secundarios en un control FlowLayoutPanel

1. Cree un control FlowLayoutPanel en el formulario.

2. Establezca la propiedad Width del control FlowLayoutPanel en 300 y establezca su propiedad FlowDirection en TopDown.

3. Cree dos controles Button y colóquelos en el control FlowLayoutPanel.

4. Establezca la propiedad Width del primer botón en 200.

5. Establezca la propiedad Dock del segundo botón en Fill.

   Nota

   El segundo botón supone el mismo ancho que el primer botón. No se ajusta a lo ancho por el control FlowLayoutPanel.

6. Establezca la propiedad Dock del segundo botón en Ninguno. Esto hace que el botón suponga su ancho original.

7. Establezca la propiedad Anchor del segundo botón en Izquierda, Derecha.

   Importante

   El segundo botón supone el mismo ancho que el primer botón. No se ajusta a lo ancho por el control FlowLayoutPanel. Esta es la regla general para la delimitación y el acoplamiento en el control FlowLayoutPanel: para direcciones de flujo verticales, el control FlowLayoutPanel calcula el ancho de una columna implícita desde el control secundario más ancho de la columna. Todos los demás controles de esta columna con las propiedades Anchor o Dock se alinean o se ajustan para adaptarse a esta columna implícita. El comportamiento funciona de forma similar en las direcciones de flujo horizontales. El control FlowLayoutPanel calcula el alto de una fila implícita desde el control secundario más alto de la fila, y todos los controles secundarios delimitados o acoplados de esta fila se alinean o se cambian de tamaño para ajustarse a la fila implícita.

Ejemplo

En la ilustración siguiente se muestran cuatro botones que se delimitan y acoplan en función del botón azul en un FlowLayoutPanel. La propiedad FlowDirection es LeftToRight.

En la ilustración siguiente se muestran cuatro botones que se delimitan y acoplan en función del botón azul en un FlowLayoutPanel. La propiedad FlowDirection es TopDown.

En el ejemplo de código siguiente se muestran los distintos valores de la propiedad Anchor para un control Button en un control FlowLayoutPanel.

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Drawing
Imports System.Windows.Forms




Public Class Form1
   Inherits Form

   Public Sub New()
      InitializeComponent()
   End Sub 'New
   Private flowLayoutPanel3 As FlowLayoutPanel
   Private label2 As Label
   Private button11 As Button
   Private button12 As Button
   Private button13 As Button
   Private button14 As Button
   Private button15 As Button
   Private flowLayoutPanel1 As FlowLayoutPanel
   Private label1 As Label
   Private button1 As Button
   Private button2 As Button
   Private button3 As Button
   Private button4 As Button
   Private button5 As Button

   Private components As System.ComponentModel.IContainer = Nothing


   Protected Overrides Sub Dispose(disposing As Boolean)
      If disposing AndAlso (components IsNot Nothing) Then
         components.Dispose()
      End If
      MyBase.Dispose(disposing)
   End Sub 'Dispose


   Private Sub InitializeComponent()
      Me.flowLayoutPanel3 = New System.Windows.Forms.FlowLayoutPanel()
      Me.label2 = New System.Windows.Forms.Label()
      Me.button11 = New System.Windows.Forms.Button()
      Me.button12 = New System.Windows.Forms.Button()
      Me.button13 = New System.Windows.Forms.Button()
      Me.button14 = New System.Windows.Forms.Button()
      Me.button15 = New System.Windows.Forms.Button()
      Me.flowLayoutPanel1 = New System.Windows.Forms.FlowLayoutPanel()
      Me.label1 = New System.Windows.Forms.Label()
      Me.button1 = New System.Windows.Forms.Button()
      Me.button2 = New System.Windows.Forms.Button()
      Me.button3 = New System.Windows.Forms.Button()
      Me.button4 = New System.Windows.Forms.Button()
      Me.button5 = New System.Windows.Forms.Button()
      Me.flowLayoutPanel3.SuspendLayout()
      Me.flowLayoutPanel1.SuspendLayout()
      Me.SuspendLayout()
      ' 
      ' flowLayoutPanel3
      ' 
      Me.flowLayoutPanel3.Anchor = CType(System.Windows.Forms.AnchorStyles.Top Or System.Windows.Forms.AnchorStyles.Bottom Or System.Windows.Forms.AnchorStyles.Left Or System.Windows.Forms.AnchorStyles.Right, System.Windows.Forms.AnchorStyles)
      Me.flowLayoutPanel3.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle
      Me.flowLayoutPanel3.Controls.Add(Me.label2)
      Me.flowLayoutPanel3.Controls.Add(Me.button11)
      Me.flowLayoutPanel3.Controls.Add(Me.button12)
      Me.flowLayoutPanel3.Controls.Add(Me.button13)
      Me.flowLayoutPanel3.Controls.Add(Me.button14)
      Me.flowLayoutPanel3.Controls.Add(Me.button15)
      Me.flowLayoutPanel3.Location = New System.Drawing.Point(12, 12)
      Me.flowLayoutPanel3.Name = "flowLayoutPanel3"
      Me.flowLayoutPanel3.Size = New System.Drawing.Size(631, 100)
      Me.flowLayoutPanel3.TabIndex = 2
      ' 
      ' label2
      ' 
      Me.label2.Anchor = System.Windows.Forms.AnchorStyles.None
      Me.label2.AutoSize = True
      Me.label2.Location = New System.Drawing.Point(3, 28)
      Me.label2.Name = "label2"
      Me.label2.Size = New System.Drawing.Size(138, 14)
      Me.label2.TabIndex = 10
      Me.label2.Text = "FlowDirection=LeftToRight"
      ' 
      ' button11
      ' 
      Me.button11.Anchor = System.Windows.Forms.AnchorStyles.Bottom
      Me.button11.AutoSize = True
      Me.button11.Location = New System.Drawing.Point(147, 44)
      Me.button11.Name = "button11"
      Me.button11.Size = New System.Drawing.Size(86, 23)
      Me.button11.TabIndex = 5
      Me.button11.Text = "Anchor=Bottom"
      ' 
      ' button12
      ' 
      Me.button12.Anchor = CType(System.Windows.Forms.AnchorStyles.Top Or System.Windows.Forms.AnchorStyles.Bottom, System.Windows.Forms.AnchorStyles)
      Me.button12.AutoSize = True
      Me.button12.Location = New System.Drawing.Point(239, 3)
      Me.button12.Name = "button12"
      Me.button12.Size = New System.Drawing.Size(111, 64)
      Me.button12.TabIndex = 6
      Me.button12.Text = "Anchor=Top, Bottom"
      ' 
      ' button13
      ' 
      Me.button13.Anchor = System.Windows.Forms.AnchorStyles.None
      Me.button13.BackColor = System.Drawing.SystemColors.GradientActiveCaption
      Me.button13.Location = New System.Drawing.Point(356, 3)
      Me.button13.Name = "button13"
      Me.button13.Size = New System.Drawing.Size(75, 64)
      Me.button13.TabIndex = 7
      ' 
      ' button14
      ' 
      Me.button14.Dock = System.Windows.Forms.DockStyle.Bottom
      Me.button14.Location = New System.Drawing.Point(437, 44)
      Me.button14.Name = "button14"
      Me.button14.TabIndex = 8
      Me.button14.Text = "Dock=Bottom"
      ' 
      ' button15
      ' 
      Me.button15.Dock = System.Windows.Forms.DockStyle.Fill
      Me.button15.Location = New System.Drawing.Point(518, 3)
      Me.button15.Name = "button15"
      Me.button15.Size = New System.Drawing.Size(75, 64)
      Me.button15.TabIndex = 9
      Me.button15.Text = "Dock=Fill"
      ' 
      ' flowLayoutPanel1
      ' 
      Me.flowLayoutPanel1.Anchor = CType(System.Windows.Forms.AnchorStyles.Bottom Or System.Windows.Forms.AnchorStyles.Left Or System.Windows.Forms.AnchorStyles.Right, System.Windows.Forms.AnchorStyles)
      Me.flowLayoutPanel1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle
      Me.flowLayoutPanel1.Controls.Add(Me.label1)
      Me.flowLayoutPanel1.Controls.Add(Me.button1)
      Me.flowLayoutPanel1.Controls.Add(Me.button2)
      Me.flowLayoutPanel1.Controls.Add(Me.button3)
      Me.flowLayoutPanel1.Controls.Add(Me.button4)
      Me.flowLayoutPanel1.Controls.Add(Me.button5)
      Me.flowLayoutPanel1.FlowDirection = System.Windows.Forms.FlowDirection.TopDown
      Me.flowLayoutPanel1.Location = New System.Drawing.Point(12, 118)
      Me.flowLayoutPanel1.Name = "flowLayoutPanel1"
      Me.flowLayoutPanel1.Size = New System.Drawing.Size(200, 209)
      Me.flowLayoutPanel1.TabIndex = 3
      ' 
      ' label1
      ' 
      Me.label1.AutoSize = True
      Me.label1.Location = New System.Drawing.Point(3, 3)
      Me.label1.Name = "label1"
      Me.label1.Size = New System.Drawing.Size(128, 14)
      Me.label1.TabIndex = 11
      Me.label1.Text = "FlowDirection=TopDown"
      ' 
      ' button1
      ' 
      Me.button1.Anchor = System.Windows.Forms.AnchorStyles.Right
      Me.button1.Location = New System.Drawing.Point(74, 23)
      Me.button1.Name = "button1"
      Me.button1.TabIndex = 5
      Me.button1.Text = "Anchor=Right"
      ' 
      ' button2
      ' 
      Me.button2.Anchor = CType(System.Windows.Forms.AnchorStyles.Left Or System.Windows.Forms.AnchorStyles.Right, System.Windows.Forms.AnchorStyles)
      Me.button2.Location = New System.Drawing.Point(3, 52)
      Me.button2.Name = "button2"
      Me.button2.Size = New System.Drawing.Size(146, 23)
      Me.button2.TabIndex = 6
      Me.button2.Text = "Anchor=Left, Right"
      ' 
      ' button3
      ' 
      Me.button3.BackColor = System.Drawing.SystemColors.GradientActiveCaption
      Me.button3.Location = New System.Drawing.Point(3, 81)
      Me.button3.Name = "button3"
      Me.button3.Size = New System.Drawing.Size(146, 23)
      Me.button3.TabIndex = 7
      ' 
      ' button4
      ' 
      Me.button4.Dock = System.Windows.Forms.DockStyle.Right
      Me.button4.Location = New System.Drawing.Point(74, 110)
      Me.button4.Name = "button4"
      Me.button4.TabIndex = 8
      Me.button4.Text = "Dock=Right"
      ' 
      ' button5
      ' 
      Me.button5.Dock = System.Windows.Forms.DockStyle.Fill
      Me.button5.Location = New System.Drawing.Point(3, 139)
      Me.button5.Name = "button5"
      Me.button5.Size = New System.Drawing.Size(146, 23)
      Me.button5.TabIndex = 9
      Me.button5.Text = "Dock=Fill"
      ' 
      ' Form1
      ' 
      Me.ClientSize = New System.Drawing.Size(658, 341)
      Me.Controls.Add(flowLayoutPanel1)
      Me.Controls.Add(flowLayoutPanel3)
      Me.Name = "Form1"
      Me.Text = "Form1"
      Me.flowLayoutPanel3.ResumeLayout(False)
      Me.flowLayoutPanel3.PerformLayout()
      Me.flowLayoutPanel1.ResumeLayout(False)
      Me.flowLayoutPanel1.PerformLayout()
      Me.ResumeLayout(False)
   End Sub 'InitializeComponent


   <STAThread()>  _
   Shared Sub Main()
      Application.EnableVisualStyles()
      Application.Run(New Form1())
   End Sub 'Main
End Class 'Form1

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Windows.Forms;


public class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }
    private FlowLayoutPanel flowLayoutPanel3;
    private Label label2;
    private Button button11;
    private Button button12;
    private Button button13;
    private Button button14;
    private Button button15;
    private FlowLayoutPanel flowLayoutPanel1;
    private Label label1;
    private Button button1;
    private Button button2;
    private Button button3;
    private Button button4;
    private Button button5;

    private System.ComponentModel.IContainer components = null;

    protected override void Dispose(bool disposing)
    {
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
    }

    private void InitializeComponent()
    {
        this.flowLayoutPanel3 = new System.Windows.Forms.FlowLayoutPanel();
        this.label2 = new System.Windows.Forms.Label();
        this.button11 = new System.Windows.Forms.Button();
        this.button12 = new System.Windows.Forms.Button();
        this.button13 = new System.Windows.Forms.Button();
        this.button14 = new System.Windows.Forms.Button();
        this.button15 = new System.Windows.Forms.Button();
        this.flowLayoutPanel1 = new System.Windows.Forms.FlowLayoutPanel();
        this.label1 = new System.Windows.Forms.Label();
        this.button1 = new System.Windows.Forms.Button();
        this.button2 = new System.Windows.Forms.Button();
        this.button3 = new System.Windows.Forms.Button();
        this.button4 = new System.Windows.Forms.Button();
        this.button5 = new System.Windows.Forms.Button();
        this.flowLayoutPanel3.SuspendLayout();
        this.flowLayoutPanel1.SuspendLayout();
        this.SuspendLayout();
        // 
        // flowLayoutPanel3
        // 
        this.flowLayoutPanel3.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
                    | System.Windows.Forms.AnchorStyles.Left)
                    | System.Windows.Forms.AnchorStyles.Right)));
        this.flowLayoutPanel3.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
        this.flowLayoutPanel3.Controls.Add(this.label2);
        this.flowLayoutPanel3.Controls.Add(this.button11);
        this.flowLayoutPanel3.Controls.Add(this.button12);
        this.flowLayoutPanel3.Controls.Add(this.button13);
        this.flowLayoutPanel3.Controls.Add(this.button14);
        this.flowLayoutPanel3.Controls.Add(this.button15);
        this.flowLayoutPanel3.Location = new System.Drawing.Point(12, 12);
        this.flowLayoutPanel3.Name = "flowLayoutPanel3";
        this.flowLayoutPanel3.Size = new System.Drawing.Size(631, 100);
        this.flowLayoutPanel3.TabIndex = 2;
        // 
        // label2
        // 
        this.label2.Anchor = System.Windows.Forms.AnchorStyles.None;
        this.label2.AutoSize = true;
        this.label2.Location = new System.Drawing.Point(3, 28);
        this.label2.Name = "label2";
        this.label2.Size = new System.Drawing.Size(138, 14);
        this.label2.TabIndex = 10;
        this.label2.Text = "FlowDirection=LeftToRight";
        // 
        // button11
        // 
        this.button11.Anchor = System.Windows.Forms.AnchorStyles.Bottom;
        this.button11.AutoSize = true;
        this.button11.Location = new System.Drawing.Point(147, 44);
        this.button11.Name = "button11";
        this.button11.Size = new System.Drawing.Size(86, 23);
        this.button11.TabIndex = 5;
        this.button11.Text = "Anchor=Bottom";
        // 
        // button12
        // 
        this.button12.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)));
        this.button12.AutoSize = true;
        this.button12.Location = new System.Drawing.Point(239, 3);
        this.button12.Name = "button12";
        this.button12.Size = new System.Drawing.Size(111, 64);
        this.button12.TabIndex = 6;
        this.button12.Text = "Anchor=Top, Bottom";
        // 
        // button13
        // 
        this.button13.Anchor = System.Windows.Forms.AnchorStyles.None;
        this.button13.BackColor = System.Drawing.SystemColors.GradientActiveCaption;
        this.button13.Location = new System.Drawing.Point(356, 3);
        this.button13.Name = "button13";
        this.button13.Size = new System.Drawing.Size(75, 64);
        this.button13.TabIndex = 7;
        // 
        // button14
        // 
        this.button14.Dock = System.Windows.Forms.DockStyle.Bottom;
        this.button14.Location = new System.Drawing.Point(437, 44);
        this.button14.Name = "button14";
        this.button14.TabIndex = 8;
        this.button14.Text = "Dock=Bottom";
        // 
        // button15
        // 
        this.button15.Dock = System.Windows.Forms.DockStyle.Fill;
        this.button15.Location = new System.Drawing.Point(518, 3);
        this.button15.Name = "button15";
        this.button15.Size = new System.Drawing.Size(75, 64);
        this.button15.TabIndex = 9;
        this.button15.Text = "Dock=Fill";
        // 
        // flowLayoutPanel1
        // 
        this.flowLayoutPanel1.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Bottom | System.Windows.Forms.AnchorStyles.Left)
                    | System.Windows.Forms.AnchorStyles.Right)));
        this.flowLayoutPanel1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
        this.flowLayoutPanel1.Controls.Add(this.label1);
        this.flowLayoutPanel1.Controls.Add(this.button1);
        this.flowLayoutPanel1.Controls.Add(this.button2);
        this.flowLayoutPanel1.Controls.Add(this.button3);
        this.flowLayoutPanel1.Controls.Add(this.button4);
        this.flowLayoutPanel1.Controls.Add(this.button5);
        this.flowLayoutPanel1.FlowDirection = System.Windows.Forms.FlowDirection.TopDown;
        this.flowLayoutPanel1.Location = new System.Drawing.Point(12, 118);
        this.flowLayoutPanel1.Name = "flowLayoutPanel1";
        this.flowLayoutPanel1.Size = new System.Drawing.Size(200, 209);
        this.flowLayoutPanel1.TabIndex = 3;
        // 
        // label1
        // 
        this.label1.AutoSize = true;
        this.label1.Location = new System.Drawing.Point(3, 3);
        this.label1.Name = "label1";
        this.label1.Size = new System.Drawing.Size(128, 14);
        this.label1.TabIndex = 11;
        this.label1.Text = "FlowDirection=TopDown";
        // 
        // button1
        // 
        this.button1.Anchor = System.Windows.Forms.AnchorStyles.Right;
        this.button1.Location = new System.Drawing.Point(74, 23);
        this.button1.Name = "button1";
        this.button1.TabIndex = 5;
        this.button1.Text = "Anchor=Right";
        // 
        // button2
        // 
        this.button2.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Left | System.Windows.Forms.AnchorStyles.Right)));
        this.button2.Location = new System.Drawing.Point(3, 52);
        this.button2.Name = "button2";
        this.button2.Size = new System.Drawing.Size(146, 23);
        this.button2.TabIndex = 6;
        this.button2.Text = "Anchor=Left, Right";
        // 
        // button3
        // 
        this.button3.BackColor = System.Drawing.SystemColors.GradientActiveCaption;
        this.button3.Location = new System.Drawing.Point(3, 81);
        this.button3.Name = "button3";
        this.button3.Size = new System.Drawing.Size(146, 23);
        this.button3.TabIndex = 7;
        // 
        // button4
        // 
        this.button4.Dock = System.Windows.Forms.DockStyle.Right;
        this.button4.Location = new System.Drawing.Point(74, 110);
        this.button4.Name = "button4";
        this.button4.TabIndex = 8;
        this.button4.Text = "Dock=Right";
        // 
        // button5
        // 
        this.button5.Dock = System.Windows.Forms.DockStyle.Fill;
        this.button5.Location = new System.Drawing.Point(3, 139);
        this.button5.Name = "button5";
        this.button5.Size = new System.Drawing.Size(146, 23);
        this.button5.TabIndex = 9;
        this.button5.Text = "Dock=Fill";
        // 
        // Form1
        // 
        this.ClientSize = new System.Drawing.Size(658, 341);
        this.Controls.Add(this.flowLayoutPanel1);
        this.Controls.Add(this.flowLayoutPanel3);
        this.Name = "Form1";
        this.Text = "Form1";
        this.flowLayoutPanel3.ResumeLayout(false);
        this.flowLayoutPanel3.PerformLayout();
        this.flowLayoutPanel1.ResumeLayout(false);
        this.flowLayoutPanel1.PerformLayout();
        this.ResumeLayout(false);

    }

    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new Form1());
    }
}

Compilar el código

Este ejemplo requiere:

• Referencias a los ensamblados System, System.Data, System.Drawing y System.Windows.Forms.

Para obtener información sobre la compilación de este ejemplo desde la línea de comandos de Visual Basic o Visual C#, vea Generar desde la línea de comandos (Visual Basic) o Compilar la línea de comandos con csc.exe. También puede compilar este ejemplo en Visual Studio pegando el código en un proyecto nuevo. Para obtener más información, vea Cómo: Compilar y ejecutar un ejemplo de código completo de formularios Windows Forms utilizando Visual Studio y Cómo: Compilar y ejecutar un ejemplo de código completo de formularios Windows Forms utilizando Visual Studio y Cómo: Compilar y ejecutar un ejemplo de código completo de formularios Windows Forms utilizando Visual Studio y Cómo: Compilar y ejecutar un ejemplo de código completo de Windows Forms en Visual Studio y Cómo: Compilar y ejecutar un ejemplo de código completo de Windows Forms en Visual Studio.

Vea también

Referencia

FlowLayoutPanel

Información general sobre el control FlowLayoutPanel