Grafikus C# – Windows Forms tanfolyam › 15.1 lecke Továbbtanulás · 15.1 lecke · WPF A Windows Forms tudásod nem zsákutca: .NET asztali alkalmazást tudsz készíteni, és ezzel egy ajtót nyitottál a többi felülettechnológiához is. Az első természetes továbblépés a WPF (Windows Presentation Foundation): ugyanaz a C# nyelv, ugyanaz a .NET, de a felület leírása és szemlélete más. Ebben a leckében összehasonlítjuk a két keretrendszert: hogyan épül fel a felület (Designer-kód és XAML), hogyan működik az elrendezés (pixel-pozíció és Grid), hogyan kezelik a nagyítást (DPI), hogyan változtatható a kinézet (stílus, sablon), mi az adatkötés, és mikor melyiket érdemes választani. Ugyanazt a kis feladatot megnézzük mindkét módon, majd te is elkészíted WPF-ben.Windows Forms és WPF összehasonlítása

A lecke végére
- megmondod, mi a WPF, és miben különbözik a Windows Formstól;
- összehasonlítod a felület leírását (Designer-kód és XAML);
- érted az elrendezés különbségét (pixel-pozíció,
Anchor/DockésGrid,StackPanel); - tudod, mit jelent a DPI-független megjelenítés, a stílus és a sablon;
- ismered az adatkötés alapgondolatát;
- megalapozottan választasz a két technológia között, és tudod, hogyan lehet keverni őket;
- elkészíted ugyanazt a kis programot WPF-ben is.
Mielőtt elkezded
Ehhez a leckéhez a Windows Forms tanfolyam alapjai (események, vezérlők, elrendezés, osztályok) szükségesek. A WPF-hez a Visual Studióban a .NET desktop development munkaterhelés kell.
Két keretrendszer, közös alap
Windows Forms (2002)
A klasszikus asztali felület: a vezérlők (Button, TextBox) a Windows beépített elemeire (GDI+) épülnek. A felületet a Designer állítja össze (Form1.Designer.cs generált C# kód), a logika az eseménykezelőkben él. Gyors tanulni, gyors elkészíteni egyszerű, adatközpontú programokat.
WPF (2006)
A modern asztali felület: a megjelenítés a grafikus kártyára (DirectX) épül, minden vektoros és méretezhető. A felületet XAML (XML alapú leíró nyelv) írja le, a mögötte lévő C# kód a code-behind. Központi elemei: az elrendezés-panelek, a stílusok és sablonok, az adatkötés és az animáció.
net8.0-windows): a Windows Forms stabil, kiforrott, kis újdonsággal; a WPF aktívabban bővül, de szintén kiforrott. Egyik sem „halott”: rengeteg meglévő program használja mindkettőt.Összehasonlítás szempontok szerint
| Szempont | Windows Forms | WPF |
|---|---|---|
| A felület leírása | Generált C# kód (Designer.cs), vezérlők tulajdonságai. | XAML (XML): olvasható, kézzel is szerkeszthető, verziókezelhető. |
| Elrendezés | Pixel-koordináták, Anchor, Dock, TableLayoutPanel. | Panelek: Grid, StackPanel, DockPanel, WrapPanel: az elemek méretét a konténer szabályozza. |
| Nagyítás (DPI) | Pixel alapú: nagy DPI-n külön kezelést igényel (AutoScaleMode), elmosódhat. | DPI-független egységek (1/96 hüvelyk): vektoros, éles bármilyen nagyításon. |
| Kinézet testreszabása | Tulajdonságok (szín, betű); egyedi vezérlő rajzolása (OnPaint), munkaigényes. | Stílus és sablon: bármelyik vezérlő megjelenése újradefiniálható kód nélkül; témák. |
| Adatkötés | Van (DataSource, BindingSource), de korlátozott; a legtöbb kód kézzel tölti a vezérlőket. | Alapvető és erős ({Binding}): a felület és az adat automatikusan szinkronban van. |
| Grafika, animáció | GDI+ (Paint, Graphics): kézi rajzolás. | Vektorgrafika, átlátszóság, transzformáció, beépített animáció. |
| Tervezőeszköz | Kiforrott Designer: húzd-és-ejtsd, gyors. | XAML-szerkesztő és Designer; sokan kézzel írják a XAML-t. |
| Logika és felület szétválasztása | Lehetséges (12. fejezet), de a Form csábít a keveredésre. | A kötés és a MVVM minta (15.3 lecke) természetesen támogatja. |
| Tanulási görbe | Gyors kezdés, egyszerű modell. | Több új fogalom (XAML, panelek, kötés, sablon): lassabb kezdés, nagyobb mozgástér. |
| Teljesítmény, erőforrás | Könnyű, kevés erőforrás. | Nehezebb, de nagy listákhoz virtualizálás. |
| Meglévő kód és bővítmények | Hatalmas kódállomány, rengeteg harmadik féltől származó vezérlő. | Szintén sok, modern vezérlőkkel és témákkal. |
lbl.Text = ...). WPF-ben a konténer elrendezi az elemeket, és a felület az adatból következik (kötés): kevesebb „beállító” kód.Jósolj!
Ugyanazt a programot 100%-os és 200%-os képernyő-nagyításon nézed. Melyik technológiánál várod, hogy a felület mindkét esetben arányosan, élesen jelenik meg külön beállítások nélkül?
Jóslat ellenőrzése
A WPF: a DPI-független egységek és a vektoros megjelenítés miatt a felület automatikusan méreteződik és éles marad. A Windows Forms pixel alapú: a jó nagy-DPI viselkedéshez AutoScaleMode, AutoSize és a manifest beállításai kellenek (13.8 lecke), és a szöveg és a kép elmosódhat.
Ugyanaz a feladat mindkét módon
A feladat: egy ablak, amelyben a felhasználó beír egy pontszámot (0–100), megnyomja a gombot, és a program kiírja a jegyet (1–5).
// A felület (Designer.cs): a vezérlők pozíciója pixelben
txtPont = new TextBox { Location = new Point(20, 20), Size = new Size(120, 27) };
btnSzamol = new Button { Text = "Számol", Location = new Point(20, 60), Size = new Size(120, 32) };
lblJegy = new Label { Location = new Point(20, 105), AutoSize = true };
btnSzamol.Click += btnSzamol_Click;
// A logika (Form1.cs): az eseménykezelő olvassa a mezőt, és ÍRJA a címkét
private void btnSzamol_Click(object sender, EventArgs e)
{
int pont;
if (!int.TryParse(txtPont.Text, out pont) || pont < 0 || pont > 100) { lblJegy.Text = "0 és 100 közötti számot adj meg!"; return; }
lblJegy.Text = "Jegy: " + Jegy(pont);
}<Window x:Class="JegySzamolo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Jegyszámoló" Height="220" Width="320">
<!-- A StackPanel egymás alá rendezi az elemeket: nincs X, Y pozíció -->
<StackPanel Margin="20">
<TextBox x:Name="txtPont" Margin="0,0,0,10"/>
<Button Content="Számol" Click="Szamol_Click" Padding="8,4"/>
<TextBlock x:Name="lblJegy" Margin="0,12,0,0" FontSize="16"/>
</StackPanel>
</Window>public partial class MainWindow : Window
{
public MainWindow() { InitializeComponent(); }
private void Szamol_Click(object sender, RoutedEventArgs e) // RoutedEventArgs, nem EventArgs
{
int pont;
if (!int.TryParse(txtPont.Text, out pont) || pont < 0 || pont > 100) { lblJegy.Text = "0 és 100 közötti számot adj meg!"; return; }
lblJegy.Text = "Jegy: " + Jegy.Szamol(pont); // a 12.7 lecke logikai osztálya: ugyanaz!
}
}Jegy), az eseménykezelés és a C# szintaxis. A 12.7 lecke logikai osztálya (SzobaSzamolo, Jegy) változtatás nélkül használható mindkét felületen: ezért érdemes a logikát felülettől függetlenül írni.Location és Size: a StackPanel rendezi az elemeket; a címke neve TextBlock (és Text); a gombnak Content tulajdonsága van (nem Text), mert bármi lehet benne (kép, panel); az eseménykezelő paramétere RoutedEventArgs.StackPanel és a Grid automatikusan igazítja az elemeket; Windows Formsban ehhez Anchor/Dock kell, és sok vezérlőnél kézi igazítás.x:Name a WPF-ben azt adja, mint a Windows Forms Name tulajdonsága: a code-behindban elérhető ezen a néven (txtPont, lblJegy).Jósolj!
A WPF-es ablak szélességét a felhasználó 320-ról 800 pixelre húzza. Mi történik a TextBox szélességével a fenti XAML-ben?
Jóslat ellenőrzése
A StackPanel alapból kitölti a szélességet a függőleges irányú elrendezésben: a TextBox és a gomb az ablakkal együtt szélesedik. Windows Formsban a vezérlő fix szélességű marad (a Size(120, 27)), hacsak Anchor-t nem állítasz.
Melyiket válaszd? És lehet keverni?
Windows Forms, ha...
- gyors, egyszerű, űrlap-alapú programot készítesz (adatbevitel, nyilvántartás, belső eszköz);
- meglévő Windows Forms programot tartasz karban;
- a csapat vagy a környezet erre épül (iskola, régi gépek);
- kevés erőforrást igénylő, egyszerű felület kell;
- még tanulod az asztali programozást: egyszerűbb a belépő.
WPF, ha...
- igényes, testreszabható megjelenés kell (témák, sablonok, animáció);
- sok adatot kell megjeleníteni, és a felületnek követnie kell az adatot (kötés);
- nagy-DPI és vektoros grafika fontos;
- a felület és a logika tiszta szétválasztása a cél (MVVM, tesztelhetőség);
- hosszú életű, sokat bővülő alkalmazást építesz.
WindowsFormsHost egy Windows Forms vezérlőt tesz WPF ablakba, az ElementHost pedig WPF vezérlőt Windows Forms ablakba. Így fokozatosan átállhatsz, és meglévő vezérlőket megtarthatsz.Jósolj!
Van egy 50 000 soros Windows Forms programod, amelyet sokan használnak. Egy új, igényes diagram-ablakot szeretnél beletenni WPF-ben. Újra kell írni az egész programot?
Jóslat ellenőrzése
Nem: a WPF ablak vagy vezérlő beágyazható a meglévő Windows Forms programba (ElementHost), vagy egy külön WPF ablakot is megnyithatsz a Formból. A két technológia ugyanabban a projektben, ugyanabban a folyamatban fut (a projektnek mindkettőt engedélyeznie kell: UseWindowsForms és UseWPF).
Mit tegyél ide: ugyanaz a jegyszámoló Windows Formsban és WPF-ben, egymás mellett, átméretezve.Javasolt fájlnév: winforms-15-1-osszehasonlitas.webp · Alt szöveg: A jegyszámoló Windows Formsban és WPF-ben
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. Nincs Text tulajdonság a gombon
btnSzamol.Text = "Számol"; // WPF-ben: CS1061Hiba és javítás
A WPF Button tulajdonsága a Content (bármi lehet benne). btnSzamol.Content = "Számol";
2. A Click kezelő paramétere hibás
private void Szamol_Click(object sender, EventArgs e) // XAML: Click="Szamol_Click" → fordítási hibaHiba és javítás
A WPF eseményei RoutedEventArgs paramétert használnak (az események „továbbhaladnak” a vizuális fában).
3. Az elemek egymásra csúsznak
Két vezérlőt tettél egy A Grid-be, és az egyik a másikra kerül.Ok és javítás
Grid sorai és oszlopai nélkül minden elem ugyanabba a cellába kerül. Adj Grid.Row/Grid.Column értéket, vagy használj StackPanel-t.
4. Kicsi a felület nagy képernyőn is
A Windows Forms programod 4K monitoron apró és elmosódott. Pixel alapú megjelenítés és hiányzó DPI-beállítás (Ok és javítás
AutoScaleMode, manifest PerMonitorV2). WPF-ben ez alapból DPI-független.
5. A projekt nem ismeri a WPF-et
A A Window osztályt nem találja a Windows Forms projekt.Ok és javítás
.csproj-ban <UseWPF>true</UseWPF> kell (a Windows Forms-hoz UseWindowsForms); mindkettő bekapcsolható egyszerre, névütközésre ügyelve (System.Windows.Forms.Button vagy System.Windows.Controls.Button).
6. Átviszed a logikát, de a felületi kódot is
A logikai osztály Nem volt felülettől független (12.7 lecke). Vedd ki a felületi hívásokat: paramétereket kapjon, és értéket adjon vissza.MessageBox-ot hív és vezérlőt ér el: nem használható a másik felületen.Ok és javítás
Mini projekt: Ugyanaz kétszer
Készíts egy kis programot (jegyszámoló vagy a 12.7 hitelkalkulátor) két felülettel, közös logikával, és hasonlítsd össze a két technológiát:
- Solution:
Kalkulator.slnhárom projekttel:Kalkulator.Core(osztálykönyvtár:Jegyeklogikai osztály, felületfüggetlen),Kalkulator.WinForms(Windows Forms),Kalkulator.Wpf(WPF:dotnet new wpfvagy a Visual Studio WPF Application sablonja). A két felület a Core-ra hivatkozik. - Core: egy
Jegyek.Szamol(int pont)metódus (kivétel, ha a pont 0–100 kívül); egységteszt a határokra (13.5, 13.8 lecke). - Windows Forms felület:
txtPont,btnSzamol,lblJegy;Anchor/Dockbeállítással, hogy átméretezéskor is jó legyen. - WPF felület:
Gridelrendezéssel (két sor, két oszlop), a leckebeliStackPanelhelyett; a gomb stílusa egyWindow.ResourcesStyle-ban. - Mérés és összehasonlítás: tölts ki egy táblázatot: szempont, Windows Forms, WPF. Szempontok: a felület-leírás sorainak száma (XAML vagy Designer), az átméretezés viselkedése, a nagyítás (Windows beállítások: 100% és 200%), a betűméret-változtatás hatása, a gomb kinézetének megváltoztatása (mennyi munka), az indulási idő, a
binmappa mérete. - Nagyítás-próba: állítsd a Windows képernyő-nagyítását 100%-ról 200%-ra (Beállítások → Rendszer → Megjelenítés), és indítsd újra mindkét programot; fotózd/mentsd a kinézetet.
- Kinézet-próba: változtasd meg a gombok kinézetét: Windows Formsban a
FlatStyleés a színek tulajdonságokkal; WPF-ben egyetlenStylemódosításával: jegyezd fel, melyik volt egyszerűbb, és hány helyen kellett módosítani. - Átjárhatóság (extra): a WPF programból nyiss meg egy Windows Forms ablakot (
UseWindowsFormsbekapcsolva), vagy fordítva; jegyezd fel a lépéseket. - Következtetés: írj 5–6 mondatot: melyiket választanád erre a programra, és miért; mit választanál egy 20 ablakos, sok adattáblás vállalati programra.
Megoldás megnyitása (próbáld ki előbb önállóan!)
// ---- Kalkulator.Core/Jegyek.cs (felületfüggetlen) ----
public static class Jegyek
{
public static int Szamol(int pont)
{
if (pont < 0 || pont > 100) { throw new ArgumentOutOfRangeException("pont", "A pontszám 0 és 100 között lehet."); }
if (pont >= 85) { return 5; }
if (pont >= 70) { return 4; }
if (pont >= 55) { return 3; }
if (pont >= 40) { return 2; }
return 1;
}
}
// ---- Kalkulator.Wpf/MainWindow.xaml ----
<Window x:Class="Kalkulator.Wpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Jegyszámoló (WPF)" Height="220" Width="360" MinWidth="280">
<Window.Resources>
<!-- egyetlen stílus: minden gomb így néz ki -->
<Style TargetType="Button">
<Setter Property="Background" Value="#6840A5"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="12,6"/>
</Style>
</Window.Resources>
<Grid Margin="16">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="txtPont" Grid.Row="0" Grid.Column="0" Margin="0,0,8,8" VerticalContentAlignment="Center"/>
<Button Grid.Row="0" Grid.Column="1" Content="Számol" Margin="0,0,0,8" Click="Szamol_Click" IsDefault="True"/>
<TextBlock x:Name="lblJegy" Grid.Row="1" Grid.ColumnSpan="2" FontSize="18"/>
</Grid>
</Window>
// ---- MainWindow.xaml.cs ----
private void Szamol_Click(object sender, RoutedEventArgs e)
{
int pont;
if (!int.TryParse(txtPont.Text, out pont)) { lblJegy.Text = "Számot adj meg!"; return; }
try { lblJegy.Text = "Jegy: " + Jegyek.Szamol(pont); }
catch (ArgumentOutOfRangeException ex) { lblJegy.Text = ex.Message; }
}Várt tapasztalat: a WPF-es ablak átméretezéskor a mező kitölti a szabad helyet (* oszlop), 200%-os nagyításon is éles és arányos; a gomb kinézete egyetlen Style módosításával változik minden gombon; a Windows Forms-os változatnál a nagyítás miatt a felület kicsi/elmosódott lehet, és a kinézethez vezérlőnként tulajdonságot kell állítani. A méréseid és benyomásaid gépfüggők, a saját tapasztalataidat írd a táblázatba.
Mit tegyél ide: a két program 100% és 200% nagyításon, és a kitöltött összehasonlító táblázat.Javasolt fájlnév: winforms-15-1-kesz.webp · Alt szöveg: A Windows Forms és WPF változat összehasonlítása
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. Elrendezés átírása
Írd át egy Windows Forms ablak elrendezését (két címke, két mező, két gomb) WPF Két oszlop (Grid-re.Egy lehetséges megoldás
Auto a címkéknek, * a mezőknek), három sor (Auto); a címke Grid.Column="0", a mező Grid.Column="1"; a gombok egy StackPanel Orientation="Horizontal"-ban a harmadik sorban, Grid.ColumnSpan="2"-vel.
2. Közös logika
Vedd ki egy korábbi Windows Forms programod számítási részét osztálykönyvtárba, és használd egy WPF ablakból is. A logika legyen felülettől független (paraméterek be, érték ki, kivétel hiba esetén: 12.7 lecke). A WPF projekt a Core projektre hivatkozik; az eredmény megjelenítése a Egy lehetséges megoldás
TextBlock.Text.
3. Régi és új
Írj háromsoros érvet a Windows Forms mellett és háromsorosat a WPF mellett egy általad ismert program (például a diáknyilvántartó) átírására. Windows Forms mellett: kész, működik, tesztelt; gyors karbantartás; kevés felületi változás várható. WPF mellett: sokat változó, testreszabható kinézet; adattáblák és kötés; jobb nagyítás. A döntés a bővítési terveken múlik.Egy lehetséges megoldás
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. Mi a XAML?
Fogalmazd meg egy mondatban. XML alapú leíró nyelv a WPF felületének leírására.Megoldás megnyitása
2. Közös
Mi közös a két keretrendszerben? A .NET, a C# nyelv, az eseménykezelés, a logika, a hibakezelés és a kiadás; mindkettő Windows asztali felület.Megoldás megnyitása
Közepes szint
3. Gomb szövege
Hogyan állítod be a gomb szövegét WPF-ben? A Megoldás megnyitása
Content tulajdonsággal (XAML-ben Content="Számol"); nem Text.
4. DPI
Miért kezeli jobban a WPF a nagyítást? DPI-független egységeket (1/96 hüvelyk) és vektoros megjelenítést használ; a Windows Forms pixel alapú.Megoldás megnyitása
Kihívás szint
5. Panelek
Melyik panelt használnád: (a) függőleges lista; (b) űrlap címkékkel és mezőkkel; (c) tetején menü, alján állapotsor, közepén tartalom? (a) Megoldás megnyitása
StackPanel; (b) Grid; (c) DockPanel.
6. Hibrid
Hogyan teszel WPF vezérlőt Windows Forms ablakba? Az Megoldás megnyitása
ElementHost vezérlővel (a Child tulajdonságába a WPF elem); a projektben a UseWPF és a UseWindowsForms is bekapcsolva.
Gyors önellenőrzés
Válaszolj fejben, és csak utána nyisd le a választ. A Windows Presentation Foundation: modern, vektoros, XAML alapú asztali UI-keretrendszer. A XAML-hez tartozó C# fájl ( Egymás mellé vagy alá rendezi az elemeit; az elemek mérete a konténertől függ. Tulajdonság-értékek gyűjteménye, amelyet több vezérlőre egyszerre alkalmazhatsz. A felület a nagyítástól függetlenül arányos és éles. Több felületen (Windows Forms, WPF) újrahasználható, és felület nélkül tesztelhető. Igen: 1. Mi a WPF?
2. Mi a code-behind?
MainWindow.xaml.cs), az eseménykezelőkkel.3. Mi a StackPanel?
4. Mi a stílus?
5. Mit jelent a DPI-függetlenség?
6. Mi a logika külön osztálya haszna?
7. Lehet-e keverni a kettőt?
WindowsFormsHost és ElementHost segítségével.
Mit tudsz már?
- Összehasonlítod a Windows Formst és a WPF-et szempontok szerint.
- Érted az XAML, a panelek, a DPI-függetlenség, a stílus és az adatkötés alapgondolatát.
- A logikát felülettől függetlenül írod, így két felület is használhatja.
- Megalapozottan választasz, és tudod, hogyan keverhető a két technológia.
Következő lecke: Bevezetés az XAML-be
A XAML nyelv alapjai: elemek, tulajdonságok, elrendezés, erőforrások és stílusok.



