Transcript bemutató - johanyak.hu

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
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
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
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
Felület kódból
J.Zs.Cs.: Vizuális programozás (c) 2012
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
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
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-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
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
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
Window and control
decoration
Menu, ToolBar, StatusBar, ToolTip,
ProgressBar
J.Zs.Cs.: Vizuális programozás (c) 2012
Media controls
Image, MediaElement,
SoundPlayerAction
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
Grid és DockPanel
J.Zs.Cs.: Vizuális programozás (c) 2012
StackPanel
Térköz nélkül helyezi el
az elemeket alapból
J.Zs.Cs.: Vizuális programozás (c) 2012
Canvas
J.Zs.Cs.: Vizuális programozás (c) 2012
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
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
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
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)
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)
Dependency property
Létrehozása Visual Studioban
– propdp <TAB> <TAB> - 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)
Dependency property
public string Tükör
{
get {
return(string)GetValue(TukorProperty);
}
set { SetValue(TukorProperty, value); }
}
public static readonly DependencyProperty TukorProperty =
DependencyProperty.Register("Tukor", typeof(string),
typeof(Tukorkep), null);
Attached property
Speciális Dependency Property
Pl.: Panel-től származó konténer
elemek
<Canvas>
<Button Canvas.Top="20"
Canvas.Left="20"
Content="Gomb"/>
</Canvas>
Value Resolution Strategy
J.Zs.Cs.: Vizuális programozás (c) 2012
Menü
<Menu x:Name="mnFőmenü" Height="30">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel
HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem Header="Kever" x:Name="miKever"
VerticalAlignment="Center" />
J.Zs.Cs.: Vizuális programozás (c) 2012
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) 2012
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>
J.Zs.Cs.: Vizuális programozás (c) 2012
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
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) 2012
Képek tárolása szerelvényen kívül
Properties
– Build Action=Content
– Copy to Output Directory=Copy always
Build/Rebuild Solution
Többsoros szövegmező
J.Zs.Cs.: Vizuális programozás (c) 2012
Jobbra igazított menüpont a
főmenüben
J.Zs.Cs.: Vizuális programozás (c) 2012
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 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
Eseménykezelés
XAML: Click="metódusnév"
attribútum
Automatikus vázgenerálás
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
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
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
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
Vezérlők csatolása
J.Zs.Cs.: Vizuális programozás (c) 2012
Jelszóbevitel
J.Zs.Cs.: Vizuális programozás (c) 2012
J.Zs.Cs.: Vizuális programozás (c) 2012
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
Beépített párbeszédablakok
MessageBox
Common Dialog Boxes – Közös
párbeszédablakok (Microsoft.Win32)
SaveFileDialog
OpenFileDialog
PrintDialog
J.Zs.Cs.: Vizuális programozás (c) 2012
Egyszerű üzenetablak
MessageBox.Show(
"Egyszerű üzenetablak");
J.Zs.Cs.: Vizuális programozás (c) 2012
Kétgombos
üzenetablak
J.Zs.Cs.: Vizuális programozás (c) 2012
Háromgombos
üzenetablak
J.Zs.Cs.: Vizuális programozás (c) 2012
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<bool> er= dlg.ShowDialog();
if (er== true)
{
string filename =
dlg.FileName;
}
J.Zs.Cs.: Vizuális programozás (c) 2012
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<bool> er= sfd.ShowDialog();
// Mire kattintottak
if (er== true)
{
// Elérési út
string Text = sfd.FileName;
…
}
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
}
Á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
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
Párbeszédablak használata
Menüpont
<MenuItem x:Name="miÚj" Header="Új ..."
Click="miÚj_Click"/>
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
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
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
Validate metódus
J.Zs.Cs.: Vizuális programozás (c) 2012
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
Validációs szabály vezérlőhöz
rendelése
J.Zs.Cs.: Vizuális programozás (c) 2012
Beállítások a párbeszédablak
osztályában
J.Zs.Cs.: Vizuális programozás (c) 2012
Hibás adatbevitelnél piros keret
a szövegmező körül
J.Zs.Cs.: Vizuális programozás (c) 2012
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
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
Átalakító osztály
using System.Windows.Controls;
using System.Windows.Data;
J.Zs.Cs.: Vizuális programozás (c) 2012
Statikus erőforrás
<Window.Resources>
<local:HibaÁtalakító
x:Key="Átalakító" />
</Window.Resources>
J.Zs.Cs.: Vizuális programozás (c) 2012
Hibaüzenet gyorstippben
J.Zs.Cs.: Vizuális programozás (c) 2012
Hibaüzenet TextBlock-ban
J.Zs.Cs.: Vizuális programozás (c) 2012
Az OK gomb kezelése
J.Zs.Cs.: Vizuális programozás (c) 2012
Egy csomópont alatti összes csomópont
hibaállapotának ellenőrzése
J.Zs.Cs.: Vizuális programozás (c) 2012
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
Tulajdonság gyűjtemény
J.Zs.Cs.: Vizuális programozás (c) 2012