Grafikus C# – Windows Forms tanfolyam › 2.5 lecke

Windows Forms · 2.5 lecke

Betűtípus és betűméret legördülő listából

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.

  • kb. 60 perc
  • kezdő szint
  • ComboBox és Font
Diáklány C# programot készít laptopon

A lecke végére

  • létrehozol két ComboBox-ot, és feltöltöd őket elemekkel;
  • a DropDownStyle beállításával megakadályozod a hibás beírást;
  • a SelectedIndexChanged eseményre reagálsz;
  • a SelectedItem és a Text tulajdonsá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.

2.4 Kijelölt szöveg formázása →

1.6 ComboBox, TrackBar, DateTimePicker →

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é:

cmbBetutipus(Name): cmbBetutipus
A betűtípus kiválasztására.
cmbMeret(Name): cmbMeret
A betűméret kiválasztására.

A név előtagja cmb, a ComboBox rövidítése, ahogy az rtb a RichTextBoxé.

📷 Képernyőkép helye

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ához

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:

  1. Jelöld ki a cmbBetutipus elemet.
  2. A Properties ablakban keresd meg az Items tulajdonságot, és kattints a mellette lévő (Collection) gombra, vagy a három pontra.
  3. A megnyíló ablakban sorról sorra írd be az elemeket: Arial, Times New Roman, Courier New, Verdana.
  4. Ugyanígy töltsd fel a cmbMeret elemet: 10, 12, 16, 20, 28.
📷 Képernyőkép helye

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:

DropDown (alapértelmezett)A felhasználó a listából választhat, de a szövegmezőbe be is írhat bármit, például „Aral”. Ez hibához vezethet.
DropDownListCsak a listából lehet választani, szabadon beírni nem. Ez a biztonságos megoldás.

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:

SelectedItemA kiválasztott elem. Típusa object, ezért szövegként a ToString() metódussal kell kérni.
TextA ComboBox szövege, vagyis a kiválasztott elem megjelenő szövege. Közvetlenül string.
SelectedIndexA kiválasztott elem sorszáma, 0-tól számozva. Ha nincs kiválasztva elem, értéke -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.

Form1.csC#
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();
}
regi == null || ...SelectedItem == nullKét feltétel "vagy" kapcsolatban: akkor igaz, ha a kijelölés vegyes, vagy nincs kiválasztott elem.
SelectedItem.ToString()A kiválasztott elem szövegként, például "Arial".
new Font(csalad, regi.Size, regi.Style)Új betűtípus: az új család, a régi méret és a régi stílus.
Focus()Visszaadja a kurzort a szövegdoboznak, hogy a felhasználó gépelhessen tovább.
📷 Képernyőkép helye

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.

Form1.csC#
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();
}
float meret;Egy tizedes szám típusú változó, amelyben a kiolvasott szám lesz.
float.TryParse(cmbMeret.Text, out meret)Megpróbálja számmá alakítani a ComboBox szövegét. Ha sikerül, az eredmény a meret változóba kerül.
regi.FontFamilyA régi betűcsalád, vagyis a betűtípus, amelyet megtartunk.
new Font(regi.FontFamily, meret, regi.Style)Új betűtípus: a régi család és stílus, az új méret.

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?

Jóslat ellenőrzése

Üresek, mert nincs kiválasztott elem. A 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?

Jóslat ellenőrzése

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.

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?

Jóslat ellenőrzése

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.

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.

Ok és javítás

A 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:

F, D, A gombokA 2.4 lecke StilusValt() metódusa.
cmbBetutipusBetűtípus legördülő lista, legalább 3 elemmel.
cmbMeretBetűméret legördülő lista, legalább 3 elemmel.
rtbDokumentum.Focus()Minden módosítás után visszaadja a kurzort a szövegdoboznak.
📷 Képernyőkép helye

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 Georgia) és egy új méretet (például 36) a listákba.

Egy lehetséges megoldás

Az 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 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();
}

Ugyanazt a mintát használtad a fájlmegnyitásnál: a párbeszédablak eredménye 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 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();
}

A 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 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

A lista szövegét számmá kell alakítani (float.TryParse). Az új Font a régi családját és stílusát megtartja, csak a méret változik.

Form1.csC#
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 cmbBetutipus lista az ablak betöltésekor telepítse magába a gépen elérhető betűtípusokat.

Megoldás megnyitása

A 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.

Form1.csC#
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 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

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 btnMeretBeallit) végzi, amelyet a felhasználó a méret beírása után nyom meg.

Form1.csC#
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 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

A 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.

Form1.csC#
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 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

A két gomb ugyanazt a metódust használja eltérő lépésértékkel. A Math.Max és a Math.Min a határokon belül tartja az értéket.

Form1.csC#
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 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

Új Font objektumot a család nevével, mérettel és stílussal hozunk létre. A színt a SelectionColor tulajdonság állítja.

Form1.csC#
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.

1. Mire való a DropDownStyle = DropDownList?

Arra, hogy a felhasználó csak a listából választhasson, és ne írhasson be szabadon szöveget.

2. Melyik esemény fut le, ha a felhasználó másik elemet választ?

A SelectedIndexChanged.

3. Mi a különbség a SelectedItem és a Text között?

A 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?

Hogy a korábbi félkövér, dőlt és aláhúzott formázás megmaradjon.

6. Mit ad vissza a float.TryParse()?

Egy bool értéket: 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.