كيفية القيام بما يلي: ربط وارساء عناصر التحكم التابعة في عنصر تحكم FlowLayoutPanel

يدعم عنصر تحكم FlowLayoutPanel خصائص Anchor و Dock في عنصر تحكم التابع (الفرع) الخاص به.

لربط وارساء عناصر التحكم التابعة في عنصر تحكم FlowLayoutPanel

1. قم بإنشاء عنصر تحكم FlowLayoutPanel في النموذج الخاص بك.

2. قم بتعيين خاصية Width التابعة لعنصر تحكم FlowLayoutPanel إلى 300, و عيين FlowDirection الخاصة به إلى TopDown.

3. قم بإنشاء عنصري تحكم Button, وضعهما في عنصر تحكم FlowLayoutPanel.

4. عيين Width الخاص بالزر الأول إلى 200.

5. عيين خاصية Dock الخاصة بالزر الثاني إلى Fill.

   ملاحظة

   ويفترض الزر الثاني نفس عرض الزر الأول. لا يتمدد عبر عرض عنصر تحكم FlowLayoutPanel.

6. عيين خاصية Dock الخاصة بالزر الثاني إلى None. وهذا يؤدي إلى افتراض الزر الثاني لعرضه الأصلي.

7. تعيين خاصية Anchor الخاصة بالزر الثاني إلى اليسار, اليمين.

   هام

   ويفترض الزر الثاني نفس عرض الزر الأول. لا يتمدد عبر عرض عنصر تحكم FlowLayoutPanel. هذه هي القاعدة العامة في الترسيخ و الإرساء لدى عنصر تحكم FlowLayoutPanel : للحصول على إرشادات بانسياب عمودي, يحسب عنصر تحكم FlowLayoutPanel عرض العمود الضمني من أعرض فرع عنصر التحكم في العمود. يتم محاذاة أو تمديد كل عناصر التحكم الأخرى في هذا العمود مع خصائص Anchor أو Dock لاحتواء هذا العمود الضمني. يعمل السلوك بطريقة مشابهة لإتجاه التدفق الأفقي. يحسب عنصر تحكم FlowLayoutPanel ارتفاع الصف الضمني من أطول فرع عنصر تحكم في الصف, ثم يتم محاذاة أو تحجيم كل أفرع عناصر التحكم المرتبطة والراسية في هذا الصف ليتم احتواء الصف المقدر.

مثال

يبين الرسم التوضيحي التالي الأزرار الأربعة المرتبطة بالنسبة للزر الأزرق في FlowLayoutPanel. FlowDirection هو LeftToRight.

يبين الرسم التوضيحي التالي الأزرار الأربعة المرتبطة بالنسبة للزر الأزرق في FlowLayoutPanel. FlowDirection هو TopDown.

يوضح مثال التعليمات البرمجية التالي قيم خاصية Anchor المختلفة لعنصر تحكم Button الموجود في عنصر تحكم 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());
    }
}

التحويل البرمجي للتعليمات البرمجية

يتطلب هذا المثال:

• مراجع عن تجميعات النظام و تجميعات System, System.Data, System.Drawing ,و System.Windows.Forms.

للحصول على المزيد من المعلومات حول إنشاء هذا المثال من خط أوامر Visual Basic أو #Visual C، راجع الإنشاء من سطر الأوامر (Visual Basic) أو إنشاء سطر الأوامر باستخدام csc.exe. يمكنك أيضاً بناء هذا المثال في Visual Studio عن طريق لصق التعليمات البرمجية في مشروع جديد. لمزيد من المعلومات، راجع: كيفية القيام بما يلي: ترجمة و تشغيل مثال التعليمات برمجية لنماذج Windows الكامل باستخدام ‏‫Visual Studio.

راجع أيضًا:

المرجع

FlowLayoutPanel

نظرة عامة حول عنصر تحكم FlowLayoutPanel