C#: layout adaptabil cu Dock, Anchor și panouri

Coordonatele fixe sunt potrivite pentru primul exemplu, dar devin fragile când fereastra este redimensionată sau fontul sistemului este mai mare. Pentru un formular de editare, vrem ca eticheta să rămână lizibilă, câmpul să folosească spațiul disponibil și butonul să rămână accesibil. Layout-ul trebuie să exprime aceste relații, nu doar pozițiile de pe calculatorul autorului.

Cum lucrezi cu exemplul

Exemplul complet se compilează ca Windows Forms App pe .NET Framework 4.8, cu C# 7.3. Deschide Lesson.csproj din arhivă în Visual Studio pe Windows. Rulează scenariile descrise mai jos; verificarea compilării nu înlocuiește testarea ferestrei și a dispozitivelor folosite.

Descarcă sursele și instrucțiunile.

Ideea și pașii de implementare

TableLayoutPanel împarte zona în coloane și rânduri. Prima coloană are lățime fixă pentru etichetă; a doua primește restul. Dock.Fill spune controlului să ocupe celula disponibilă. Padding este spațiul interior al containerului, iar Margin este spațiul din jurul controlului.

Anchor păstrează distanța față de marginile indicate și este util în alte containere. Nu combina mecanic Dock și Anchor așteptând ca ambele să controleze simultan același comportament. AutoScaleMode.Font ajută adaptarea la font, iar MinimumSize previne comprimarea excesivă. Verificarea la scalare diferită rămâne necesară.

Exemplu și rezultat așteptat

Fereastra pornește cu o etichetă, un câmp de titlu și un buton. La lățire, câmpul crește; butonul rămâne în partea dreaptă a rândului său. Tab ajunge la câmp și apoi la buton, potrivit TabIndex. Label-ul nu reprezintă o oprire de editare.

Fereastră mai lată → Coloana 1: 120 px → Coloana 2: restul → Câmpul se extinde.Mărește schema ↗

Codul complet

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Windows.Forms;

static class Program
{
    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.SetCompatibleTextRenderingDefault(false);
        Application.Run(new LessonForm());
    }
}

class LessonForm : Form
{
public LessonForm() {
        Text="Layout adaptabil"; ClientSize=new Size(500,220); MinimumSize=new Size(380,220);
        AutoScaleMode=AutoScaleMode.Font;
        var layout=new TableLayoutPanel { Dock=DockStyle.Fill,ColumnCount=2,RowCount=3,Padding=new Padding(12) };
        layout.ColumnStyles.Add(new ColumnStyle(SizeType.Absolute,120));
        layout.ColumnStyles.Add(new ColumnStyle(SizeType.Percent,100));
        layout.RowStyles.Add(new RowStyle(SizeType.AutoSize));
        layout.RowStyles.Add(new RowStyle(SizeType.Percent,100));
        layout.RowStyles.Add(new RowStyle(SizeType.AutoSize));
        layout.Controls.Add(new Label { Text="Titlu proiect",AutoSize=true },0,0);
        var title=new TextBox { Dock=DockStyle.Fill,TabIndex=0,AccessibleName="Titlu proiect" };
        layout.Controls.Add(title,1,0);
        var save=new Button { Text="Verifica",AutoSize=true,Anchor=AnchorStyles.Right,TabIndex=1 };
        save.Click += (sender,e) => MessageBox.Show(this,title.Text,"Titlu introdus");
        layout.Controls.Add(save,1,2); Controls.Add(layout);
    }
}

Greșeli și limite

Nu ascunde controalele în afara zonei vizibile prin impunerea unei ferestre prea mici. Nu rezolva toate problemele prin mărirea fontului sau prin coordonate absolute. Texte traduse și diacriticele pot ocupa alt spațiu. Un layout bun se verifică prin utilizare, inclusiv cu tastatura și la 125% sau 150% scalare Windows.

Exersează

Mărește și micșorează fereastra până la limita permisă. Schimbă eticheta în „Titlul complet al proiectului” și verifică dacă rămâne lizibilă. Adaugă un rând pentru descriere multiline care primește spațiul vertical rămas. Rezultatul așteptat este un câmp care crește, fără suprapunere peste buton.

Continuă parcursul

Parcursul complet de 50 de lecții

Bazele C#

Lecția precedentă: C#: validarea formularului cu ErrorProvider

Lecția următoare: C#: alegeri cu ComboBox și identitatea selecției.

Referință: documentația Microsoft.

Întrebări frecvente

Ce diferență există între Padding și Margin?

Padding rezervă spațiu în interiorul containerului; Margin separă controlul de vecinii săi.

Dock.Fill stabilește o mărime fixă?

Nu. Controlul urmărește spațiul disponibil al containerului sau celulei.

De ce verific scalarea Windows?

Dimensiunile textului și ale controalelor pot diferi de configurația calculatorului autorului.