web-dev-qa-db-fra.com

Aligner les contrôles pour centrer dans un FlowLayout

J'ai un flowlayout comme suit:

enter image description here

Je dois centrer tous les contrôles sur le formulaire (en d'autres termes, supposons que la largeur du formulaire soit 200. btnOpt1 à btnOpt4 devrait avoir leur Left commençant à 100 moins la moitié de la largeur du bouton, pas 0. )

c#.netwinforms
16
David

Vous pouvez le faire de deux manières, mais avec certaines limitations de chacune.

  1. Utilisation de la propriété Anchor
  2. Utilisation du contrôle de présentation à l'aide des propriétés Docking et Anchor.

Méthode 1: propriété d'ancrage

Les contrôles sont ancrés par défaut en haut à gauche du formulaire, ce qui fait que signifie quand la taille du formulaire sera modifiée, leur distance par rapport au sommet Le côté gauche de la fiche restera constant. Si vous modifiez le contrôle ancre en bas à gauche, le contrôle gardera la même distance en bas et à gauche du formulaire lorsque le formulaire est redimensionné.

Désactiver l'ancre dans une direction maintiendra le contrôle centré dans cette direction lors du redimensionnement.

Exemple :

public TestForm12()
{
   InitializeComponent();

   Button btn = new Button();
   btn.Width = this.Width - 10;
   btn.Height = 20;
   btn.Left = (this.ClientSize.Width - btn.Width) / 2;
   btn.Top = (this.ClientSize.Height - btn.Height) / 2;
   btn.Text = "click me";
   this.Controls.Add(btn);
   btn.Anchor = AnchorStyles.None;               

}

2. Utilisation du contrôle de disposition

  1. Ajouter un contrôle TableLayout, définissez la propriété Dock sur Remplir.
  2. Ajouter une rangée avec le style de type de taille
  3. Ajoutez 3 colonnes Column1 (Type de taille - Pourcentage (100%)), Colonne2 (Type de taille - Absolu (200px)), Colonne3 (Type de taille - Pourcentage (100%)).
  4. Maintenant, ajoutez un contrôle de panneau à Column2 et définissez la propriété Dock sur Remplir
  5. Ajoutez des boutons à ce contrôle et définissez leur taille à votre guise, puis définissez leur propriété d'ancrage sur AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top

Exemple - Extrait de code Designer.cs du formulaire.

private void InitializeComponent()
 {
     this.tableLayoutPanel1 = new System.Windows.Forms.TableLayoutPanel();
     this.panel1 = new System.Windows.Forms.Panel();
     this.button1 = new System.Windows.Forms.Button();
     this.button2 = new System.Windows.Forms.Button();
     this.tableLayoutPanel1.SuspendLayout();
     this.panel1.SuspendLayout();
     this.SuspendLayout();
     // 
     // tableLayoutPanel1
     // 
     this.tableLayoutPanel1.ColumnCount = 3;
     this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
     this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Absolute, 200F));
     this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 50F));
      this.tableLayoutPanel1.Controls.Add(this.panel1, 1, 0);
      this.tableLayoutPanel1.Dock = System.Windows.Forms.DockStyle.Fill;
      this.tableLayoutPanel1.Location = new System.Drawing.Point(0, 0);
      this.tableLayoutPanel1.Name = "tableLayoutPanel1";
      this.tableLayoutPanel1.RowCount = 1;
      this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 100F));
      this.tableLayoutPanel1.Size = new System.Drawing.Size(284, 262);
      this.tableLayoutPanel1.TabIndex = 0;
      // 
      // panel1
      // 
      this.panel1.Controls.Add(this.button2);
      this.panel1.Controls.Add(this.button1);
      this.panel1.Dock = System.Windows.Forms.DockStyle.Fill;
      this.panel1.Location = new System.Drawing.Point(45, 3);
      this.panel1.Name = "panel1";
      this.panel1.Size = new System.Drawing.Size(194, 256);
      this.panel1.TabIndex = 0;
      // 
      // button1
      // 
      this.button1.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Left) 
    | System.Windows.Forms.AnchorStyles.Right)));
    this.button1.Location = new System.Drawing.Point(3, 9);
    this.button1.Name = "button1";
    this.button1.Size = new System.Drawing.Size(188, 23);
    this.button1.TabIndex = 0;
    this.button1.Text = "button1";
    this.button1.UseVisualStyleBackColor = true;
    // 
    // button2
    // 
    this.button2.Anchor = ((System.Windows.Forms.AnchorStyles)(((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Left) 
    | System.Windows.Forms.AnchorStyles.Right)));
    this.button2.Location = new System.Drawing.Point(3, 38);
    this.button2.Name = "button2";
    this.button2.Size = new System.Drawing.Size(188, 23);
    this.button2.TabIndex = 0;
    this.button2.Text = "button1";
    this.button2.UseVisualStyleBackColor = true;
    // 
    // TestForm11
    // 
    this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
    this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
    this.ClientSize = new System.Drawing.Size(284, 262);
    this.Controls.Add(this.tableLayoutPanel1);
    this.Name = "TestForm11";
    this.Text = "TestForm11";
    this.tableLayoutPanel1.ResumeLayout(false);
    this.panel1.ResumeLayout(false);
    this.ResumeLayout(false);

}

 #endregion

private System.Windows.Forms.TableLayoutPanel tableLayoutPanel1;
private System.Windows.Forms.Panel panel1;
private System.Windows.Forms.Button button2;
private System.Windows.Forms.Button button1;

J'espère que cette aide ..

23
Niranjan Singh

J'irais avec TableLayoutPanel à la place:

  • Mettez TableLayoutPanel sur votre formulaire
  • Définir le style de quai Fill sur le panneau
  • Ne laissez qu'une colonne à l'intérieur du panneau
  • Créer une ligne pour chaque bouton (et placer des boutons dans les cellules du tableau)
  • Définir le type de taille de ligne Autosize
  • Définissez le style de quai Fill sur chaque bouton, sauf le dernier
  • Définir le style de quai Top jusqu'au dernier bouton

BTW dans votre solution, vous devez effectuer une itération sur les contrôles flowLayoutPanel au lieu des contrôles de formulaire. Pensez également à soustraire la marge horizontale et le remplissage de la largeur:

foreach (Control control in flowLayoutPanel.Controls)
{
    control.Size = new Size(flowLayoutPanel.Width - control.Margin.Horizontal,
                            control.Height); 
}

Mais je vous conseille d'utiliser TableLayoutPanel à la place.

9
Sergey Berezovskiy

J'ai résolu ce problème en modifiant les valeurs de la marge. J'ajoute cependant mon contenu à un panneau.

C #: 

int horizontalMargin = (int)(0.5 * (this.containingPanelOrForm.Width - this.button.Width));
this.btnOptX.Margin = new Padding(horizontalMargin, 0, horizontalMargin, 0);
2
Paulo de Barros

Je ne suis pas bon en C # mais vous pouvez aussi ajouter un panneau dans flowlayoutpanel avec la même largeur que flowlayoutpanel. Ensuite, vous pouvez ajouter dans le panneau créé pendant la durée du programme le bouton souhaité et régler le dock à gauche ou à droite. Comme vous le souhaitez. Me laisser montrer un exemple dans VB.net et C # (convertis en ligne utilisés)

VB.net 

     Dim btn As New Button
            btn.Text = "Example"
            btn.Name = "Button"
            btn.Size = New Size(60,10)
            Dim panel As New Panel
            panel.Size = New Size(FlowLayoutPanel1.Width, 10) 'size of the flowlayoutpanel + height of button
            btn.Dock = DockStyle.Right
            FlowLayoutPanel1.Controls.Add(panel)
panel.controls.add(btn)

C # 

Button btn = new Button();
btn.Text = "Example";
btn.Name = "Button";
btn.Size = new Size(60, 10);
Panel panel = new Panel();
panel.Size = new Size(FlowLayoutPanel1.Width, 10);
//size of the flowlayoutpanel + height of button
btn.Dock = DockStyle.Right;
FlowLayoutPanel1.Controls.Add(panel);
panel.controls.@add(btn);
0
Fábio Gaspar

Ou vous pouvez utiliser la disposition de la grille à la place.

0
Nickon

Créez une étiquette vide avec Name = lblEmpty et AutoSize = False. Placez ce contrôle en premier dans la liste des contrôles de FlowLayoutPanel1, puis ajoutez le code ci-dessous.

Exemple: En supposant trois étiquettes existantes dans FlowLayoutPanel1, le résultat doit être lblEmpty, LabelExisting1 et LabelExisting2, dans cet ordre.

Dim MarginLabelEmpty As Integer = ((FlowLayoutPanel1.Width - (LabelExisting1.Width + LabelExisting2.Width)) / 2)
        lblEmpty.Width = MarginLabelEmpty

J'ai résolu mon problème en créant ce code.

dans votre cas avec Button Controls, créez 4 de nouvelles étiquettes avec .Text = "" ( empty ) et placez-les au début de chaque bouton, étiquettes de nom as suit: lblEmpty1, lblEmpty2, lblEmpty3, lblEmpty4.

Puis ajoutez le code suivant:

Dim MarginLeftbtnOptAll As Integer = ((FlowLayoutPanel1.Width - btnOpt1.Width) / 2)
        lblEmpty1.AutoSize = False
        lblEmpty1.Width = MarginLeftbtnOptAll
        lblEmpty2.AutoSize = False
        lblEmpty2.Width = MarginLeftbtnOptAll
        lblEmpty3.AutoSize = False
        lblEmpty3.Width = MarginLeftbtnOptAll
        lblEmpty4.AutoSize = False
        lblEmpty4.Width = MarginLeftbtnOptAll

Ce bouton central augmente la largeur de l'étiquette vide en fonction de la largeur de FlowLayoutPanel1

0
Toto