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 2.0 (pl. generikus) 2006 3.0 2.0 (pl. WPF) 2007 3.5 3.0 (pl. LINQ)

WPF – Új technológia Több mint 10 évig: Új technológiák: User32, Windows Forms: felhasználói felületek Windows-ra GDI, GDI+: grafikai támogatás Új technológiák: WPF: Window Forms helyett DirectX: 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 (JavaScript) 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="LightBlue"> <Button.Content> <Image Source="RightArrow.png"/> </Button.Content> </Button> Button button = new Button(); button.Width = 50; button.Background = new SolidColorBrush(Colors.LightBlue); Image image = new Image(); image.Source = new BitmapImage(new Uri("RightArrow.png", UriKind.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) Property elemként: <Button Content="Push"/> <Button> <Button.Content> <TextBlock Text="Push"/> </Button.Content> </Button>

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

Kontrolok Pl. Button, TextBox, TextBlock, CheckBox, RadioButton, Image Összetett pl.: ListBox, ComboBox, TabControl Elrendezés pl.: StackPanel, DockPanel, Grid

Sablonok (Templates) DataTemplate ItemsControl származékok (pl. ListBox) esetén ItemTemplate tulajdonság ListView esetén GridView nézetet használva beállítható a GridViewColumn.CellTemplate

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. <TextBox> <TextBox.Text> <Binding Path="Address" Mode="TwoWay"/> </TextBox.Text> </TextBox> Markup Extensions: <TextBox Text="{Binding Path=Address, Mode=TwoWay}"/>

Adatkötés (Data Binding) III. Source automatikus meghatározása: DataContext tulajdonság, melynek értéke a vizuális fában lefelé öröklődik A listakontrolok ItemsSource tulajdonsága: a kollekció elemei a lista elemeinek DataContext-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 TargetType="TextBox" x:Key="TB"> <Setter Property="FontSize" Value="16"/> <Setter Property="FontStyle" Value="Italic"/> <Setter Property="Background" Value="LightBlue"/> <Setter Property="Margin" Value="0,0,0,0"/> <EventSetter Event="TextChanged" Handler="TB_TextChanged"/> </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="IsSelected" Value="True"> <Setter Property="ForeGround" Value="Red"/> </Trigger> EventTrigger esetén akciók (Actions) megadása <EventTrigger RoutedEvent="MouseEnter"> <EventTrigger.Actions> ... </EventTrigger.Actions> </EventTrigger>

Animációk Tulajdonságalapú animációs rendszer Tulajdonságérték interpolációja egy intervallumban Vezérlés: StoryBoard objektum Minden „alaptípusra” használható animációs osztály pl. DoubleAnimation, Int32Animation,ColorAnimation <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="FontSize" To="32" Duration="0:0:1"/> </Storyboard> </BeginStoryboard>

Animációs osztályok ByteAnimation QuarternionAnimation ColorAnimation RectAnimation DecimalAnimation Rotation3DAnimation DoubleAnimation SingleAnimation Int16Animation SizeAnimation Int32Animation ThicknessAnimation Int64Animation VectorAnimation PointAnimation Vector3DAnimation Point3DAnimation

Transzformációk Bármely WPF-es UI-elem transzformálható a RenderTransform és LayoutTransform tulajdonságain keresztül eltolás: TranslateTransform skálázás: ScaleTransform forgatás: RotateTransform „döntés”: SkewTransform általános: MatrixTransform összetett: TransformGroup (mátrix kiszámítása)