windows presentation foundation (wpf)

Windows Presentation Foundation (WPF)

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

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

2

Felület létrehozása, komponensek használata


3

Felület létrehozása

C# kódból

XAML – Visual Studio, Expression Blend, Jegyzettömb


5


Felület C# kódból6


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

7

XAML Gyökérelemek

Window Page Application

Elem Egy osztály

Attribútum Egy tulajdonság a komponens

osztályában


8

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-

benJ.Zs.Cs.: Vizuális programozás (c) 2017

9

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


10

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


11

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


12

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


13

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


14

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


15

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


16

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


17

Window and controldecoration

Menu, ToolBar, StatusBar, ToolTip, ProgressBar


18

Media controls

Image, MediaElement, SoundPlayerAction


19

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


20

Grid és DockPanel


21

StackPanel Térköz nélkül helyezi el az

elemeket alapból


22

Canvas


23

Jobbra igazított menüpont a főmenüben


25

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


26

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>


27

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"/></Button><Button><Image Source="/Ikonok/delete.ico"/></Button><Button><Image Source="/Ikonok/paste.ico"/></Button>

</ToolBar>


Visual Studio Image Library: https://www.microsoft.com/en-us/download/details.aspx?id=35825

28

Ikonok befordítása a szerelvénybe1

Solution Explorerben egy mappa az ikonoknak

Ikonok bemásolása a mappába

Ikonok kijelöléseJ.Zs.Cs.: Vizuális programozás (c) 2017

29

Ikonok befordítása a szerelvénybe2

Properties Build Action=Resource Copy to Output Directory=Do not

copy

Build/Rebuild Solution


30

Képek tárolása szerelvényen kívül

Properties Build Action=Content Copy to Output Directory=Copy

always Build/Rebuild Solution


31

Többsoros szövegmező


32

Események és viselkedés


33

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

34

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

35

Eseménytípusok 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


36

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


37

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


38

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


39

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


40

Vezérlők csatolása


41


42

Űrlapok, adatbevitel és ellenőrzés


43

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


44

Beépített párbeszédablakok

Üzenetablak: MessageBox Common Dialog Boxes – Közös

párbeszédablakok (Microsoft.Win32) SaveFileDialog OpenFileDialog PrintDialog


45

Egyszerű üzenetablak

MessageBox.Show("Egyszerű üzenetablak");


46

Kétgombos üzenetablak


47

Háromgombos üzenetablak


48

OpenFileDialog


49

SaveFileDialog


50

PrintDialog

Dokumentumok nyomtatása

PrintDialog pd = new System.Windows.Controls.PrintDialog();pd.PageRangeSelection = PageRangeSelection.AllPages;pd.UserPageRangeEnabled = true;// Megjelenítjük az ablakotNullable<bool> result = pd.ShowDialog();//mire kattintottak if (result == true){ //nyomtatás} J.Zs.Cs.: Vizuális programozás (c) 2017

51

Á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


52

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


53

Űrlap külön ablakban –Jelszóbeviteli párbeszédablak


Csatolás

Csatolás

54

Használat


55Párbeszédablak

osztálya

Főablak osztálya

Legyen más osztályból is olvasható

Legyen más osztályból is olvasható

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ésewndÚjAdat.ShowDialog();Demo: EgyeniParbeszedAblakJ.Zs.Cs.: Vizuális programozás (c) 2017

56

A pb. ablak osztályában van egy publikus Személy típusú

tulajdonság

Beállítások a párbeszédablak osztályában


57

Személy objektum létrehozása az ablak

létrehozásakor

Objektum rácshoz „kötése”

Komplex adatkötés


58

Input fókusz és névtérhivatkozás beállítása a megjelenő párbeszédablakban


59

Ű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) 2017

60

Megjelenítés - elrejtésprivate 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;}


61

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


62

Tulajdonság gyűjtemény


63

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;

}}


64

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)


65

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.


66

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


67

Komponens ObjektumAdatkötés

Validációs szabály

Tulajdonság Tulajdonság

Validate metódus


68

Validációs szabály vezérlőhöz rendelése – XAML kódban


69 A rácshoz egy daforrás objektumot fogunk rendelni

futási időben

Validációs szabályok kiértékelése már gépelés

közben

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


70

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)


71

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


72

Átalakító osztály

using System.Windows.Controls; using System.Windows.Data;


73

Statikus erőforrás

<Window.Resources><local:HibaÁtalakító

x:Key="Átalakító" /></Window.Resources>


74

Hibaüzenet gyorstippben


75

Hibaüzenet TextBlock-ban


76

Az OK gomb kezelése


77

Egy csomópont alatti összes csomópont hibaállapotának ellenőrzése


78

windows presentation foundation (wpf)

Documents