Windows Presentation Foundation WPF alkalmazsok fejlesztse Kovsznai Gergely

Windows Presentation Foundation WPF alkalmazások fejlesztése Kovásznai Gergely kovasz@aries. ektf. hu Eszterházy Károly Főiskola, Információtechnológiai Tanszék

A. NET és a C# evolúciója. NET : a COM leváltására. NET CLR C# 2002 1. 0 2003 1. 1 2005 2. 0 2006 3. 0 2. 0 (pl. WPF) 2007 3. 5 3. 0 (pl. LINQ) 2. 0 (pl. generikus)

WPF – Új technológia �Több mint 10 évig: �User 32, Windows Forms: felhasználói felületek Windows-ra �GDI, GDI+: grafikai támogatás �Új technológiák: �WPF: Window Forms helyett �Direct. X: GDI+ helyett

Silverlight - WPF/E (WPF Everywhere) �WPF „részhalmaza” �webböngészőben fut (plug-in: IE, Firefox, Safari) �platformfüggetlen: Windows, Mac OS, Linux � 1. 0 -1. 1 verzió: �nem használható. NET Framework �. NET nyelvek (C#) helyett szkriptnyelvek (Java. Script) � 2. 0 verzió: �CLR beépítve, „könnyített” osztálykönyvtár �. NET nyelvek használhatóak � XAP-fájl = lefordított. NET szerelvények ZIP-elve

XAML (Extensible Application Markup Language) �Deklaratív nyelv �UI leírására („vizuális fa”) �tetszőleges CLR objektum példányosítására �Az UI és az alkalmazáslogika leírása szeparált �Generálható: Visual Studio, Expression Blend <Button Width="50" Background="Light. Blue"> <Button. Content> <Image Source="Right. Arrow. png"/> </Button. Content> </Button> Button button = new Button(); button. Width = 50; button. Background = new Solid. Color. Brush(Colors. Light. Blue); Image image = new Image(); image. Source = new Bitmap. Image(new Uri("Right. Arrow. png", Uri. Kind. Relative)); button. Content = image;

XAML alapok I. �Minden XAML elem egy objektumot példányosít �Objektumok tulajdonságai: �XAML attribútumként (értéke string-ről konvertálva) <Button Content="Push"/> �Property elemként: <Button> <Button. Content> <Text. Block Text="Push"/> </Button. Content> </Button>

XAML alapok II. �Content elemek: <Button> <Button. Content> <Image Source="push. png"/> </Button. Content> </Button> <Image Source="push. png"/> </Button>

Kontrolok �Pl. Button, Text. Box, Text. Block, Check. Box, Radio. Button, Image �Összetett pl. : List. Box, Combo. Box, Tab. Control �Elrendezés pl. : Stack. Panel, Dock. Panel, Grid

Sablonok (Templates) �Data. Template �Items. Control származékok (pl. List. Box) esetén Item. Template tulajdonság �List. View esetén Grid. View nézetet használva beállítható a Grid. View. Column. Cell. Template

Adatkötés (Data Binding) I. �Egy forrásobjektum egy tulajdonságának „hozzákötése” az UI egy célobjektumának egy tulajdonságához �Binding objektum: � Source: forrásobjektum � Path: a forrásobjektum kötendő tulajdonsága � Mode: kötés iránya

Adatkötés (Data Binding) II. <Text. Box> <Text. Box. Text> <Binding Path="Address" Mode="Two. Way"/> </Text. Box. Text> </Text. Box> Markup Extensions: <Text. Box Text="{Binding Path=Address, Mode=Two. Way}"/>

Adatkötés (Data Binding) III. �Source automatikus meghatározása: �Data. Context tulajdonság, melynek értéke a vizuális fában lefelé öröklődik �A listakontrolok Items. Source tulajdonsága: �a kollekció elemei a lista elemeinek Data. Context-jeként beállítódnak

Stílusok (Styles) �A filozófiája hasonló a CSS-hez �Tulajdonságok értékei és eseménykezelők <Style Target. Type="Text. Box" x: Key="TB"> <Setter Property="Font. Size" Value="16"/> <Setter Property="Font. Style" Value="Italic"/> <Setter Property="Background" Value="Light. Blue"/> <Setter Property="Margin" Value="0, 0, 0, 0"/> <Event. Setter Event="Text. Changed" Handler="TB_Text. Changed"/> </Style> �Ha erőforráskulcs nincs megadva, akkor explicit

Triggerek �„Animáció” indítása valamilyen esemény hatására �„Sima” Trigger esetén tulajdonságok értékeinek megadása (Setter) <Trigger Property="Is. Selected" Value="True"> <Setter Property="Fore. Ground" Value="Red"/> </Trigger> �Event. Trigger esetén akciók (Actions) megadása <Event. Trigger Routed. Event="Mouse. Enter"> <Event. Trigger. Actions>. . . </Event. Trigger. Actions> </Event. Trigger>

Animációk �Tulajdonságalapú animációs rendszer �Tulajdonságérték interpolációja egy intervallumban �Vezérlés: Story. Board objektum �Minden „alaptípusra” használható animációs osztály � pl. Double. Animation, Int 32 Animation, Color. Animation <Begin. Storyboard> <Double. Animation Storyboard. Target. Property="Font. Size" To="32" Duration="0: 0: 1"/> </Storyboard> </Begin. Storyboard>

Animációs osztályok �Byte. Animation �Color. Animation �Decimal. Animation �Double. Animation �Int 16 Animation �Int 32 Animation �Int 64 Animation �Point 3 DAnimation �Quarternion. Animation �Rect. Animation �Rotation 3 DAnimation �Single. Animation �Size. Animation �Thickness. Animation �Vector 3 DAnimation

Transzformációk �Bármely WPF-es UI-elem transzformálható a Render. Transform és Layout. Transform tulajdonságain keresztül �eltolás: Translate. Transform �skálázás: Scale. Transform �forgatás: Rotate. Transform �„döntés”: Skew. Transform �általános: Matrix. Transform �összetett: Transform. Group (mátrix kiszámítása)