Grafikus C# – Windows Forms tanfolyam › 2.5 lecke Windows Forms · 2.5 lecke A MiniWord már tud félkövér, dőlt és aláhúzott szöveget készíteni. Most két legördülő listát (ComboBox) adunk hozzá: az egyikből betűtípust, a másikból betűméretet választhatsz a kijelölt szövegnek. Közben megismerjük a ComboBox legfontosabb tulajdonságait és eseményét.Betűtípus és betűméret legördülő listából

A lecke végére
- létrehozol két
ComboBox-ot, és feltöltöd őket elemekkel; - a
DropDownStylebeállításával megakadályozod a hibás beírást; - a
SelectedIndexChangedeseményre reagálsz; - a
SelectedItemés aTexttulajdonsággal kiolvasod a választott értéket; - a betűtípust és a betűméretet úgy módosítod, hogy a félkövér, dőlt és aláhúzott stílus megmaradjon;
- a
float.TryParse()segítségével szövegből számot készítesz.
Mielőtt elkezded
Ehhez a leckéhez kell a MiniWord a 2.4 lecke után, vagyis a SelectionFont, a new Font(...) és a null ellenőrzés ismerete.
Két ComboBox az ablakra
A ComboBox egy legördülő lista: a felhasználó a lenyíló listából választ egy elemet. Tegyél a MiniWord ablakára két ComboBoxot a formázó gombok mellé:
(Name): cmbBetutipusA betűtípus kiválasztására.
(Name): cmbMeretA betűméret kiválasztására.
A név előtagja Mit tegyél ide: a MiniWord felső sora a három formázó gomb (F, D, A) után a két ComboBoxszal, lenyitva a betűtípus lista (Arial, Times New Roman, Courier New, Verdana).Javasolt fájlnév: winforms-2-5-comboboxok.webp · Alt szöveg: A MiniWord két legördülő listával a betűtípus és a betűméret kiválasztásáhozcmb, a ComboBox rövidítése, ahogy az rtb a RichTextBoxé.
Te jössz!
Add hozzá a két ComboBoxot az ablakhoz, és nevezd el őket. Az elemeket a következő szakaszban töltjük fel.
Az elemek és a DropDownStyle
A ComboBox listáját a Properties ablakban töltheted fel:
- Jelöld ki a
cmbBetutipuselemet. - A Properties ablakban keresd meg az
Itemstulajdonságot, és kattints a mellette lévő (Collection) gombra, vagy a három pontra. - A megnyíló ablakban sorról sorra írd be az elemeket:
Arial,Times New Roman,Courier New,Verdana. - Ugyanígy töltsd fel a
cmbMeretelemet:10,12,16,20,28.
Mit tegyél ide: a Properties ablak a cmbBetutipus kijelölt elemével, rajta az Items sor, és mellette a megnyílt „String Collection Editor” a négy betűtípussal, soronként egy elem.Javasolt fájlnév: winforms-2-5-items-szerkeszto.webp · Alt szöveg: A ComboBox elemeinek szerkesztése a Visual Studio Properties ablakában
Ezután állítsd be mindkét ComboBox DropDownStyle tulajdonságát DropDownList értékre. Ez a lényeg:
Elemek kódból is felvehetők
Ugyanezt kódból is megteheted, például a Form1_Load eseménykezelőben: cmbBetutipus.Items.Add("Arial"); Kevés elemnél a Properties ablak egyszerűbb, sok elemnél a kód.
A SelectedIndexChanged esemény
Amikor a felhasználó a listából másik elemet választ, a ComboBox kiváltja a SelectedIndexChanged eseményt. Ugyanúgy hozhatod létre az eseménykezelőt, mint a TextChanged esetében: Properties ablak, villám ikon (Events), dupla kattintás az esemény sorára.
A kiválasztott elemet kétféleképpen olvashatod ki:
object, ezért szövegként a ToString() metódussal kell kérni.string.-1.Jósolj!
A cmbMeret lista elemei: 10, 12, 16, 20, 28. A felhasználó a 16-ot választja. Mi a SelectedIndex értéke?
Jóslat ellenőrzése
2, mert a számozás 0-tól indul: a 10 a 0., a 12 az 1., a 16 a 2. elem.
A betűtípus megváltoztatása
A kijelölt szöveg betűtípusát úgy változtatjuk meg, hogy új Font objektumot készítünk: az új betűcsaláddal, de a régi mérettel és stílussal. Így a félkövér, dőlt és aláhúzott formázás megmarad.
private void cmbBetutipus_SelectedIndexChanged(object sender, EventArgs e)
{
Font regi = rtbDokumentum.SelectionFont;
if (regi == null || cmbBetutipus.SelectedItem == null)
{
MessageBox.Show("A kijelölésben többféle formázás van, vagy nincs kiválasztva betűtípus.");
}
else
{
string csalad = cmbBetutipus.SelectedItem.ToString();
rtbDokumentum.SelectionFont = new Font(csalad, regi.Size, regi.Style);
}
rtbDokumentum.Focus();
}"Arial".Mit tegyél ide: a MiniWord egy dokumentummal, amelyben négy szó négy különböző betűtípussal (Arial, Times New Roman, Courier New, Verdana) látszik.Javasolt fájlnév: winforms-2-5-betutipusok.webp · Alt szöveg: A MiniWord dokumentum négy különböző betűtípussal
Mi van, ha a betűtípus nincs a gépen?
Ha a lista olyan betűtípust tartalmaz, amely az adott számítógépen nincs telepítve, a Windows egy másikat használ helyette. A lecke betűtípusai (Arial, Times New Roman, Courier New, Verdana) a Windowsban általában megvannak.
A betűméret megváltoztatása
A méret listában szövegek állnak ("10", "12"...), de a Font számot vár. Át kell alakítanunk a szöveget számmá, erre való a float.TryParse(). Ismerős lehet az adatbekérésnél: sikeres átalakításnál true értéket ad vissza, hibásnál false értéket, és az eredményt az out paraméterbe teszi.
private void cmbMeret_SelectedIndexChanged(object sender, EventArgs e)
{
Font regi = rtbDokumentum.SelectionFont;
float meret;
if (regi == null)
{
MessageBox.Show("A kijelölésben többféle formázás van. Jelölj ki egységes szövegrészt!");
}
else if (float.TryParse(cmbMeret.Text, out meret))
{
rtbDokumentum.SelectionFont = new Font(regi.FontFamily, meret, regi.Style);
}
rtbDokumentum.Focus();
}meret változóba kerül.Jósolj!
Egy félkövér szót kijelölsz, és a méretlistából a 28-at választod. A szó félkövér marad, vagy elveszti a félkövér stílust?
Jóslat ellenőrzése
Félkövér marad, mert az új Font a régi stílust (regi.Style) is megkapja. Ha a stílust nem adnánk át, a félkövér elveszne.
Kész a formázó sáv
A MiniWordben most már kijelölhetsz szöveget, és beállíthatod a betűtípusát, a méretét és a stílusát.
Jósolj, aztán futtasd!
Minden feladatnál először írd le, mit vársz, és csak utána próbáld ki.
1. Indulás
Elindítod a programot. Mit mutat a két ComboBox? Üresek, mert nincs kiválasztott elem. A Jóslat ellenőrzése
SelectedIndex értéke ilyenkor -1. Ha az induláskor mindig az első elemet szeretnéd látni, a Form1_Load eseményben állítsd be a SelectedIndex = 0 értéket. Ezzel az eseménykezelő is lefut, amely az első betűtípust és méretet alkalmazza az írásra.
2. Két módosítás
Egy szót kijelölsz, majd előbb a félkövér gombbal félkövérré teszed, utána a Courier New betűtípust választod. Mit látsz? A szó Courier New betűtípusú és félkövér is, mert a betűtípus-váltás átveszi a korábbi stílust.Jóslat ellenőrzése
3. Vegyes kijelölés
Két szót jelölsz ki, amelyek különböző betűtípusúak. A méretlistából a 20-at választod. Mi történik? Az üzenet jelenik meg, hogy a kijelölésben többféle formázás van, és a méret nem változik. Jelölj ki egységesen formázott részt, és működni fog.Jóslat ellenőrzése
Hibakeresés: te vagy a hibadetektív
Hibavadászat
Jósold meg, hogy fordítási hiba, futás közbeni hiba vagy rossz működés lesz-e. Csak utána nyisd le a megoldást.
1. Object a szöveg helyén
rtbDokumentum.SelectionFont = new Font(cmbBetutipus.SelectedItem, regi.Size, regi.Style);
// CS1503: cannot convert from 'object' to 'string'Hiba és javítás
Fordítási hiba (CS1503): a SelectedItem típusa object, a Font viszont szöveget vár. Javítás: cmbBetutipus.SelectedItem.ToString() vagy a cmbBetutipus.Text használata.
2. A hibás betűtípus
A felhasználó beírja a ComboBoxba, hogy „Aral”, és a program nem a vártnak megfelelően működik. A Ok és javítás
DropDownStyle értéke DropDown, ezért szabadon be lehet írni szöveget. Állítsd DropDownList értékre, így csak a listából lehet választani.
3. NullReferenceException
string csalad = cmbBetutipus.SelectedItem.ToString();Hiba és javítás
Futás közbeni hiba (NullReferenceException), ha nincs kiválasztott elem, mert a SelectedItem ilyenkor null. Javítás: előbb ellenőrizd az if (cmbBetutipus.SelectedItem != null) feltétellel.
4. Üres méret, FormatException
float meret = float.Parse(cmbMeret.Text);Hiba és javítás
Futás közbeni hiba (FormatException), ha a szöveg üres vagy nem szám. A Parse hibával áll meg, a TryParse viszont false értéket ad vissza, ezért ellenőrizhető. Használd a float.TryParse() metódust.
5. Elveszett a félkövér
rtbDokumentum.SelectionFont = new Font(regi.FontFamily, meret);Hiba és javítás
Rossz működés: a stílus (félkövér, dőlt, aláhúzott) elvész, mert nem adtuk át. Javítás: new Font(regi.FontFamily, meret, regi.Style).
Mini projekt: a MiniWord formázó sávja
Add hozzá a két ComboBoxot a MiniWordhöz. A két eseménykezelő kódját a leckében már megírtad. Összefoglalva, a formázó sáv így áll össze:
StilusValt() metódusa.Mit tegyél ide: a kész MiniWord formázó sáv és egy dokumentum, amelyben van félkövér, dőlt, aláhúzott, különböző méretű és különböző betűtípusú szöveg is.Javasolt fájlnév: winforms-2-5-miniword-formazva.webp · Alt szöveg: A MiniWord formázó sávja és egy többféle formázású dokumentum
Az újranyitási teszt: formázz meg néhány szót különböző betűtípusra és méretre, mentsd el RTF fájlként, zárd be a programot, majd nyisd meg újra. A formázásnak meg kell maradnia.
Önálló gyakorlófeladatok
Először készíts saját megoldást. A lenyitható rész csak ellenőrzéshez van.
1. Új elemek
Vegyél fel egy ötödik betűtípust (például Az Georgia) és egy új méretet (például 36) a listákba.Egy lehetséges megoldás
Items tulajdonság szerkesztőjében add hozzá az új sorokat, vagy kódból: cmbBetutipus.Items.Add("Georgia"); és cmbMeret.Items.Add("36");. A kódon nem kell változtatnod, mert az eseménykezelő az aktuális választást olvassa.
2. Betűszín
Készíts egy Ugyanazt a mintát használtad a fájlmegnyitásnál: a párbeszédablak eredménye btnSzin gombot, amely egy színválasztó ablakot nyit meg, és a kijelölt szöveget a választott színre állítja. Tegyél az ablakra egy ColorDialog komponenst (Toolbox, Dialogs), a neve legyen cdSzin.Egy lehetséges megoldás
private void btnSzin_Click(object sender, EventArgs e)
{
if (cdSzin.ShowDialog() == DialogResult.OK)
{
rtbDokumentum.SelectionColor = cdSzin.Color;
}
rtbDokumentum.Focus();
}DialogResult.OK, ha a felhasználó a jóváhagyást választotta.
3. Kész betűtípus-választó
Készíts egy A btnBetu gombot, amely a Windows saját betűtípus-választó ablakát nyitja meg (FontDialog komponens, a neve fdBetu), és a választott betűtípust alkalmazza a kijelölt szövegre.Egy lehetséges megoldás
private void btnBetu_Click(object sender, EventArgs e)
{
if (fdBetu.ShowDialog() == DialogResult.OK)
{
rtbDokumentum.SelectionFont = fdBetu.Font;
}
rtbDokumentum.Focus();
}FontDialog a betűtípus, a méret és a stílus kiválasztását is elvégzi helyetted, de a feladathoz a saját legördülő listák kellenek, mert ezzel a Word-szerű felület is megvalósul.
Gyakorlótár: 6 további feladat
Három szinten gyakorolhatsz: alap, közepes és kihívás. A feladatokhoz egy rtbDokumentum RichTextBox, cmbBetutipus és cmbMeret legördülő lista (DropDownList) kell. Csak a próbálkozás után nyisd le a megoldást.
Alap szint
1. Betűméret választása
A A lista szövegét számmá kell alakítani (cmbMeret lista (8, 10, 12, 16, 20, 28) kiválasztott értéke legyen a kijelölt szöveg betűmérete, a betűtípus és a stílus megmaradjon.Megoldás megnyitása
float.TryParse). Az új Font a régi családját és stílusát megtartja, csak a méret változik.private void cmbMeret_SelectedIndexChanged(object sender, EventArgs e)
{
Font regi = rtbDokumentum.SelectionFont;
float meret;
if (regi != null && float.TryParse(cmbMeret.Text, out meret))
{
rtbDokumentum.SelectionFont = new Font(regi.FontFamily, meret, regi.Style);
}
rtbDokumentum.Focus();
}
2. A telepített betűtípusok listája
A A cmbBetutipus lista az ablak betöltésekor telepítse magába a gépen elérhető betűtípusokat.Megoldás megnyitása
FontFamily.Families az összes telepített betűcsalád gyűjteménye. A foreach végigmegy rajta, és minden család nevét felveszi a listába.private void Form1_Load(object sender, EventArgs e)
{
foreach (FontFamily csalad in FontFamily.Families)
{
cmbBetutipus.Items.Add(csalad.Name);
}
}
Közepes szint
3. Méretkorlát
Legyen a Szerkeszthető listánál a felhasználó bármit beírhat, ezért kétszer ellenőrzünk: szám-e, és a megengedett tartományban van-e. Az ellenőrzést egy gomb (itt a cmbMeret szerkeszthető (DropDownStyle: DropDown). A program fogadja el a 6 és 72 közötti számot, más értéknél jelezzen hibát.Megoldás megnyitása
btnMeretBeallit) végzi, amelyet a felhasználó a méret beírása után nyom meg.private void btnMeretBeallit_Click(object sender, EventArgs e)
{
float meret;
if (!float.TryParse(cmbMeret.Text, out meret))
{
MessageBox.Show("A méret számot kell, hogy tartalmazzon!");
return;
}
if (meret < 6 || meret > 72)
{
MessageBox.Show("A méret 6 és 72 közötti legyen!");
return;
}
Font regi = rtbDokumentum.SelectionFont;
if (regi != null)
{
rtbDokumentum.SelectionFont = new Font(regi.FontFamily, meret, regi.Style);
}
}
4. Betűszín választása
A A btnSzin gomb egy színválasztó ablakot (cdSzin ColorDialog) nyisson meg, és a választott színt állítsa a kijelölt szöveg betűszínének.Megoldás megnyitása
ColorDialog komponenst a Toolbox Dialogs csoportjából húzod az ablakra. A Color tulajdonságban van a választott szín. A SelectionColor a kijelölt szöveg betűszíne.private void btnSzin_Click(object sender, EventArgs e)
{
if (cdSzin.ShowDialog() == DialogResult.OK)
{
rtbDokumentum.SelectionColor = cdSzin.Color;
}
rtbDokumentum.Focus();
}
Kihívás szint
5. Nagyítás és kicsinyítés
A A két gomb ugyanazt a metódust használja eltérő lépésértékkel. A btnNo és a btnCsokkent gomb 2 ponttal növelje, illetve csökkentse a kijelölt szöveg méretét. A méret ne menjen 6 alá és 72 fölé.Megoldás megnyitása
Math.Max és a Math.Min a határokon belül tartja az értéket.private void MeretValt(float lepes)
{
Font regi = rtbDokumentum.SelectionFont;
if (regi == null)
{
return;
}
float uj = Math.Max(6, Math.Min(72, regi.Size + lepes));
rtbDokumentum.SelectionFont = new Font(regi.FontFamily, uj, regi.Style);
rtbDokumentum.Focus();
}
private void btnNo_Click(object sender, EventArgs e) { MeretValt(2); }
private void btnCsokkent_Click(object sender, EventArgs e) { MeretValt(-2); }
6. Címsor stílus egy gombbal
A Új btnCimsor gomb a kijelölt szöveget Arial, 20 pontos, félkövér és kék betűsre állítsa egyszerre.Megoldás megnyitása
Font objektumot a család nevével, mérettel és stílussal hozunk létre. A színt a SelectionColor tulajdonság állítja.private void btnCimsor_Click(object sender, EventArgs e)
{
rtbDokumentum.SelectionFont = new Font("Arial", 20, FontStyle.Bold);
rtbDokumentum.SelectionColor = Color.Blue;
rtbDokumentum.Focus();
}
Gyors önellenőrzés
Válaszolj fejben, és csak utána nyisd le a választ. Arra, hogy a felhasználó csak a listából választhasson, és ne írhasson be szabadon szöveget. A A Hogy a korábbi félkövér, dőlt és aláhúzott formázás megmaradjon. Egy bool értéket: 1. Mire való a DropDownStyle = DropDownList?
2. Melyik esemény fut le, ha a felhasználó másik elemet választ?
SelectedIndexChanged.3. Mi a különbség a SelectedItem és a Text között?
SelectedItem a kiválasztott elem object típusként, a Text pedig a megjelenő szöveg string típusként.4. Mi a SelectedIndex értéke, ha nincs kiválasztva elem?
-1.5. Miért kell a stílust is átadni az új Font-nak?
6. Mit ad vissza a float.TryParse()?
true, ha sikerült számmá alakítani a szöveget, különben false. Az eredményt az out paraméterbe teszi.
Mit tudsz már?
- Létrehozol és feltöltesz egy ComboBoxot.
- A DropDownList stílussal biztonságossá teszed a választást.
- Reagálsz a SelectedIndexChanged eseményre.
- A betűtípust és a méretet úgy állítod, hogy a stílus megmaradjon.
- Szöveget alakítasz számmá a TryParse segítségével.
Következő lecke: bekezdések igazítása
A karakterek formázása kész. A következő leckében a bekezdéseket igazítjuk balra, jobbra és középre.






