WPF-es alkalmazás készítése

A .NET 3.0 keretkörnyezetben jelent meg a WPF (Windows Presentation Foundation). Segítségével modern megjelenést tudunk készíteni az alkalmazásainknak, elhagyhatjuk a GDI-t. 

Nem fogjuk részletesen tárgyalni a WPF felépítését, újdonságait, hiszen ezek megtalálhatók az interneten, ezért inkább kisebb példákat, érdekességeket fogunk bemutatni a cikkeinkben.

Szakítsunk most a Windows Form-os megjelenítéssel, készítsünk el egy WPF-es alkalmazást, de olyat, amely még véletlenül sem hasonlít a Form-os megjelenésre.

Indítsuk el a Visual Studio 2012-t, majd a File / New project menüpont után válasszuk ki a WPF alkalmazást. A projekt neve legyen "WpfMegjelenes1".

Válasszunk ki az interneten egy háttérnélküli képet és másoljuk be a projektünk "Kepek" mappájába (1. ábra).

1. ábra   A projektünk felépítése
 

Indítsuk el az alkalmazásunkat az F5 megnyomásával. Ekkor egy egyszerű, üres form-ot látunk (2. ábra). 

2. ábra   Futási eredmény
 

Cseréljük le most ezt a megjelenést, legyen az a háttérnélküli kép a form-unk helyett, amely már a projektünk "Kepek" mappájában van.

Először egészítsük ki a MainWindow.xaml file tartalmát a következő ábra segítségével. A kijelölt sorokat írjuk be a MainWindow.xaml file-ba.

3. ábra   A kiegészített MainWindow.xaml file
 

Ezekkel a sorokkal engedélyeztük a transparens megjelenítést és az alkalmazásunk a képernyő közepén fog megjelenni, amikor elindítjuk.

Igen ám, de mivel az átláthatóságot engedélyeztük, hiába indítjuk el debug módban az alkalmazásunkat, nem fogjuk látni a desktop-on. Tegyük láthatóvá úgy, hogy vigyünk fel a felületünkre egy képet (Image) és egy nyomógombot (Button). Ha rátesszük a felületünkre a design nézetre, akkor a következő xaml kódot kapjuk (4. ábra).

4. ábra   Ismét módosítottuk a MainWindow.xaml file tartalmát
 

Ekkor a design nézetben a következő megjelenés látható (5. ábra)

5. ábra   Design nézete az xaml file-nak
 

Ha most futtatjuk debug módban az alkalmazásunkat, akkor megjelenik már a kép a nyomógombbal, de nem tudjuk mozgatni az egérrel, illetve a nyomógombra is hiába kattintunk.
Egészítsük tehát ki az xaml  kódunkat, vegyünk fel eseményeket az xaml kódunkban (6. ábra)! Szeretnénk a képet a bal egérgomb lenyomásával mozgatni, illetve azt is meg fogjuk valósítani, hogy amikor rákattintunk a nyomógombra, akkor kilépjünk az alkalmazásunkból.

6. ábra   Események a MainWindow.xaml file-ban
 

Az adott eseményekhez tartozó kódok a 7. ábrán láthatók. Írjuk be ezeket a MainWindow.xaml.cs file-ba.

7. ábra   A kiegészített MainWindow.xaml.cs file
 

Indítsuk el újra az alkalmazásunkat debug módban. Megjelenik a képünk a nyomógombbal (8. ábra), és az alkamazásunk az egérrel mozgatható, illetve a nyomógomb megnyomásával bezárjuk az alkalmazásunk működését.

8. ábra   Az alkalmazás futási eredménye