290 lines
12 KiB
Plaintext
290 lines
12 KiB
Plaintext
Mi az a wpf?
|
|
|
|
A windows presentation foundation a windows forms utódnak tekinthető asztali alkalmazások fejlesztése terén.
|
|
Bár a wpf számos téren eltér a tradicionálisnak tekinthető windows forms hoz képest, mégis több olyan elvre támaszkodik, amely már meglévő asztali keretrendszerek alapját képezi.
|
|
Az egyyik legnagyobb és egyben legfontosabb különbség, hogy az alkalmazás megjelenéséért felelős kód elkülönül az alkalmazás funkcióit leíró kódtol.
|
|
|
|
Szakítva a Winformos hagyományokkal, a WPF alapjául szolgáló grafikus technológia a GDI/GDI+ helyett már a DirectX.
|
|
A directx közvetlenül elérésének köszönhetően tetszőleges típusú felhasználói felületet hozhatunk létre.
|
|
Tervezhető akár komplex háromdimenziós grafika, de üzleti alkalmazások esetében is kiaknázhatók a gazdag grafikai hatások.
|
|
A hardveres gyorsításnak köszönhetően a DirectX a grafikai rendelés során amennyire lehetséges tehermentesíteni ....
|
|
|
|
WPF nek a grafikai elemei már nem raszteresek, hanem vektoralapúak.
|
|
Ebből következően az egyes elemek tetszőlegesen átméretezhetőek.
|
|
További nagy előnye hogy a vektor alapú képek kevesebb helyet foglalnak a raszteres elemekhez képest.
|
|
ugyanakkor meg kell említeni, hogy a wpf továbbra is támogatja a raszter grafikát.
|
|
|
|
wpf jellemzői
|
|
dokumentumok és nyomtatás
|
|
biztonság, hozzáférhetőség és lokalizáció
|
|
együttműködést kínál a következővel windows űrlaptervező
|
|
a direct3d grafikus alkalmazásokban használják, ahol a teljesítmány fontos
|
|
GPU-t használ megjelenítéshez
|
|
a vektor alapú grafika lehetővé teszi az átméretezést minőségromlás nélkül
|
|
A WPF támogatja a lebegőpontos logikai pixelrendszert és a 32 bites ARGB színt
|
|
stílusok és vezérlősablonok újradefiniálása
|
|
nemzetközi betűtípusok építése összetett betűtípusokból
|
|
a wpf szövegmegjelenítés segít a cleartype technológia előnyeinek kihazsnálásában
|
|
lehetővé teszi az előre rendelt szöveg gyorsítótárazási technikájának használatát a videómemóriában
|
|
erőforrás alapú megközelítés minden vezérléshez
|
|
a bemutató időzítőit a wpf inicializálja és kezeli
|
|
|
|
A videó és az animáció közötti kapcsolat szintén támogatott
|
|
a wpfben a stílus olyan tulajdonságok halamza, amelyeket a vizuális megjelenítéshez használt tartalomra kell alkalmazni.
|
|
a wpf sablonjai segítenek a dokumentumok UI érékének megváltoztatásában
|
|
a parancsok az események elvontabb és lazábban kapcsolt változatai
|
|
a wpf parancsok támogatása csökkenti a megírandó kód mennyiségét
|
|
|
|
|
|
A wpf többrétegű architektúrájának legelső szintjén a PresentationFramework.dll található.
|
|
Ezt használjuk fejlesztés közben, itt vannak implementálva a küéomvüző vezérlők .
|
|
|
|
PresentationFramework.dll számára az alaposztályokat (UIElement, Visual) a PresentationCore.dll biztosítja.
|
|
Ezekből az osztályból származnak többek között a formák (shape) és a vezérlők (controls).
|
|
A windowsvase.dll a wpf alapvető működéséhez szükséges objektumosztályokat tartalmazza (DispatcherObject, DependencyObject).
|
|
|
|
A WPF névterek a System.Windows névtérben helyezkednek el.
|
|
|
|
System.Object
|
|
A WPF összes osztálya a System.Objectből származik.
|
|
A WPF legfontosabb komponensei a PresentationFramework, PresentationCore és a milcore, tartalmazzák a wpf legfontosabb kódrészleteit.
|
|
Ezek köüzül a milcore az egyetlen nem menedzselt kódban írt komponens.
|
|
|
|
XAML
|
|
|
|
(eXtensible Application Markup Language) egy XML alapú dekleratív jelölőnyelv, amely a .NET keretrendszer modelljébe illeszkedve leegyszerűsíti a grafikus felhasználói felület kialakítását.
|
|
XAML dekleratív nyelv nyelvtani szabályrendszere nagyn egyszerű.
|
|
Általános tervezési alapelve, hogy a XAML dokumentumot definiál a .NET osztály egy példánya.
|
|
|
|
XAML nyelv hasznlatának előnyei
|
|
|
|
AZ XAML elválasztja a front-end megjelenítést a háttér logikától
|
|
|
|
Az XAML a legegyszerűbb módszer a felhasználói felületek ábrázolására
|
|
|
|
A XAML hatékonyan dolgozik az eszközökkel
|
|
|
|
|
|
|
|
Külső és belső margók
|
|
Margin
|
|
|
|
GRID
|
|
<Grid ShowGridLines="True">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition />
|
|
<RowDefinition />
|
|
<RowDefinition />
|
|
</Grid.RowDefinitions>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition />
|
|
<ColumnDefinition />
|
|
</Grid.ColumnDefinitions>
|
|
</Grid>
|
|
|
|
igatítások
|
|
Az egyes gyerekelemeket természetesen függőlegesen és vízszintesen is igazíthatjuk.
|
|
HorizontalAlignment - vízszintes igazítás
|
|
VerticalAlignment
|
|
|
|
horizontal értékei: left center right stretch
|
|
|
|
vertical: top bottom center stretch
|
|
|
|
StackPanel
|
|
Alapértelmezés szerint a benne elhelyezett elemeket egymás alá rendezve listaszerűen jeleníti meg.
|
|
|
|
<Grid>
|
|
<StackPanel Width="200" Orientation="Horizontal">
|
|
<Button Height="20" Content="button 1" Margin="10"></Button>
|
|
<Button Height="20" Content="button 2" Margin="10"></Button>
|
|
<Button Height="20" Content="button 3" Margin="10"></Button>
|
|
</StackPanel>
|
|
</Grid>
|
|
|
|
Wrappanel
|
|
elemek egymás mellett vagy alatt való megjelenítésére alkalmas.
|
|
Amennyiben egy elem nem fér el a sorba, akkor az automatikusan a kövibe kerül.
|
|
|
|
<Grid Width="200" Height="200">
|
|
<WrapPanel>
|
|
<Ellipse Fill="Red" Height="40" Width="40"></Ellipse>
|
|
<Ellipse Fill="Red" Height="40" Width="40"></Ellipse>
|
|
<Ellipse Fill="Red" Height="40" Width="40"></Ellipse>
|
|
<Ellipse Fill="Red" Height="40" Width="40"></Ellipse>
|
|
<Ellipse Fill="Red" Height="40" Width="40"></Ellipse>
|
|
<Ellipse Fill="Red" Height="40" Width="40"></Ellipse>
|
|
<Ellipse Fill="Red" Height="40" Width="40"></Ellipse>
|
|
<Ellipse Fill="Red" Height="40" Width="40"></Ellipse>
|
|
</WrapPanel>
|
|
</Grid>
|
|
|
|
DockPanel
|
|
A DockPanel a StackPanel hez és a wrappanelhez képest már összetettebb elrendezések kialakításához használható.
|
|
Használható akár a Grid vezérlőt lecserélve gyökérelemként is.
|
|
<Grid>
|
|
<DockPanel LastChildFill="True">
|
|
<Button Content="Dock=Top" DockPanel.Dock="Top" Background="Beige"></Button>
|
|
<Button Content="Dock=Right" DockPanel.Dock="Right" Background="Gold"></Button>
|
|
<Button Content="Dock=Left" Background="Beige"></Button>
|
|
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom" Background="Beige"></Button>
|
|
<Image Source="cat.png" Stretch="Fill"></Image>
|
|
</DockPanel>
|
|
</Grid>
|
|
|
|
GridSplitter
|
|
A gridsplitter rácsfelosztó vezétlő használatával lehetővé válik a program futása közben a rács sorainak és oszlopainak.
|
|
A Grid vezérlőben azon sorok,illetve oszlopok közé kell elhelyeznünk, amelyeket szeretnénk átméretezhetővé tenni.
|
|
|
|
A ResizeDirection tulajdonsággal állíthatjuk be, hogy sorokat, vagy oszlopokat szeretnénk átéretezni, a resizevehavior segítségével pedig a pontos működést tudjuk beállítani.
|
|
|
|
ResizeBehavior tulajdonság
|
|
|
|
BasedOnAlignment (igazítás alapja)
|
|
CurrentAndNext (aktuális és következő)
|
|
PreviousAndCurrent (előző és aktuális)
|
|
|
|
|
|
Canvas
|
|
A canvas pixel pontosan megadott elrendezést tesz lehetővé, ideális fix méretű alkalmazások elkészítéséhez.
|
|
A Canvas-on elhelyezett elemek poziciojat a Top-Left és a Bottom-Right tulajdonságok beállításával tehetjük meg.
|
|
|
|
|
|
Vezérlők
|
|
A következő vezérlők a ContentControl osztályból származnak.
|
|
Tartalmaznak egy speciális beágyazott elemet
|
|
(Content tulajdonság), amely valójában objektum típusú,
|
|
tehát tetszőleges tartalom elhelyezhető benne.
|
|
|
|
Button
|
|
|
|
|
|
Label
|
|
|
|
A label vezérlő egyike a wpf legegyszerűbb vezérlőinek. Az eddigi példáinkban is sokszor előfordultak.
|
|
A következő példában a Target tulajdonságot kihasználva, futás alatt az alt+n billentyűkombináció lenyomásával a textBox1-re helyeződik át a fókusz.
|
|
|
|
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
|
|
<Label Content="_Név:" Target="{Binding ElementName=textBox1}"></Label>
|
|
<TextBox x:Name="textBox1" Width="300" Height="30"></TextBox>
|
|
</StackPanel>
|
|
|
|
CheckBox és RadioButton
|
|
|
|
Az adatbevitel nem csal szöveges adatok bevitelét tartalmazhatja, hanem lehetőség van kiválasztható értékek egyszerű bevitelére is.
|
|
A lehetőségek kiválasztása az alábbi két vezérlő segítségével valósítható meg:
|
|
CheckBox (jelölőnégyzet)
|
|
RadioButton (választógomb)
|
|
|
|
A checkbox és a radiobutton is az ButtonBase osztály leszármazottjai.
|
|
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Bottom">
|
|
<TextBlock Text="Neme: "></TextBlock>
|
|
<TextBlock Text="Neme: "></TextBlock>
|
|
|
|
<RadioButton GroupName="Nem" Content="Nő"></RadioButton>
|
|
<RadioButton GroupName="Nem" Content="Férfi"></RadioButton>
|
|
<Separator></Separator>
|
|
<TextBlock Text="Kedvenc évszak: "></TextBlock>
|
|
<RadioButton GroupName="Evszak" Content="Tavasz" IsChecked="True"></RadioButton>
|
|
<RadioButton GroupName="Evszak" Content="Nyár"></RadioButton>
|
|
<RadioButton GroupName="Evszak" Content="Ősz"></RadioButton>
|
|
<RadioButton GroupName="Evszak" Content="Tél"></RadioButton>
|
|
</StackPanel>
|
|
|
|
CheckBox
|
|
A jelölőnégyzetek egy vagy több egymástól független beállítás közötti választást tesz lehetővé.
|
|
A választógomboktól eltérően, amelyekben ......
|
|
|
|
<StackPanel>
|
|
<TextBlock Text="Válassza ki az alábi listából a kedvenc tantárgyait:"></TextBlock>
|
|
<CheckBox Content="Informatika"></CheckBox>
|
|
<CheckBox Content="Fizika" IsChecked="True" IsEnabled="False"></CheckBox>
|
|
<CheckBox Content="Matematika"></CheckBox>
|
|
<CheckBox Content="Kémia"></CheckBox>
|
|
|
|
<Button x:Name="Nyomogomb" Content="Bezár" Margin="200 200 200 200" Click="Nyomogomb_Click"></Button>
|
|
</StackPanel>
|
|
|
|
TextBox
|
|
Szöveg bevitelére és megjelenítésére alkalmas eszköz.
|
|
|
|
<TextBox Text="Ide várom a választ"></TextBox>
|
|
|
|
Amennyiben csak a szöveg megjelenítésére szeretnénk használni, az IsReadOnly tulajdonságot állítsuk true ra.
|
|
|
|
Autómatikus tördelés: TextWrapping="Wrap"
|
|
|
|
Scrollbar mindig látszódjon: VerticalScrollBarVisibility="Visible"
|
|
|
|
TextBlock
|
|
Ez a vezérlő szöveg megjelenítésére alkalmas.
|
|
Az alábbi szintaxisokkal hozhatjuk létre.
|
|
Kis mennyiségű szöveget jelenít meg, vagy akár formázott tartalmat.
|
|
Ez a vezérlő nem támogatja a gyorsbillentyűket.
|
|
|
|
|
|
Lista alapú vezérlők
|
|
ListBox
|
|
A Listbox vezérlővel alapértelmezés szerint egy elem kiválasztására van lehetőség.
|
|
<ListBox x:Name="Lista" SelectionMode="Extended">
|
|
<ListBoxItem>Alma</ListBoxItem>
|
|
<ListBoxItem>Körte</ListBoxItem>
|
|
<ListBoxItem>Barack</ListBoxItem>
|
|
<ListBoxItem>Szőlő</ListBoxItem>
|
|
</ListBox>
|
|
|
|
fontosabb tulajdonságai
|
|
SelectedIndex return item index
|
|
SelectedItem return item-name
|
|
IsSelected return bool
|
|
|
|
Single
|
|
Multiple több elem kiválasztása
|
|
Extended több elem kiválasztása, de a ctrl gomb nyomvatartása mellett lehetőságet nyújt nem egymás alatt lévő listaelemek kiválasztására.
|
|
|
|
Az események és tulajdonságok progamozása a Mainwindow.xaml.cs fájlban
|
|
|
|
Vezérlők definiálása a XAML ben: először hozz létre vezérlőket a xaml fájlban, például gombokat címkéket szövegmezőket.
|
|
|
|
Az események és tulajdonságok programozása a kódban:
|
|
A vezérlők ....
|
|
|
|
|
|
Image
|
|
Az image vezérlő kép megjelenítésre szolgál.
|
|
Legfontosabb tulajdonsága a source.
|
|
Ezen tulajdonság beállításánál lehetőségünk van a kép helyének, Uniform Resource Identifier, illetve relatív hivatkozással (projekthez csatolt kép) történő megadásra.
|
|
|
|
Stretch tulajdonságai:
|
|
None eredeti méretében jelenik meg, az extra részt levágja
|
|
Fill kitörlit a területet, a méretaránnyal nem foglalkozik
|
|
Uniform A méretarány megtartásával tölti ki a képet
|
|
UniformToFill Teljesen kitölti a képet a méretarány megtartásával
|
|
|
|
Slider
|
|
A csúszkák egy beállítás értékének megadását teszik lehetővé egy megadott értéktartományon belül.
|
|
|
|
Fontosabb tulajdonságai:
|
|
IsDirectionReserved
|
|
IsEnabled - engedélyezni illetve letiltanio lehet
|
|
LargeChange - pageup pagedown gombok lépésköze
|
|
Maximum, Minimum
|
|
Orientation
|
|
SmallChange - a kurzormozgató billentyűkhöz rendelt lépésközt állíthatjuk be.
|
|
Value - az aktuális érték, mindig a minimum és a maximum között van.
|
|
|
|
|
|
TreeView
|
|
Hierarchikus sorrendbe lehet vele rendezni.
|
|
A treeview egyben itemscontrol is.
|
|
|
|
Menu
|
|
A menü lehetővé teszi a leggyakrabban használt parancsok hierarchikus elrendezését.
|
|
|
|
Fontosabb tulajdonságai:
|
|
Command beállítunk egyes menüpontokhoz parancsokat.
|
|
Header menüpontok szövegét állíthatjuk be
|
|
Icon
|
|
IsChecked egyes menüpont be van e pipálva
|
|
IsEnabled egyes menüpont engedélyezve van e
|