Grafikus C# – Windows Forms tanfolyam › 6.2 lecke

Windows Forms · 6.2 lecke · elrendezés

Anchor és Dock beállítások

Ha egy ablakot nagyobbra húzol, és a vezérlők a bal felső sarokban ragadnak, a program kezdetleges hatást kelt. A Windows Forms két egyszerű eszközt ad, hogy a vezérlők kövessék az ablak méretét: az Anchor (horgonyzás) azt mondja meg, melyik élhez „kötődik” a vezérlő, a Dock (dokkolás) pedig a tároló szélére tapasztja. Ebben a leckében megtanulod mindkettőt, a legfontosabb kombinációkat, a dokkolás sorrendjének titkát (miért takarja el a Fill a menüt), és azt is, mikor kell kézzel számolni az elrendezést.

kb. 100 perc
kezdő–közepes szint
Anchor és Dock

Anime stílusú fiú és lány egy C# programozási feladatot beszél meg

A lecke végére

érted az Anchor működését: a vezérlő és a horgonyzott élek távolsága állandó marad;
kiválasztod a helyes Anchor kombinációt (gombok, beviteli mezők, szerkesztőterületek);
használod a Dock értékeit (Top, Bottom, Left, Right, Fill), és tudod a dokkolás sorrendjét (Send to Back);
tudod, hogy az Anchor és a Dock egymást kizárja;
beállítod mindkettőt a tervezőben és kódból is;
kézi elrendezést írsz a Resize eseményben, ha a kettő nem elég.

Mielőtt elkezded

Ehhez a leckéhez a 6.1 lecke (Size, ClientSize, MinimumSize, Resize) és az 1. fejezet vezérlői szükségesek. Új Windows Forms projektben próbáld ki a példákat: tegyél az ablakra gombokat, szövegmezőket, és nagyítsd az ablakot futás közben.

6.1 Az ablak tulajdonságai →

Anchor: a vezérlő „horgonya”

Az Anchor tulajdonság azt adja meg, hogy a vezérlő melyik élei maradnak állandó távolságra a tároló (az ablak vagy egy panel) megfelelő élétől. Alapértelmezetten a Top és a Left be van állítva: a vezérlő a bal felső saroktól való távolságát tartja, ezért nagyításkor a helyén marad. Az értékek (AnchorStyles) kombinálhatók:

Anchor	Mit tesz az ablak nagyításakor?	Tipikus használat
`Top, Left` (alap)	A helyén marad (bal felső sarok).	Címke, kis vezérlő, amelynek nem kell követnie az ablakot.
`Top, Right`	A jobb szélhez ragad: az ablakkal jobbra mozog.	Jobb felső sarokban lévő gomb (Bezár, Súgó).
`Bottom, Right`	A jobb alsó sarokhoz ragad.	OK, Mégse, Mentés gombok.
`Bottom, Left`	A bal alsó sarokhoz ragad.	Alul balra lévő állapotfelirat.
`Top, Left, Right`	A szélessége nő: a bal és a jobb éllel is állandó a távolsága.	Egysoros szövegmező, amely kitölti a sort.
`Top, Bottom, Left, Right`	Mindkét irányban nő (kitölti a rendelkezésre álló helyet).	Nagy szerkesztő (`RichTextBox`, `DataGridView`, `ListBox`).
`Top, Bottom, Left`	A magassága nő, a szélessége fix.	Oldalsó lista, amely a teljes magasságot kitölti.
`None`	A közepéhez képest arányosan marad: az ablak közepén lebeg.	Középre igazított elem (bejelentkező panel, cím).

Form1.csC#

// a tervezőben a Properties ablak Anchor sora egy kis rajz: a négy sáv ki-be kapcsolható
// kódból az AnchorStyles felsorolás értékeit a | operátorral kombináljuk:

btnMent.Anchor = AnchorStyles.Bottom | AnchorStyles.Right;
txtCim.Anchor = AnchorStyles.Top | AnchorStyles.Left | AnchorStyles.Right;
rtbSzoveg.Anchor = AnchorStyles.Top | AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right;
lblKozep.Anchor = AnchorStyles.None;

A távolság az állandóAz Anchor nem arányt, hanem pixeltávolságot őriz. Ha egy gomb a jobb alsó saroktól 12 képpontra van, minden méretnél 12 képpontra marad.

Két szemközti él = nyúlásHa a Left és a Right is be van kapcsolva, a vezérlő szélessége az ablakkal együtt nő (a Top és a Bottom párral a magasság).

Az Anchor a tárolóhoz viszonyítPanelben lévő vezérlő a panelhez igazodik, nem az ablakhoz. Ha a panelnek is van Anchor vagy Dock értéke, a követés láncszerűen folytatódik.

AutoSizeEgy Label alapból AutoSize = True, ezért a mérete a szövegtől függ, és a nyúlás nem érvényesül. Ha nyújtani szeretnéd, kapcsold ki az AutoSize tulajdonságot.

Jósolj!

Egy Button Anchor értéke Bottom, Right. Az ablakot jobbra 100 képponttal és lefelé 50 képponttal nagyítod. Merre mozdul a gomb, és mekkora lesz a mérete?

Jóslat ellenőrzése

A gomb 100 képponttal jobbra és 50 képponttal lefelé mozdul, a mérete nem változik (a jobb és az alsó éltől mért távolsága állandó, de a bal és felső éltől mért távolsága nő). Azért nem nyúlik, mert csak egyetlen élpárból (Right és Bottom) van egy-egy horgonya, a szemközti élekből nincs mindkettő.

Dock: a tároló szélére tapasztva

A Dock tulajdonság a vezérlőt a tároló valamelyik szélére tapasztja, és az adott irányban kitölti. Értékei:

Dock	Hatás	Tipikus használat
`Top`	A felső szélre tapad, a teljes szélességet kitölti; a magasságát megtartja.	Menüsor, eszköztár, cím.
`Bottom`	Az alsó szélre tapad, a teljes szélességet kitölti.	Állapotsor, gombsor.
`Left`	A bal szélre tapad, a teljes magasságot kitölti; a szélességét megtartja.	Oldalsó navigációs panel, fa nézet.
`Right`	A jobb szélre tapad.	Tulajdonságok panel.
`Fill`	Kitölti a fennmaradó helyet.	A fő tartalom (szerkesztő, táblázat).
`None`	Nincs dokkolás (az alapértelmezés).	Szabadon elhelyezett vezérlők.

Form1.csC#

// egy egyszerű szerkesztő ablak: eszköztár felül, állapotsor alul, a szerkesztő kitölti a többit
pnlEszkoztar.Dock = DockStyle.Top;
lblAllapot.Dock = DockStyle.Bottom;
rtbSzoveg.Dock = DockStyle.Fill;

Dock felülírA dokkolt vezérlő Location és méretének egyik értéke az irányra merőlegesen a tárolóhoz igazodik: egy Top dokkolású panel szélessége mindig az ablak szélessége, csak a magasságát (Height) állíthatod.

Dock és Anchor kizárja egymástHa beállítasz egy Dock értéket (a None kivételével), az Anchor érvényét veszti, és fordítva: az Anchor beállítása a Dock értékét None értékre állítja. A kettő egyszerre nem használható ugyanazon a vezérlőn.

PaddingA tároló Padding tulajdonsága margót ad a dokkolt vezérlők köré (a szélektől befelé). Az Fill vezérlő ezért nem érintkezik a tároló szélével, ha a Padding nem nulla.

MarginA vezérlő Margin tulajdonsága a vezérlők közötti távolságot adja (a TableLayoutPanel és FlowLayoutPanel használja, 6.4 lecke); a sima Dock nem veszi figyelembe.

A dokkolás sorrendje: a Send to Back titka

Ha több dokkolt vezérlő van egy tárolóban, a z-sorrend (melyik van elöl, melyik hátul) határozza meg, melyik foglalja el előbb a helyét. A szabály a gyakorlatban:

a szélre dokkolt vezérlők (Top, Bottom, Left, Right) foglalják el előbb a helyüket;
a Fill vezérlő mindig utolsónak kapja meg a maradék helyet, ha a z-sorrend legalján (leghátul) van.

Ha egy Fill panel eltakarja a MenuStrip-et vagy az állapotsort (a menü „eltűnik” a panel alatt), a Fill vezérlő a z-sorrendben rossz helyen van. A javítás: jelöld ki a Fill vezérlőt, jobb gomb → Send to Back (vagy a menüsor: Bring to Front). A View → Other Windows → Document Outline ablak fában mutatja a vezérlők sorrendjét, ott húzással is átrendezheted.

Jósolj!

Az ablakon egy Fill dokkolású RichTextBox van, és később hozzáadsz egy Top dokkolású MenuStrip-et. A menü nem látszik, a szöveg első sora „eltűnt”. Mi a baj, és mit teszel?

Jóslat ellenőrzése

A Fill szerkesztő előbb kapta meg a helyét (nem hátul van a z-sorrendben), ezért az egész ablakot kitölti, és a menü a szerkesztő mögé kerül. A megoldás: a RichTextBox jobb gombos menüjéből Send to Back (vagy a menüsor Bring to Front parancsa). Ekkor a menü foglalja el előbb a felső sávot, a szerkesztő pedig a maradék helyet.

Panel a dokkoláshoz

Összetett elrendezésnél az egyszerű módszer: egy Panel a tároló, a vezérlők a panelben vannak, és a panel kap Dock értéket. Így a panelen belül a vezérlők külön csoportban rendezhetők (6.3 lecke), és kevesebb a z-sorrenddel járó gond.

Anchor vagy Dock?

Helyzet	Megoldás	Miért?
A vezérlő kitölti a tároló egész szélét (menü, állapotsor, szerkesztő).	`Dock`	Egyszerű, nincs számolás, és a méret mindig pontos.
A vezérlő körül margó van (a szélektől 12 képpontra), és követi az ablakot.	`Anchor` (négy irány)	Az `Anchor` megtartja a tervezett távolságokat.
Gomb a jobb alsó sarokban.	`Anchor`: `Bottom, Right`	A sarokhoz kötődik, a mérete nem változik.
Beviteli sor (címke + mező), a mező kitölti a sort.	`Anchor`: `Top, Left, Right`	A szélesség nő, a magasság állandó.
Oldalsó panel és fő tartalom.	Panel `Dock = Left`, tartalom `Dock = Fill`	A fő rész kitölti a maradékot, a panel szélessége fix.
Egyenlő arányú, rácsos elrendezés.	`TableLayoutPanel` (6.4 lecke)	Az arányokat százalékban adhatod meg.
Két rész arányos osztása (bal 40%, jobb 60%).	`SplitContainer` (6.3 lecke) vagy `TableLayoutPanel`	Az `Anchor` és a `Dock` nem tud százalékot kezelni.

Jósolj!

Egy űrlapon két szövegmező van egymás mellett, mindkettő Anchor = Top, Left, Right. Az ablakot kétszer szélesebbre húzod. Hol vannak a mezők?

Jóslat ellenőrzése

Mindkét mező nyúlik, de mindkettő a saját bal és jobb szélétől ugyanannyi távolságot tart, ezért átlapolódnak: a bal mező jobb széle az ablak jobb széléhez igazodik, és ráfut a másik mezőre. Az Anchor nem tud „arányosan osztozni”. Egymás melletti, arányosan nyúló vezérlőkhöz TableLayoutPanel kell (6.4 lecke), vagy kézi számítás a Resize eseményben.

Kézi elrendezés a Resize eseményben

Ha az Anchor és a Dock nem elég (százalékos arány, speciális elrendezés), az elrendezést a Resize eseményben számolhatod ki. A SuspendLayout és ResumeLayout a számolás idejére felfüggeszti az elrendezés frissítését, hogy ne villogjon:

Form1.csC#

private void Form1_Resize(object sender, EventArgs e)
{
    if (this.WindowState == FormWindowState.Minimized)
    {
        return;
    }

    int margo = 12;
    int szeles = this.ClientSize.Width - 3 * margo;   // két oszlop és három margó
    int balSzeles = szeles * 4 / 10;                    // 40%
    int jobbSzeles = szeles - balSzeles;                  // 60%

    this.SuspendLayout();

    lstBal.SetBounds(margo, margo, balSzeles, this.ClientSize.Height - 2 * margo);
    rtbJobb.SetBounds(margo * 2 + balSzeles, margo, jobbSzeles, this.ClientSize.Height - 2 * margo);

    this.ResumeLayout();
}

SetBounds(x, y, szél, mag)Egyszerre állítja a helyet és a méretet (négy érték: bal, felső, szélesség, magasság). Gyorsabb, mint a Location és a Size külön.

Százalék számításaEgész számokkal számolunk: a szeles * 4 / 10 a szélesség 40%-a. A maradékot kivonással kapjuk, így nincs kerekítési hézag.

Minimized ellenőrzésKicsinyített ablaknál a méret nulla lehet, és negatív szélességű vezérlő hibát okozna (6.1 lecke).

Mikor kell?Ritkán: a SplitContainer és a TableLayoutPanel a legtöbb esetben kiváltja. A kézi elrendezés akkor jó, ha a szabály bonyolult (például négyzetes pálya a rendelkezésre álló helyen).

Jósolj!

A Form1_Resize kezelőben egy vezérlő Anchor értéke Top, Left, Right, és közben a kódban is beállítod a szélességét. Melyik lesz érvényes?

Jóslat ellenőrzése

Mindkét mechanizmus beleszól a méretbe, ezért a viselkedés nehezen átlátható: az Anchor az ablak méretváltozásakor módosítja a vezérlő szélességét, a kódod is felülírhatja, és a végeredmény a sorrendtől függ. A szabály: egy vezérlőt egy módszerrel rendezz el. Ha kézzel számolsz, állítsd az Anchor értékét Top, Left (vagy None) értékre.

📷 Képernyőkép helye

Mit tegyél ide: egymás mellett két képernyőkép ugyanarról az ablakról: kis és nagy méretben, látszódjon, hogy a gombok a jobb alsó sarokban maradnak, és a szerkesztő kitölti a helyet.Javasolt fájlnév: winforms-6-2-anchor-dock.webp · Alt szöveg: Az Anchor és Dock hatása az ablak átméretezésekor

Hibakeresés: te vagy a hibadetektív

Mi a baj, és hogyan javítod?

Gondold végig az okot, és csak utána nyisd le a megoldást.

1. A menü eltűnt a szerkesztő mögött

Egy Fill vezérlő mellé tett Top dokkolású menü nem látszik.

Ok és javítás

A z-sorrend rossz: a Fill vezérlő előbb foglalta el a helyet. Jobb gomb a Fill vezérlőn → Send to Back, vagy a menün Bring to Front. A Document Outline ablakban is látható és javítható.

2. A címke nem nyúlik, pedig Left és Right is be van állítva

Egy Label Anchor értéke Top, Left, Right, de nagyításkor sem tágul.

Ok és javítás

A Label AutoSize tulajdonsága igaz, ezért a mérete a szövegtől függ, és az Anchor nem tudja nyújtani. Kapcsold ki az AutoSize tulajdonságot, és állítsd be a kívánt méretet.

3. Kicsinyítéskor összezsúfolódnak a vezérlők

Az ablakot kicsire húzva a gombok ráfutnak a szövegmezőre.

Ok és javítás

Az Anchor a távolságot őrzi, a méretet nem védi: ha az ablak kisebb, mint a vezérlők együttes területe, átlapolódnak. Állíts be MinimumSize értéket (6.1 lecke), amelynél a tartalom még kényelmesen elfér.

4. A Dock beállítás után a Location és a Size nem működik

pnlOldal.Dock = DockStyle.Left;
pnlOldal.Location = new Point(50, 50);   // nincs hatása
pnlOldal.Height = 100;                        // nincs hatása (a Left a teljes magasságot kitölti)

Hiba és javítás

A dokkolt vezérlő helyét és (az irányra merőleges) méretét a tároló határozza meg. Left és Right dokkolásnál csak a Width, Top és Bottom dokkolásnál csak a Height állítható. Ha szabadon akarod elhelyezni, a Dock legyen None.

5. Panelben a vezérlők nem az ablakot követik

Egy panelen lévő gomb Anchor = Bottom, Right, de az ablak nagyításakor nem mozdul.

Ok és javítás

Az Anchor a közvetlen tárolóhoz (itt a panelhez) viszonyít. Ha a panel nem nő az ablakkal (nincs Anchor/Dock), a gomb sem fog mozdulni. Állítsd be a panelt is (például Dock = Fill vagy négy irányú Anchor).

6. Az Anchor beállítás elveszik

txtMezo.Anchor = AnchorStyles.Top | AnchorStyles.Left | AnchorStyles.Right;
txtMezo.Dock = DockStyle.Top;   // ez felülírja az Anchor-t

Hiba és javítás

A Dock és az Anchor kizárják egymást: az utóbbi beállított érték érvényesül, a másik alapértékre áll. Döntsd el, melyik módszert használod az adott vezérlőhöz.

Mini projekt: levélíró űrlap

Készíts átméretezhető levélíró ablakot, amely minden méretben használható marad:

Az ablak: MinimumSize 520 × 360, StartPosition: CenterScreen.
Alul egy StatusStrip vagy Label (lblAllapot, Dock = Bottom), felül egy eszköztár-panel (pnlEszkoz, Dock = Top, magassága 40) Új és Törlés gombbal.
Középen három sor: Címzett, Tárgy (címke + szövegmező, a mezők Anchor = Top, Left, Right), alattuk a levéltörzs (txtLevel, többsoros, Anchor mind a négy irány).
A jobb alsó sarokban Küldés és Mégse gomb (Anchor = Bottom, Right).
Az lblAllapot mutassa a levél karakterszámát (TextChanged).
Egy btnElrendezes gomb kiírja egy lstElrendezes listába minden vezérlő Name, Anchor és Dock értékét (vezérlők bejárásával).
Teszteld: nagyítás, kicsinyítés a minimumig, maximalizálás, visszaállítás; a gombok a sarokban maradnak, a levéltörzs kitölti a helyet, a menü és az állapotsor látszik.

Megoldás megnyitása (próbáld ki előbb önállóan!)

Vezérlő	(Name)	Dock / Anchor
Panel	`pnlEszkoz`	Dock: Top (Height: 40)
Label	`lblAllapot`	Dock: Bottom
TextBox ×2	`txtCimzett`, `txtTargy`	Anchor: Top, Left, Right
TextBox	`txtLevel`	Multiline; Anchor: Top, Bottom, Left, Right
Button ×2	`btnKuld`, `btnMegse`	Anchor: Bottom, Right

A tervezőben a Bring to Front/Send to Back parancsra csak akkor lesz szükség, ha a Dock vezérlők takarják egymást. A vezérlők bejárása rekurzív, mint az 5.8 leckében.

Form1.csC#

private void Form1_Load(object sender, EventArgs e)
{
    this.MinimumSize = new Size(520, 360);
    Szamol();
}

private void Szamol()
{
    lblAllapot.Text = "Karakterek: " + txtLevel.TextLength;
}

private void txtLevel_TextChanged(object sender, EventArgs e)
{
    Szamol();
}

private void btnTorles_Click(object sender, EventArgs e)
{
    txtCimzett.Clear();
    txtTargy.Clear();
    txtLevel.Clear();
    txtCimzett.Focus();
}

private void btnElrendezes_Click(object sender, EventArgs e)
{
    lstElrendezes.Items.Clear();
    Felsorol(this, 0);
}

private void Felsorol(Control szulo, int szint)
{
    foreach (Control gyermek in szulo.Controls)
    {
        string behuzas = new string(' ', szint * 2);
        lstElrendezes.Items.Add($"{behuzas}{gyermek.Name}: Anchor={gyermek.Anchor}, Dock={gyermek.Dock}");

        Felsorol(gyermek, szint + 1);
    }
}

private void btnMegse_Click(object sender, EventArgs e)
{
    this.Close();
}

📷 Képernyőkép helye

Mit tegyél ide: a levélíró űrlap két méretben egymás mellett (kicsi és nagy), valamint az elrendezés-lista néhány sorral.Javasolt fájlnév: winforms-6-2-kesz.webp · Alt szöveg: A levélíró űrlap kis és nagy méretben

Három önálló gyakorlófeladat

Egyszerre csak egyet csinálj: tervezd meg, írd meg, futtasd, ellenőrizd, és csak utána nyisd ki a megoldást.

1. Szerkesztő ablak a Dock segítségével

Készíts egy szerkesztő ablakot: felül MenuStrip, alul StatusStrip, bal oldalon 180 képpont széles ListBox (a fájlok listája), a maradék helyen egy RichTextBox. Mi a helyes z-sorrend?

Egy lehetséges megoldás

A MenuStrip (Top), a StatusStrip (Bottom) és a ListBox (Left) foglalják el előbb a helyüket, a RichTextBox (Fill) legyen a z-sorrend legalján: jobb gomb → Send to Back. A Document Outline ablakban ellenőrizheted a vezérlők sorrendjét, a Send to Back parancs a megbízható módszer.

2. Középre igazított bejelentkező panel

Egy pnlLogin (320 × 200) mindig az ablak közepén legyen, bármekkorára nagyítják. Két megoldást írj: az Anchor és a kézi elrendezés segítségével.

Egy lehetséges megoldás

Az Anchor = None a vezérlőt az eredeti arányok szerint a közepén tartja (feltéve, hogy a tervezéskor középre tetted). A kézi változat a Resize eseményben számolja a helyet: a bal felső sarok az ablakméret és a panelméret különbségének fele.

Form1.csC#

// 1. megoldás: a tervezőben pnlLogin.Anchor = None, és a panel a tervezéskor középen áll

// 2. megoldás: kézi számítás
private void Form1_Resize(object sender, EventArgs e)
{
    pnlLogin.Left = (this.ClientSize.Width - pnlLogin.Width) / 2;
    pnlLogin.Top = (this.ClientSize.Height - pnlLogin.Height) / 2;
}

3. Négyzetes pálya a rendelkezésre álló helyen

Egy pbPalya PictureBox mindig négyzet alakú legyen, a lehető legnagyobb méretben, és az ablak közepén álljon (a felső eszköztár alatt, ami 40 képpont). Hogyan számolod?

Egy lehetséges megoldás

A rendelkezésre álló terület: szélesség × (magasság − 40). A négyzet oldala a kisebbik érték. Ezt az Anchor/Dock nem tudja, ezért kézi elrendezés kell.

Form1.csC#

private void Form1_Resize(object sender, EventArgs e)
{
    if (this.WindowState == FormWindowState.Minimized)
    {
        return;
    }

    int szabadSzel = this.ClientSize.Width;
    int szabadMag = this.ClientSize.Height - 40;
    int oldal = Math.Max(50, Math.Min(szabadSzel, szabadMag));

    pbPalya.SetBounds((szabadSzel - oldal) / 2, 40 + (szabadMag - oldal) / 2, oldal, oldal);
}

Gyakorlótár: 6 további feladat

Három szinten gyakorolhatsz: alap, közepes és kihívás. Csak a próbálkozás után nyisd le a megoldást.

Alap szint

1. Melyik Anchor?

Add meg, melyik Anchor értéket használnád: (a) egy Bezár gomb a jobb felső sarokban; (b) egy keresőmező, amely kitölti a sort; (c) egy lista, amely a teljes magasságot kitölti a bal oldalon, de a szélessége fix.

Megoldás megnyitása

(a) Top, Right; (b) Top, Left, Right; (c) Top, Bottom, Left.

2. Dock értékek

Egy ablakban az eszköztár felül, az állapotsor alul, a navigációs lista bal oldalon, a tartalom középen áll. Melyik vezérlőnek milyen Dock kell, és melyik legyen leghátul?

Megoldás megnyitása

Eszköztár: Top; állapotsor: Bottom; navigációs lista: Left; tartalom: Fill. A Fill vezérlő legyen leghátul a z-sorrendben (Send to Back).

Közepes szint

3. Anchor kódból

Egy gomb a Form1_Load eseményben kerüljön a jobb alsó sarokba, 12 képpontnyi margóval, és kövesse az ablakot. Hogyan számolod a helyét?

Megoldás megnyitása

A bal felső sarok: ClientSize.Width - gomb.Width - 12, illetve ClientSize.Height - gomb.Height - 12. A kövesse az ablakot: Anchor = Bottom | Right.

Form1.csC#

private void Form1_Load(object sender, EventArgs e)
{
    btnOk.Anchor = AnchorStyles.Bottom | AnchorStyles.Right;
    btnOk.Location = new Point(this.ClientSize.Width - btnOk.Width - 12, this.ClientSize.Height - btnOk.Height - 12);
}

4. Arányos oszlopok

Három ListBox kitölti az ablak szélességét 25%, 50%, 25% arányban, 10 képpontos margóval. Írd meg a Resize kezelőt.

Megoldás megnyitása

A rendelkezésre álló szélesség a margók levonása után: ClientSize.Width - 4 * 10 (két szélső és két köztes margó). Ebből a 25% és az 50% számolható, a harmadik a maradék.

Form1.csC#

private void Form1_Resize(object sender, EventArgs e)
{
    int m = 10;
    int szabad = this.ClientSize.Width - 4 * m;
    int a = szabad / 4;
    int b = szabad / 2;
    int c = szabad - a - b;
    int mag = this.ClientSize.Height - 2 * m;

    lst1.SetBounds(m, m, a, mag);
    lst2.SetBounds(2 * m + a, m, b, mag);
    lst3.SetBounds(3 * m + a + b, m, c, mag);
}

Kihívás szint

5. Elrendezés-diagnosztika

Írj metódust, amely egy TextBox-ba kiírja az ablak összes vezérlőjének helyét és méretét (Bounds), a beágyazottakkal együtt, behúzással. Mire jó ez hibakereséskor?

Megoldás megnyitása

Ha egy vezérlő nem jelenik meg ott, ahol vártad, a kiírás megmutatja, hogy a mérete nulla, a helye az ablakon kívül van, vagy a Visible hamis. A rekurzió a vezérlők fáját járja be.

Form1.csC#

private void Diagnosztika(Control szulo, int szint, System.Text.StringBuilder kimenet)
{
    foreach (Control c in szulo.Controls)
    {
        kimenet.AppendLine(new string(' ', szint * 2) + c.Name + ": " + c.Bounds + (c.Visible ? "" : " (rejtett)"));
        Diagnosztika(c, szint + 1, kimenet);
    }
}

private void btnDiag_Click(object sender, EventArgs e)
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    Diagnosztika(this, 0, sb);
    txtDiag.Text = sb.ToString();
}

6. A legjobb módszer kiválasztása

Egy ablakban a bal oldalon 30%, jobb oldalon 70% szélességű rész kell, amely mindkét irányban nyúlik, és amelyet a felhasználó húzással át is méretezhet. Melyik eszközt választod, és miért nem az Anchor vagy a Dock?

Megoldás megnyitása

A SplitContainer (6.3 lecke): két panelt és egy húzható elválasztót ad, az arányt a felhasználó is állíthatja. Az Anchor és a Dock pixeltávolságot őriz, százalékos arányt nem tud, és a felhasználó nem húzhatja át. A TableLayoutPanel a százalékot tudja, de az átméretezés nem húzással történik.

Gyors önellenőrzés

Válaszolj fejben, és csak utána nyisd le a választ.

1. Mit őriz az Anchor?

A vezérlő és a horgonyzott élek pixeltávolságát. A szemközti élek horgonyzása nyújtja a vezérlőt.

2. Mi a Dock = Fill?

A vezérlő kitölti a tároló fennmaradó helyét (a szélre dokkolt vezérlők után).

3. Mi a Send to Back szerepe?

A Fill vezérlőt a z-sorrend aljára teszi, így utolsóként kapja meg a maradék helyet, és nem takarja el a menüt vagy az állapotsort.

4. Lehet egy vezérlőnek Anchor és Dock is?

Nem: kizárják egymást. Az egyik beállítása a másikat alapértékre állítja.

5. Miért nem nyúlik a Label az Anchor ellenére?

Az AutoSize tulajdonsága igaz: a méretét a szöveg adja. Kapcsold ki.

6. Mikor kell kézi elrendezés?

Ha az Anchor és a Dock nem elég: százalékos arányok, négyzetes pálya. Ilyenkor a Resize eseményben számolunk (SetBounds, SuspendLayout).

7. Mire való a MinimumSize az Anchor mellett?

Megakadályozza, hogy az ablak annyira kicsi legyen, hogy a vezérlők átlapolódjanak.

Mit tudsz már?

Az Anchor és a Dock segítségével átméretezhető űrlapot tervezel.
Tudod a gyakori kombinációkat, és hogy az Anchor és a Dock kizárja egymást.
Kezeled a dokkolás z-sorrendjét (Send to Back).
Kézi elrendezést írsz a Resize eseményben, ha kell.
Felismered a gyakori hibákat (AutoSize, panel mint tároló, átlapolódás).

Következő lecke: Panel, GroupBox és SplitContainer

Az űrlap rendezett csoportokra bontása: tárolók a vezérlők számára, és húzható elválasztó két rész között.

Tovább a 6.3 leckére →

Anchor és Dock beállítások

A lecke végére

Mielőtt elkezded

Anchor: a vezérlő „horgonya”

Jósolj!

Dock: a tároló szélére tapasztva

A dokkolás sorrendje: a Send to Back titka

Jósolj!

Panel a dokkoláshoz

Anchor vagy Dock?

Jósolj!

Kézi elrendezés a Resize eseményben

Jósolj!

Hibakeresés: te vagy a hibadetektív

Mi a baj, és hogyan javítod?

1. A menü eltűnt a szerkesztő mögött

2. A címke nem nyúlik, pedig Left és Right is be van állítva

3. Kicsinyítéskor összezsúfolódnak a vezérlők

4. A Dock beállítás után a Location és a Size nem működik

5. Panelben a vezérlők nem az ablakot követik

6. Az Anchor beállítás elveszik

Mini projekt: levélíró űrlap

Három önálló gyakorlófeladat

1. Szerkesztő ablak a Dock segítségével

2. Középre igazított bejelentkező panel

3. Négyzetes pálya a rendelkezésre álló helyen

Gyakorlótár: 6 további feladat

Alap szint

1. Melyik Anchor?

2. Dock értékek

Közepes szint

3. Anchor kódból

4. Arányos oszlopok

Kihívás szint

5. Elrendezés-diagnosztika

6. A legjobb módszer kiválasztása

Gyors önellenőrzés

Mit tudsz már?

Következő lecke: Panel, GroupBox és SplitContainer

Hozzászólás Írása Válasz megszakítása

Legutóbbi bejegyzések