Windows Presentation Foundation (WPF)

WPF 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) 2018

Felület létrehozása, komponensek használata J.Zs.Cs.: Vizuális programozás (c) 2018

Felület létrehozása C# kódból XAML – Visual Studio Blend for Visual Studio Jegyzettömb Visual Studio XAML design tools that enable you to: Design a custom layout Use powerful layout tools, including templates, built-in controls, rulers, guides, and snapping support, to design custom layouts for your Windows Store app. Create and style controls Drag and drop controls onto the design surface, and then style them by modifying properties directly in the UI. Style images and elements. Create and edit control templates Use the template editing tools to create custom control templates that can be reused throughout your project. Add them to your control library to reuse them in projects outside of the current project. Create and edit data templates Create templates that define how you want your data to be displayed in your app. Display sample and design-time data Bind to and display data in your Windows Store app so that you can more easily modify the appearance of your data at run time. Use behaviors to add interactivity Add interactivity to your app by dragging a built-in behavior onto the object on the design surface and modifying the properties to suit your needs. Edit XAML markup In addition to the UI tools that make it easy to create and modify XAML without touching code. Blend enable you to: Insert controls and modify their behavior in XAML Designer Add controls to the artboard You can drag controls from the Assets panel onto the artboard, and then modify them in the Properties window. Make a control out of an image, shape, or path You can make any object into a control. Make controls do things Controls can perform actions when users interact with them. For example, they can start an animation, update a data source or play a video. Use triggers, behaviors, and events to make controls do things. Insert images, videos, and audio clips in XAML Designer Draw shapes and paths Draw a shape Draw a path Convert a shape to a path Combine paths Create a compound path Create a clipping path Modify the style of objects Animate objects Create timelines Add keyframes and repeat the animation Add event triggers for interactivity Animate colors Create and modify motion paths Animate the button Create animation and work with easing References https://msdn.microsoft.com/en-us/library/jj129478.aspx https://msdn.microsoft.com/en-us/library/jj170634.aspx J.Zs.Cs.: Vizuális programozás (c) 2018

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

Felület XAML kódból 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) 2018 7

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

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

C# - ban 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) 2018

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

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

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

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

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

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

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

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

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

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

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

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

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

Canvas Alapból mindegyik nyomógomb a bal felső sarokban jelenik meg. Ha nem adunk meg egy koordinátát, akkor azt nullának értelmezi. J.Zs.Cs.: Vizuális programozás (c) 2018

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

Menüpontok függőlegesen középre igazítása <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) 2018

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> Visual Studio Image Library: https://www.microsoft.com/en-us/download/details.aspx?id=35825 J.Zs.Cs.: Vizuális programozás (c) 2018

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

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

Képek tárolása szerelvényen kívül Properties Build Action=Content Copy to Output Directory=Copy always Build/Rebuild Solution J.Zs.Cs.: Vizuális programozás (c) 2018

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

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

Események és viselkedés J.Zs.Cs.: Vizuális programozás (c) 2018

Routed Events 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 Mindegyik esemény routed event, a feldolgozási stratégia határozza meg, hogy direkt, le vagy felfutónak nevezzük. J.Zs.Cs.: Vizuális programozás (c) 2018

Eseménykezelési stratégiák 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; 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. Direkt esemény (Direct Event) csak az előidéző objektumban dolgozhatjuk fel 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) 2018

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 XAML: Click="metódusnév" attribútum Automatikus vázgenerálás J.Zs.Cs.: Vizuális programozás (c) 2018

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

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

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

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

J.Zs.Cs.: Vizuális programozás (c) 2018

Űrlapok, adatbevitel és ellenőrzés J.Zs.Cs.: Vizuális programozás (c) 2018

Párbeszédablakok típusai Megjelenítés módja szerint Modális ( ShowDialog() ) Nem modális ( Show() ) A megoldás módja szerint Beépített (üzenetablak, common dialog boxes) Saját készítésű (custom dialog box) Az űrlap egy külön ablakban (párbeszédablak) jelenik meg Az űrlap az alkalmazás főablakában van elhelyezve, de alapból rejtett http://msdn.microsoft.com/en-us/library/aa969773%28v=vs.110%29.aspx J.Zs.Cs.: Vizuális programozás (c) 2018

Beépített párbeszédablakok Üzenetablak: MessageBox Common Dialog Boxes – Közös párbeszédablakok (Microsoft.Win32) SaveFileDialog OpenFileDialog PrintDialog http://msdn.microsoft.com/en-us/library/aa969773.aspx#Common_Dialogs J.Zs.Cs.: Vizuális programozás (c) 2018

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

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

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

OpenFileDialog J.Zs.Cs.: Vizuális programozás (c) 2018

SaveFileDialog J.Zs.Cs.: Vizuális programozás (c) 2018

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

Á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) 2018

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 (ablak Window tagben beállítva)? FocusManager.FocusedElement= "{Binding ElementName=tbElső}" OK gomb IsDefault="True" Mégse gomb IsCancel="True" DialogResult tulajdonság true/false J.Zs.Cs.: Vizuális programozás (c) 2018

Űrlap külön ablakban – Jelszóbeviteli párbeszédablak Csatolás Csatolás A címkéket csatoltuk a szövegmezőkhöz. J.Zs.Cs.: Vizuális programozás (c) 2018

Használat Legyen más osztályból is olvasható Párbeszédablak osztálya Főablak osztálya Legyen más osztályból is olvasható J.Zs.Cs.: Vizuális programozás (c) 2018

Párbeszédablak kezdeti beállítással Menüpont (főablak XAML) <MenuItem x:Name="miÚj" Header="Új ..." Click="miÚj_Click"/> Ablak objektum létrehozása és kezdeti beállítások (főablak C#): var wnd= new wndÚjAdat { Owner= this, Személy={ Név= "Valaki Eduárd", Átlag= 2} }; wndÚjAdat.ShowDialog(); Párbeszédablak megjelenítése Demo: EgyeniParbeszedAblak A pb. ablak osztályában van egy publikus Személy típusú tulajdonság J.Zs.Cs.: Vizuális programozás (c) 2018

Beállítások a párbeszédablak osztályában Személy objektum létrehozása az ablak létrehozásakor 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. Objektum rácshoz „kötése” J.Zs.Cs.: Vizuális programozás (c) 2018

Komplex adatkötés J.Zs.Cs.: Vizuális programozás (c) 2018

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

Űrlap az alkalmazás főablakában <Window x:Class="Hallgatok.wndFőablak" xmlns=http://schemas.microsoft.com/winfx/2006 /xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx /2006/xaml xmlns:hallgatok="clr-namespace:Hallgatok„ Title="Hallgatói adatok" Height="350" Width="525"> … <hallgatok:ucHallgatóAdatrögzítés x:Name="ucHallgatóAdatrögzítés" Grid.Row="1" Visibility= " Collapsed" /> <hallgatok:ucHallgatoAdatmodositas x:Name="ucHallgatóAdatmódosítás" Visibility="Collapsed" Grid.Row="1"/> J.Zs.Cs.: Vizuális programozás (c) 2018

Megjelenítés - elrejtés private void miHallgatóAdatrögzítés_Click(object sender, RoutedEventArgs e) { ucHallgatóAdatmódosítás.Visibility = Visibility.Collapsed; ucHallgatóAdatrögzítés.Visibility = Visibility.Visible; } private void miHallgatóMódosítás_Click(object sender, RoutedEventArgs e) { ucHallgatóAdatrögzítés.Visibility = Visibility.Collapsed; ucHallgatóAdatmódosítás.Visibility = Visibility.Visible; J.Zs.Cs.: Vizuális programozás (c) 2018

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

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

Adatok megjelenítése amikor a komponens (UserControl) láthatóvá válik private void UserControl_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e) { if(!this.IsVisible) return; dsHallgatók=Application.Current.Properties["dsHallgatók"] as dsHallgatók; if (dsHallgatók.dtSzakok.Rows.Count > 1) { cbARSzak.ItemsSource = dsHallgatók.dtSzakok; cbARSzak.DisplayMemberPath = "Szaknév"; cbARSzak.SelectedIndex = 0; } J.Zs.Cs.: Vizuális programozás (c) 2018

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

Hogyan? Az ablak OK gombbal történő lezárásához eseménykezelőt készítünk, és ott egyenként ellenőrizzük az egyes mezőkbe beírt adatokat. Hiba esetén hibaüzenet és az ablakot nem zárjuk be ha az ablakot már bezártuk, akkor újból megjelenítjük azt (új objektum példány) user control esetén a uc-t nem rejtjük el. Ún. validációs szabályok segítségével. J.Zs.Cs.: Vizuális programozás (c) 2018

Validációs szabály Egy osztály ValidationRule leszármazottja Komponens Objektum Adatkötés Tulajdonság Tulajdonság Validációs szabály 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) 2018

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

Validációs szabály vezérlőhöz rendelése – XAML kódban A rácshoz egy daforrás objektumot fogunk rendelni futási időben 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. Validációs szabályok kiértékelése már gépelés közben J.Zs.Cs.: Vizuális programozás (c) 2018

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

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

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

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

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

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

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

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

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