Windows Presentation Foundation (WPF)

Windows Presentation Foundation (WPF)
Vizuális Programozás

J.Zs.Cs.: Vizuális programozás (c) 2012
WPF Új grafikus alrendszer 2D és 3D grafika Dokumentumok Média Teljesen vektorgrafika orientált  könnyen nagyítható (pl. felhasználói felület) DirectX szükséges Lebegőpontos koordináták, logikai pixel J.Zs.Cs.: Vizuális programozás (c) 2012

WPF alkalmazás típusok
Hagyományos asztali alkalmazás Navigáció alapú alkalmazás XBAP alkalmazás Hagyományos asztali alkalmazás – igazi újdonság a vektorgrafikus megjelenítés Navigáció alapú alkalmazás – Előre, hátra gombok, lapok közötti lépkedés, előzmények tárolása, navigációs sáv XBAP alkalmazás – XAML Browser Application Biztonsági korlátok: nem hozhat létre új ablakot, csak izolált tárolás, nem fér hozzá a fájlrendszerhez, nem használhat Windows Forms vagy AxtiveX felületet, nem használhat nem menedzselt kódot. J.Zs.Cs.: Vizuális programozás (c) 2012

Felület kódból A felület leírását elkészíthetjük kódból is Button btKódból = new Button(); btKódból.Content = "Ez kódból készült"; Grid grRács = new Grid(); btKódból.Width = 100; btKódból.Height = 50; btKódból.Margin = new Thickness(0,0,0,30); btKódból.HorizontalAlignment = HorizontalAlignment.Center; btKódból.VerticalAlignment = VerticalAlignment.Bottom; btKódból.Click += new RoutedEventHandler(btKódból_Click); grRács.Children.Add(btKódból); J.Zs.Cs.: Vizuális programozás (c) 2012

XAML eXtensible Application Markup Language Cél: design és kód különválasztása Profi alkalmazásoknál külön tervező Deklaratív alkalmazásfejlesztési modell Ha megnézzük a C# kódot, láthatjuk, hogy egy C# osztály keletkezett Window1 néven. Ha nincs méret megadva, akkor a nyomógomb az egész ablakot kihasználja. J.Zs.Cs.: Vizuális programozás (c) 2012 7

BAML Binary Application Markup Language Az XAML-ben leírt felület bináris változata Fordításkor keletkezik az XAML-ből EXE-be beágyazva ~\obj\Debug\*.BAML Betöltés az InitializeComponent-ben J.Zs.Cs.: Vizuális programozás (c) 2012

Document Outline Tervezési nézetben a felületet leíró dokumentumhierarchiát megtekinthetjük a Document Outline ablakban Fa hierarchiák WPF-ben Logikai fa Vizuális fa J.Zs.Cs.: Vizuális programozás (c) 2012

Logikai fa Leírja a szülő és a gyerek objektumok közötti összefüggést Rácsban nyomógomb, amiben rács, amiben kép és szöveg Fontos a tulajdonságok öröklése szempontjából Navigálás: GetParent, GetChildren, FindLogicalNode J.Zs.Cs.: Vizuális programozás (c) 2012

Vizuális fa Meghatározza, hogy egy objektum hogyan lesz megjelenítve a grafikus alapelemek felhasználásával (vonalak, négyszögek, stb.) Fontos a transzformációk szempontjából J.Zs.Cs.: Vizuális programozás (c) 2012

Application osztály System.Windows.Application Tulajdonságok: Current – a futó alkalmazás objektum – pl. alkalmazás szintű változók, leállítás MainWindow – a fő ablak Windows – az alkalmazást létrehozó szálból létrehozott ablakok gyűjteménye J.Zs.Cs.: Vizuális programozás (c) 2012

Application osztály StartupUri – az alkalmazás indításakor automatikusan megnyitott ablak/lap Properties – az alkalmazásból bárhonnan elérhető adatok tárolása Application.Current.Properties["Név"]=Érték; Események: Startup Exit J.Zs.Cs.: Vizuális programozás (c) 2012

Vezérlők Nem kell új (származtatott) vezérlőt írni ahhoz, hogy egy vezérlő megjelenését megváltoztassuk (pl. ellipszis alakú nyomógomb) Sablonokkal (Template) megoldva Csak akkor kell új vezérlőt írni, ha a viselkedést akarjuk megváltoztatni J.Zs.Cs.: Vizuális programozás (c) 2012

Core user input controls
Button, RadioButton, ComboBox, CheckBox, Calendar, DatePicker, Expander, DataGrid, ListBox, ListView, Slider, ToggleButton, TreeView, ContextMenu, ScrollBar, Slider, TabControl, TextBlock, TextBox, RepeatButton, RichTextBox, Label J.Zs.Cs.: Vizuális programozás (c) 2012

Window and control decoration
Menu, ToolBar, StatusBar, ToolTip, ProgressBar J.Zs.Cs.: Vizuális programozás (c) 2012

Tárolók (rétegmenedzserek)
Grid – sorok és oszlopok alakíthatók ki UniformGrid – minden cella azonos méretű StackPanel – vízszintesen vagy függőlegesen elhelyezett elemek DockPanel – dokkolás támogatása Canvas – koordináta alapú tárolás WrapPanel – az elemek egyenes vonalban helyezkednek el A tárolók egymásba ágyazhatóak A ContentControl-ból származtatott osztályok (ilyen pl. a Window) csak egy objektumot tárolhatnak a Content tulajdonságukban. Ha több komponenst akarunk rátenni, akkor egy tárolót teszünk rá először, majd a tárolóra helyezzük el a további komponenseket. J.Zs.Cs.: Vizuális programozás (c) 2012

Dependency Property Hasonlóan néz ki mint a .NET tulajdonságok, de annál jóval komplexebb Főbb eltérések a tulajdonságokhoz képest A tulajdonság közvetlenül olvassa ki a védett mezőből az adatokat Depencency Property dinamikusan gyűjti be az információt a GetValue() metódus meghívásával Ezt a függvényt a DependencyObject-től örökli WPF Dependency Property: WPF Control Hierachia:

Dependency Property További eltérések:
Adatmódosításnál (érték beállítása) a DependencyObject-től kapott dictionary-nek (kulcs-érték párok halmaza) adunk egy értékpárt A kulcs lesz az a tulajdonság, amit változtatni akarunk, az érték pedig amire be akarjuk állítani

Dependency Property Előnyei: Kevesebb memóriát fogyasztunk
Rengeteg adatot tárolunk a UI vezérlők adattagjaiban Értékek öröklődése Ha lokálisan nincs érték beállítva, akkor a logikai fában felfelé haladva addig megyünk, amíg nem találunk értéket Pl.: FontSize-ot beállítjuk egy gyökér elemben akkor az mindenre ki fog hatni (ha lokálisan nem változtatjuk meg)

Dependency Property Előnyei 2: Értesítés a változásokról
Beépített változás-értesítés Callback metódus segítségével kapunk értesítést a változásokról Adatkötésre is Dependency property-t használjuk (Binding)

Dependency property Létrehozása Visual Studioban
propdp <TAB> <TAB> - code snippet Kell egy statikus DepdencyProperty típusú mező, ami meghívja a DependencyProperty.Register() metódusát A neve mindig Propety-vel kell, hogy végződjön! Register metódusban meg kell adni a Tulajdonság nevét Tulajdonság típusát Tartalmazó típusát Metadata típusát (ha nem akarjuk használni, null-t adhatunk neki)

Dependency property public string Tükör { get { return(string)GetValue(TukorProperty); } set { SetValue(TukorProperty, value); } public static readonly DependencyProperty TukorProperty = DependencyProperty.Register("Tukor", typeof(string), typeof(Tukorkep), null);

Attached property Speciális Dependency Property
Pl.: Panel-től származó konténer elemek <Canvas> <Button Canvas.Top="20" Canvas.Left="20" Content="Gomb"/> </Canvas>

Value Resolution Strategy
When you access a dependency property over its .NET property wrapper, it internally calls GetValue(DependencyProperty) to access the value. This method resolves the value by using a value resolution strategy that is explained in detail below. If a local value is available, it reads it directly from the dictionary. If no value is set if goes up the logical tree and searches for an inherited value. If no value is found it takes the default value defined in the property metadata. This sequence is a bit simplified, but it shows the main concept. J.Zs.Cs.: Vizuális programozás (c) 2012

Value Changed Callback
private static void OnCurrentTimePropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e) { MyClockControl control = source as MyClockControl; DateTime time =(DateTime)e.NewValue; // Put some update logic here... } The change notification callback is a static method, that is called everytime when the value of the TimeProperty changes. The new value is passed in the EventArgs, the object on which the value changed is passed as the source. J.Zs.Cs.: Vizuális programozás (c) 2012

Coerce Value Callback private static object OnCoerceTimeProperty( DependencyObject sender, object data ) { if ((DateTime)data > DateTime.Now ) data = DateTime.Now; } return data; The coerce callback allows you to adjust the value if its outside the boundaries without throwing an exception. A good example is a progress bar with a Value set below the Minimum or above the Maximum. In this case we can coerce the value within the allowed boundaries. In the following example we limit the time to be in the past. J.Zs.Cs.: Vizuális programozás (c) 2012

Validation Callback private static bool OnValidateTimeProperty(object data) { return data is DateTime; } In the validate callback you check if the set value is valid. If you return false, an ArgumentException will be thrown. In our example demand, that the data is an instance of a DateTime. J.Zs.Cs.: Vizuális programozás (c) 2012

Menü <Menu x:Name="mnFőmenü" Height="30"> <Menu.ItemsPanel> <ItemsPanelTemplate> <DockPanel HorizontalAlignment="Stretch"/> </ItemsPanelTemplate> </Menu.ItemsPanel> <MenuItem Header="Kever" x:Name="miKever" VerticalAlignment="Center" /> A menüsávban a menüpontok alapból felülre igazítottan jelennek meg, amin a szokásos VerticalAlignment vagy VerticalContentAlignment tulajdonságokkal nem tudunk változtatni. A megoldás a menüelem megjelenítés sablonbeállításának módosítása. Egy DockPanelt (vagy vízszintes StackPanel-t)helyezünk el az ItemsPanelben, és ebben már érvényesülni fog a menüpont VerticalAlignment="Center" tulajdonsága. J.Zs.Cs.: Vizuális programozás (c) 2012

GridSplitter <Grid x:Name="grRács"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition /> </Grid.ColumnDefinitions> <TextBox Grid.Column="0" MinWidth="100" Text="TextBox"/> <GridSplitter Grid.Column="0" Width="5" /> <TextBox Grid.Column="1" TextWrapping="Wrap" Text="TextBox" /> </Grid> J.Zs.Cs.: Vizuális programozás (c) 2012

Eszköztár <ToolBar Height="34" DockPanel.Dock="Top" > <Button Content="Indít" /> <Button > <Image Source="/Ikonok/copy.ico"/> </Button> <Button> <Image Source="/Ikonok/cut.ico"/> <Image Source="/Ikonok/delete.ico"/> <Image Source="/Ikonok/paste.ico"/> </ToolBar> Ikonok forrása: c:\Program Files\Microsoft Visual Studio 10.0\Common7\VS2010ImageLibrary\1033\VS2010ImageLibrary.zip J.Zs.Cs.: Vizuális programozás (c) 2012

Ikonok befordítása a szerelvénybe1
Solution Explorerben egy mappa az ikonoknak Ikonok bemásolása a mappába Ikonok kijelölése J.Zs.Cs.: Vizuális programozás (c) 2012

Ikonok befordítása a szerelvénybe2
Properties Build Action=Resource Copy to Output Directory=Do not copy Build/Rebuild Solution J.Zs.Cs.: Vizuális programozás (c) 2012

Képek tárolása szerelvényen kívül
Properties Build Action=Content Copy to Output Directory=Copy always Build/Rebuild Solution

Jobbra igazított menüpont a főmenüben
J.Zs.Cs.: Vizuális programozás (c) 2012

Viselkedés A viselkedést a vezérlő API-ja határozza meg Parancsok (Commands) – műveletek támogatása: Copy, Cut, Paste, stb. Viselkedés vagy a kinézet módosítása tulajdonságokkal: font, háttérszín, stb. Események Funkcionalitást megvalósító metódusok: Sort, Clear Az első az újdonság, a többi a WinForms-ban is megvan. J.Zs.Cs.: Vizuális programozás (c) 2012

Eseménykezelés Eseményekre fel lehet iratkozni:
Design nézetből a Properties ablakban Alapértelemezett eseményre feliratkozás duplán rákattintva a vezérlőre (pl.: Button-nél a click) XAML-ből Pl: <Button x:Name="btBack" Content="Vissza" Click="btBack_Click"/> C# kódból

Események Továbbított esemény (Routed Events) Ha egy vezérlő több elemből épül fel (pl. egy nyomógomb, amin van egy kép és egy szöveg) Attól függetlenül, hogy a képen, a szövegen vagy a nyomógombon kattintunk ugyanolyan értesítés akarunk kapni Direkt esemény (Direct Event) – a WinForm-mal azonos módon működik, az eseményt csak az előidéző objektumban dolgozhatjuk fel J.Zs.Cs.: Vizuális programozás (c) 2012

Továbbított esemény Buborék esemény (Bubbling Event) – először az eseményt kiváltó vezérlő kapja meg, majd az őt tartalmazó rács, majd a nyomógomb, és így tovább felfelé a hierarchiában a gyökér csomópontig. Lefutó esemény (Tunneling Event) – Preview-al kezdődik a neve, a gyökértől kiindulva halad lefele az esemény előidéző vezérlőhöz. Általában az események blokkolására használják: e.Handled=true; Először a TE majd a BE következik be BE,TE: a vándorlás addig tart, amíg az eseményt le nem kezelik. J.Zs.Cs.: Vizuális programozás (c) 2012

Commands Egy műveletet több módon is előidézhetünk: menü, gyorsbillentyű, eszköztár Kössük őket össze, hogy egyszerűen megoldható legyen a letiltás/engedélyezés → Commands objektumok Beépített és programozó által definiált parancs osztályok J.Zs.Cs.: Vizuális programozás (c) 2012

Beépített parancs osztályok
ApplicationCommands: pl. vágólap, mentés, megnyitás, új, lezárás, nyomtatás ComponentCommands: vezérlőktől származó parancsok és információk feldolgozása: pl. ScrollUp EditingCommands: szövegszerkesztési parancsok: pl. félkövér, dőlt, igazítás MediaCommands: video és audio lejátszását előíró parancsok: pl. lejátszás, szünet, hangerő, sávválasztás J.Zs.Cs.: Vizuális programozás (c) 2012

CommandDemo

Vezérlők csatolása Az aláhúzásjel azt jelenti, hogy az N betű aláhúzva jelenik meg. A csatolás hatására ha Alt+N-et nyomunk, akkor a szerkesztőmező kapja meg az input fókuszt. J.Zs.Cs.: Vizuális programozás (c) 2012

Párbeszédablakok használata
Megjelenítés módja szerint Modális Nem modális A megoldás módja szerint Beépített (üzenetablak, common dialog boxes) Saját készítésű (custom dialog box) J.Zs.Cs.: Vizuális programozás (c) 2012

Beépített párbeszédablakok
MessageBox Common Dialog Boxes – Közös párbeszédablakok (Microsoft.Win32) SaveFileDialog OpenFileDialog PrintDialog J.Zs.Cs.: Vizuális programozás (c) 2012

Kétgombos üzenetablak

Háromgombos üzenetablak

OpenFileDialog Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog(); dlg.FileName = "Document"; // Default file name dlg.DefaultExt = ".txt"; // Default file extension dlg.Filter = "Text documents (.txt)|*.txt"; Nullable<bool> er= dlg.ShowDialog(); if (er== true) { string filename = dlg.FileName; } J.Zs.Cs.: Vizuális programozás (c) 2012

SaveFileDialog Fájlok mentése Microsoft.Win32 névtér
SaveFileDialog sfd = new Microsoft.Win32.SaveFileDialog(); sfd.FileName = ""; sfd.DefaultExt = ".text"; sfd.Filter = "Text documents (.txt)|*.txt"; // Megjelenítjük az ablakot. Nullable<bool> er= sfd.ShowDialog(); // Mire kattintottak if (er== true) { // Elérési út string Text = sfd.FileName; … }

PrintDialog Dokumentumok nyomtatása
PrintDialog pd = new System.Windows.Controls.PrintDialog(); pd.PageRangeSelection = PageRangeSelection.AllPages; pd.UserPageRangeEnabled = true; // Megjelenítjük az ablakot Nullable<bool> result = pd.ShowDialog(); //mire kattintottak if (result == true) { //nyomtatás }

Általános lépések Párbeszédablak objektum létrehozása Kezdeti megjelenést szabályozó tulajdonságok beállítása Megjelenítés Ha OK-val zárta be a felhasználó, akkor módosított tulajdonságok kiolvasása J.Zs.Cs.: Vizuális programozás (c) 2012

Egyéni párbeszédablak (Custom Dialog Box) készítése
Szokásos ablakfelépítés Ne jelenjen meg a tálcán: ShowInTaskbar="False" Jelenjen meg a szülő ablak területén: WindowStartupLocation="CenterOwner" Melyik vezérlő rendelkezzen kezdetben input fókusszal? FocusManager.FocusedElement= "{Binding ElementName=tbElső}" OK gomb IsDefault="True" – ENTER-re is bezáródik Mégse gomb IsCancel="True" – ESC-re is bezáródik J.Zs.Cs.: Vizuális programozás (c) 2012

Párbeszédablak használata
Menüpont <MenuItem x:Name="miÚj" Header="Új ..." Click="miÚj_Click"/> Ablak objektum létrehozása és kezdeti beállítások wndÚjAdat wndÚjAdat = new wndÚjAdat(); wndÚjAdat.Owner = this; wndÚjAdat.Személy.Név = "Valaki Eduárd"; wndÚjAdat.Személy.Átlag = 2; Párbeszédablak megjelenítése wndÚjAdat.ShowDialog(); J.Zs.Cs.: Vizuális programozás (c) 2012

Bevitt adatok ellenőrzése (Validation)
Miért? Biztonság Későbbi kivételek elkerülése Idejében jelezni a felhasználó felé Teljesítménynövelés (pl. többrétegű alkalmazásokban a kliens és az alkalmazási rétegek közötti felesleges többszörös adatáramlás elkerülése) Hogyan? Validációs szabállyal Egyszerű ellenőrző metódussal J.Zs.Cs.: Vizuális programozás (c) 2012

Validációs szabály Egy osztály ValidationRule leszármazottja Egy adatkötéshez rendeljük – egy objektum egy tagját kötjük a vezérlő ellenőrizni kívánt tulajdonságához Minden vezérlőhöz szabály, egy vezérlőhöz akár több szabály is using System.Windows.Controls; Validate metódus átdefiniálása J.Zs.Cs.: Vizuális programozás (c) 2012

Validációs szabály vezérlőhöz rendelése
Ha nem ismeri fel a vrÁtlag osztályt, akkor a megoldást újból kell Build-elni! Alapból akkor ellenőrizne, amikor a vezérlő elveszti az input fókuszt. Annak érdekében, hogy már gépeléskor legyen ellenőrzés a kötést kiegészítjük a UpdateSourceTrigger="PropertyChanged"-el. J.Zs.Cs.: Vizuális programozás (c) 2012

Beállítások a párbeszédablak osztályában
A Személy osztályból készült objektumra igazából azért van szükség, hogy legyen amihez létrehozzuk az adatkötést, amihez kapcsolódik a validációs szabály. J.Zs.Cs.: Vizuális programozás (c) 2012

Hibás adatbevitelnél piros keret a szövegmező körül

A validációs metódusban megadott hibaüzenet megjelenítése
Gyorstippben (buborék - ToolTip) Egy erre célra beépített vezérlőben (pl. TextBlock) J.Zs.Cs.: Vizuális programozás (c) 2012

Megvalósítás Definiálunk egy osztályt, ami megvalósítja az IValueConverter interfészt – cél a hibaüzenetek egyetlen sztringbe foglalása Statikus erőforrásként felvesszük a párbeszédablak XAML leírásába A szövegmező ToolTip tulajdonságának vagy a kiegészítő vezérlő Text tulajdonságának értékét adatkötéssel a szövegmező hibagyűjteményéből vesszük Az átalakító osztály gondoskodik a sztringgé alakításról J.Zs.Cs.: Vizuális programozás (c) 2012

Statikus erőforrás <Window.Resources> <local:HibaÁtalakító x:Key="Átalakító" /> </Window.Resources> Ez azt jelenti, hogy az ablak létrehozásakor létrejön egy HibaÁtlalakító típusú objektum, amire Átalakító néven tudunk hivatkozni az XAML-ben. J.Zs.Cs.: Vizuális programozás (c) 2012

Hibaüzenet gyorstippben

Hibaüzenet TextBlock-ban

Az OK gomb kezelése Ha egy ablakot egyszer bezártunk, akkor az már nem lesz újra megjeleníthető, bár maga az objektum ott marad a memóriában. Ha újból kell a párbeszédablak, akkor egy új objektumot kell létrehozni ebből az ablaktípusból. J.Zs.Cs.: Vizuális programozás (c) 2012

Egy csomópont alatti összes csomópont hibaállapotának ellenőrzése
A metódus teljesen általános, változtatás nélkül bármely párbeszédablaknál felhasználható. J.Zs.Cs.: Vizuális programozás (c) 2012

Adatátadás párbeszédablakoknak és UserControl-oknak
Hagyományos megoldások Konstruktornak átadott paraméter Értékeadás egy tulajdonságnak (akár inicializáló listában) WPF újdonság Az alkalmazáshoz kapcsolódó tulajdonság gyűjtemény: Application.Current.Properties J.Zs.Cs.: Vizuális programozás (c) 2012

Tulajdonság gyűjtemény

Windows Presentation Foundation (WPF)

Hasonló előadás

Az előadások a következő témára: "Windows Presentation Foundation (WPF)"— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés

Bejelentkezés

A társadalmi hálózaton keresztül belépni:

Windows Presentation Foundation (WPF)

Hasonló előadás

Az előadások a következő témára: "Windows Presentation Foundation (WPF)"— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés