WPF Alapok – 2. rész

MEGOSZTÁS

Ha tetszett a cikk, akkor nyugodtan oszd meg ismerőseiddel, valószínű ők is örülni fognak neki.

Sokat gondolkodtam, hogy miként is kellene belefogni a WPF tárgyalásába. Aztán legvégül amellett döntöttem, hogy először megtanuljuk a WPF kódot integrálni Windows Forms-ba, mivel úgyis Windows Forms fejlesztőknek szánom elsősorban e cikksorozatot. Ezen cikkben egyenlőre csak a Visual Studio WPF szerkesztőjével ismerkedünk.

Szerencsére a .NET fejlesztők gondoltak arra, hogy a WPF-hez és a Windows Forms-hoz biztosítsanak összeházasító technológiákat. Ez azért remek, mert meglévő Windows Forms alkalmazásunkat WPF vezérlőkkel dobhatjuk fel, anélkül, hogy az egészet WPF-re kellene átírni.

A technológia igen egyszerűen működik:

  1. Létre kell hoznunk egy WPF User controll-t, ami a WPF részt fogja tartalmazni.
  2. A Windows Forms alkalmazásunkban el kell helyeznünk egy WPF element host controlt, amibe betöltjük az előzőleg elkészült WPF User controllunkat.

A User Control elkészítése:

A Solution Explorer-ben, a projekten jobb kattintva előjövő menöből válasszuk a az Add->New Item… menüpontot.

 

Származási hely: WPF Alapok 2

 

Majd a megjelenő new Item ablakban a WPF kategórián belüli egyetlen lehetőséget választjuk, ami a User Control. Jelenleg csak egy elem található itt meg, mivel a projektünk Windows Forms technológiára épül. WPF alkalmazások esetén sokkal több választási lehetőség van itt.

 

Származási hely: WPF Alapok 2

 

Ezután egy új lapon meg fogy nyílni a vezérlőnk XAML szerkesztője

 

Származási hely: WPF Alapok 2

 

Ezen szerkesztő alapesetben 2 részre osztott: megjelenés és alatta a XAML kód, ami jelenleg igencsak egyszerűen néz ki (még). Mint látható alapértelmezésben ez a sablon Grid fő elemmel dolgozik. Mivel a XAML XML alapú leíró nyelv, ezért egy darab fő csomópont lehet benne. (Root Node) Ide általában elrendezés vezérlőket szoktak helyezni, de akármilyen vezérlő helyezhető ide. Azonban, ha nem elrendezés vezérlőt teszünk be, akkor csak egy vezérlőt tartalmazhat az egész UserControl, aminek nem sok értelme van.

A Főbb elrendezés vezérlők:

  •  Grid
    A HTML táblázatokhoz hasonló elven működik. Tetszőleges számú oszlopra és sorra osztható. Az elhelyezett vezérlők kitöltik a nekik fenntartott területet, ha nem használunk margókat.
  • StackPanel
    Elemek egymás alá vagy mellé helyezett módon megjelenítése több sorba törés nélkül. Egymás alá elrendezésnél a behelyezett vezérlőknek csak a magasságát kell megadni, mivel a szélesség alkalmazkodik a panel szélességéhez. Egymás mellé elrendezésnél, meg csak a szélességet kell megadni.
  • WrapPanel
    Elemek egymás mellet való megjelenítése. Ha egy elem nem fér ki a sorba a következőbe kerül automatikusan. Az ilyen vezérlőben tárolt elemek szélességét és magasságát kötelező megadni.
  • DockPanel
    Dokkolható elem kialakítást tesz lehetővé, hasonló a Windows Forms-hoz, ám önmagában nem sokat ér.
  • Canvas
    Pixel pontosan megadott elem elrendezést tesz lehetővé, ideális fix méretű alkalmazásokhoz
  • TabControl
    Lapok fülekkel. Minden egyes lap egyetlen egy elemet képes megjeleníteni. Azonban ha elemnek egy megjelenítőt teszünk be, akkor bővíthető
  • ScrollView
    Fix méretű scroll ablak, amellyel a képernyőre ki nem férő elemeket lehet megjeleníteni. Szintén csak egy elemet képes kezelni, de ez is bővíthető, mint a TabControl.

Az utolsó kettő vezérlő elem nem tartozik szorosan a „klasszikus” elrendezés vezérlők közé, mivel ezen elemek tartalomként egyetlen egy elemet képesek kezelni. Azonban ez az egyetlen elem lehet elrendezés vezérlő is, amibe több vezérlő helyezhető.

Itt megemlíteném a WPF nagy előnyét, ami az, hogy azon vezérlők, amelyek rendelkeznek Content (tartalom) tulajdonsággal, azok tartalomként bármilyen WPF elemet képesek kezelni, tehát pl. egy lista ablakba tehetünk képeket egyszerűen, anélkül, hogy több tíz sornyi C# kódot kellene megírnunk.

XAML nyelvtan

A nyelv, mint említettem XML alapú, így aki már dolgozott XML adattal, annak nem tudok sajna újat mondani. Főbb nyelvtani szabályok:

  • Az egyes osztályok XML Nodeként vannak tárolva.
  • A Node-ok itt .net framework osztályokat reprezentálnak
  • Minden Node-nak rendelkeznie kell egy nyitó és záró párral. Ha az osztályunk neve XY, akkor a nyitó párunk: , és a záró párunk pedig
  • Amennyiben a nyitó és záró pár között nincs további node, akkor a nyitó pár önmagában lehet záró pár is. Ekkor sima > helyett /> jelekkel kell befejezni.
  • Az egyes Node-ok tulajdonságai a következő formában adhatóak meg a nyitó tagon belül:
  • Amennyiben a tulajdonság összetett, vagy egy osztály, akkor a következő formában is megadható:

    <összetetttulajdonság/>

A minta User control

Hogy ne vágjuk a fejszénket egyelőre nagydologba, csak egy szimpla Hello World alkalmazást készítünk el, ami abból fog állni, hogy a vezérlőnkben elhelyezünk egy Gombot, valamint egy Labelt. A gomb megnyomására a Label-ben megfog jelenni a klasszikus Hello World szöveg.

Az ehhez tartozó XAML kód így fog kinézni, Grid vezérlőt használva:

http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">

    
        
        
    

    

MEGOSZTÁS

Ha tetszett a cikk, akkor nyugodtan oszd meg ismerőseiddel, valószínű ők is örülni fognak neki.

HOZZÁSZÓLÁS

Ha nem hagy nyugodni az, amit a cikkben olvastál, akkor nyugodtan írd meg kérdésed vagy észrevételed kommentbe. Így szerzőnk könnyen tud neked válaszolni.

Vélemény, hozzászólás?