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

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

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

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

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

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

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

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

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)

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)

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)

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

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

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

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

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

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

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

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

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

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

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

Windows Presentation Foundation (WPF)