1 / 79

Windows Presentation Foundation (WPF)

Windows Presentation Foundation (WPF). Vizuális Programozás. 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.

amalie
Download Presentation

Windows Presentation Foundation (WPF)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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

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

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

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

  9. 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

  10. Hivatkozás a nyomógombra a kódban • XAML-benName="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 J.Zs.Cs.: Vizuális programozás (c) 2012

  12. 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

  13. 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

  14. 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

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

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

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

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

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

  24. Méret • Device Independent Unit • 1 DIU=1"/96 • Windows alapért.: 96 DPI=96 pont/1" • → 1 pont = 1 DIU J.Zs.Cs.: Vizuális programozás (c) 2012

  25. DependencyProperty • 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 • DepencencyPropertydinamikusan 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. DependencyProperty 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. DependencyProperty • 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. DependencyProperty • 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 Dependencyproperty-t használjuk (Binding)

  29. Dependencyproperty • Létrehozása Visual Studioban • propdp <TAB> <TAB> - codesnippet • 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. Dependencyproperty publicstringTükör { get{ return(string)GetValue(TukorProperty); } set{ SetValue(TukorProperty, value); } } public static readonlyDependencyPropertyTukorProperty = DependencyProperty.Register("Tukor", typeof(string), typeof(Tukorkep), null);

  31. Attachedproperty • Speciális DependencyProperty • Pl.: Panel-től származó konténer elemek <Canvas> <ButtonCanvas.Top="20" Canvas.Left="20" Content="Gomb"/> </Canvas>

  32. ValueResolutionStrategy J.Zs.Cs.: Vizuális programozás (c) 2012

  33. Menü <Menu x:Name="mnFőmenü" Height="30"> <Menu.ItemsPanel> <ItemsPanelTemplate> <DockPanelHorizontalAlignment="Stretch"/> </ItemsPanelTemplate> </Menu.ItemsPanel> <MenuItemHeader="Kever" x:Name="miKever" VerticalAlignment="Center" /> J.Zs.Cs.: Vizuális programozás (c) 2012

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

  35. Eszköztár <ToolBar Height="34"DockPanel.Dock="Top" > <ButtonContent="Indít" /> <Button > <Image Source="/Ikonok/copy.ico"/> </Button> <Button> <Image Source="/Ikonok/cut.ico"/> </Button> <Button> <Image Source="/Ikonok/delete.ico"/> </Button> <Button> <Image Source="/Ikonok/paste.ico"/> </Button> </ToolBar> J.Zs.Cs.: Vizuális programozás (c) 2012

  36. 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

  37. Ikonok befordítása a szerelvénybe2 Properties • Build Action=Resource • Copyto Output Directory=Donotcopy • Build/RebuildSolution J.Zs.Cs.: Vizuális programozás (c) 2012

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

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

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

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

  42. Eseménykezelés • Eseményekre fel lehet iratkozni: • Design nézetből a Propertiesablakban • 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

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

  44. Események • Továbbított esemény (RoutedEvents) • 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 (DirectEvent) – 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

  45. Továbbított esemény • Buborék esemény (BubblingEvent) – 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 (TunnelingEvent) – 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 J.Zs.Cs.: Vizuális programozás (c) 2012

  46. 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

  47. 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

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

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

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

More Related