Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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

Hasonló előadás


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

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

2 J.Zs.Cs.: Vizuális programozás (c) 2012 WPF Új grafikus alrendszer 2D és 3D grafika DokumentumokMé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

3 WPF alkalmazás típusok Hagyományos asztali alkalmazás Navigáció alapú alkalmazás XBAP alkalmazás J.Zs.Cs.: Vizuális programozás (c) 2012

4 Felület létrehozása C# kódból XAML – Visual Studio, Expression Blend, Jegyzettömb J.Zs.Cs.: Vizuális programozás (c) 2012

5 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);

6 Felület kódból J.Zs.Cs.: Vizuális programozás (c) 2012

7 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

8 J.Zs.Cs.: Vizuális programozás (c) 2012 XAML Gyökérelemek –Window –Page –Application Elem –Egy osztály Attribútum –Egy tulajdonság a komponens osztályában

9 J.Zs.Cs.: Vizuális programozás (c) 2012 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

10 Hivatkozás a nyomógombra a kódban –XAML-ben Name="btPróba" attribútum –Az eseménykezelőben btPróba.Background = Brushes.Red; btPróba.Content = "Felirat"; J.Zs.Cs.: Vizuális programozás (c) 2012

11 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

12 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

13 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

14 Application osztály System.Windows.ApplicationTulajdonsá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

15 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:StartupExit J.Zs.Cs.: Vizuális programozás (c) 2012

16 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

17 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

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

19 Media controls Image, MediaElement, SoundPlayerAction J.Zs.Cs.: Vizuális programozás (c) 2012

20 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

21 J.Zs.Cs.: Vizuális programozás (c) 2012 Grid és DockPanel

22 J.Zs.Cs.: Vizuális programozás (c) 2012 StackPanel Térköz nélkül helyezi el az elemeket alapból

23 J.Zs.Cs.: Vizuális programozás (c) 2012 Canvas

24 Méret Device Independent Unit 1 DIU=1"/96 Windows alapért.: 96 DPI=96 pont/1" → 1 pont = 1 DIU

25 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

26 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

27 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)

28 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)

29 Dependency property Létrehozása Visual Studioban –propdp - 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)

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

31 Attached property Speciális Dependency Property Pl.: Panel-től származó konténer elemek J.Zs.Cs.: Vizuális programozás (c) 2012

39 Ikonok befordítása a szerelvénybe 1 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

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

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

42 Többsoros szövegmező J.Zs.Cs.: Vizuális programozás (c) 2012

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

44 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

45 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: Pl: –C# kódból

46 J.Zs.Cs.: Vizuális programozás (c) 2012 Eseménykezelés XAML: Click="metódusnév" attribútum Automatikus vázgenerálás

47 J.Zs.Cs.: Vizuális programozás (c) 2012 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

48 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

49 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

50 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

51 CommandDemo

52 J.Zs.Cs.: Vizuális programozás (c) 2012 CommandBinding A CommandBinding osztály kapcsolja össze a parancsot és az eseménykezelőt Eseményei: –CanExecute: e.CanExecute=true; –Executed

53 J.Zs.Cs.: Vizuális programozás (c) 2012 Vezérlők csatolása

54 J.Zs.Cs.: Vizuális programozás (c) 2012 Jelszóbevitel

55

56 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

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

58 Egyszerű üzenetablak MessageBox.Show( "Egyszerű üzenetablak"); J.Zs.Cs.: Vizuális programozás (c) 2012

59 Kétgombos üzenetablak J.Zs.Cs.: Vizuális programozás (c) 2012

60 Háromgombos üzenetablak J.Zs.Cs.: Vizuális programozás (c) 2012

61 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 er= dlg.ShowDialog(); if (er== true) { string filename = dlg.FileName; string filename = dlg.FileName;} J.Zs.Cs.: Vizuális programozás (c) 2012

62 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 er= sfd.ShowDialog(); // Mire kattintottak if (er== true) { // Elérési út // Elérési út string Text = sfd.FileName; string Text = sfd.FileName; …}

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

64 Á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

65 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

66 Párbeszédablak használata Menüpont 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

67 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

68 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

69 Validate metódus J.Zs.Cs.: Vizuális programozás (c) 2012

70 Input fókusz és névtérhivatkozás beállítása a megjelenő párbeszédablakban J.Zs.Cs.: Vizuális programozás (c) 2012

71 Validációs szabály vezérlőhöz rendelése J.Zs.Cs.: Vizuális programozás (c) 2012

72 Beállítások a párbeszédablak osztályában J.Zs.Cs.: Vizuális programozás (c) 2012

73 Hibás adatbevitelnél piros keret a szövegmező körül J.Zs.Cs.: Vizuális programozás (c) 2012

74 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

75 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

76 Átalakító osztály using System.Windows.Controls; using System.Windows.Data; J.Zs.Cs.: Vizuális programozás (c) 2012

77 Statikus erőforrás J.Zs.Cs.: Vizuális programozás (c) 2012

78 Hibaüzenet gyorstippben J.Zs.Cs.: Vizuális programozás (c) 2012

79 Hibaüzenet TextBlock-ban J.Zs.Cs.: Vizuális programozás (c) 2012

80 Az OK gomb kezelése J.Zs.Cs.: Vizuális programozás (c) 2012

81 Egy csomópont alatti összes csomópont hibaállapotának ellenőrzése J.Zs.Cs.: Vizuális programozás (c) 2012

82 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

83 Tulajdonság gyűjtemény J.Zs.Cs.: Vizuális programozás (c) 2012


Letölteni ppt "Windows Presentation Foundation (WPF) Vizuális Programozás."