Procedimiento para 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
Cree un control FlowLayoutPanel en el formulario.
Establezca el valor de Width del control FlowLayoutPanel en 300 y establezca el valor de FlowDirection en TopDown.
Cree dos controles Button y colóquelos en el control FlowLayoutPanel.
Establezca el valor de Width del primer botón en 200.
Establezca la propiedad Dock del segundo botón en Fill.
Nota
El segundo botón toma el mismo ancho que el primer botón. No se ajusta a lo ancho del control FlowLayoutPanel.
Establezca la propiedad Dock del segundo botón en Fill. Esto hace que el botón tome su ancho original.
Establezca la propiedad Dock del segundo botón en Fill.
Importante
El segundo botón toma el mismo ancho que el primer botón. No se ajusta a lo ancho del control FlowLayoutPanel. Esta es la regla general para delimitar y acoplar en el control FlowLayoutPanel: para direcciones de flujo verticales, el control FlowLayoutPanel calcula el ancho de una columna implícita a partir del control secundario más ancho de la columna. Todos los demás controles de esta columna con propiedades Anchor o Dock se alinean o cambian de tamaño para ajustarse a esta columna implícita. El comportamiento funciona de forma similar para las direcciones de flujo horizontales. El control FlowLayoutPanel calcula el alto de una fila implícita a partir del control secundario más alto de la fila, y todos los controles secundarios delimitados o acoplados de esta fila se alinean o cambian de tamaño para ajustarse a la fila implícita.
Ejemplo
La ilustración siguiente muestra cuatro botones que se delimitan y se acoplan con relación al botón azul en un FlowLayoutPanel. El valor de FlowDirection es LeftToRight.
Captura de pantalla del control FlowLayoutPanel horizontal, con cuatro botones anclados y acoplados al botón centrado.NET_FLPanchorExp
La ilustración siguiente muestra cuatro botones que se delimitan y se acoplan con relación al botón azul en un FlowLayoutPanel. El valor de FlowDirection es LeftToRight.
Captura de pantalla del control FlowLayoutPanel vertical, con cuatro botones anclados y acoplados al botón centrado.VS_FLPanchor2
En el ejemplo de código siguiente se muestran varios valores de propiedad Anchor para un control Button en un control FlowLayoutPanel.
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());
}
}
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
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
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
<STAThread()> _
Shared Sub Main()
Application.EnableVisualStyles()
Application.Run(New Form1())
End Sub
End Class
Compilar el código
Para este ejemplo se necesita:
- Referencias a los ensamblados System, System.Data, System.Drawing y System.Windows.Forms.
Consulte también
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
.NET Desktop feedback