Windows Presentation Foundation

Transkrypt

1 Windows Presentation Foundation

2 Tworzenie interfejsu użytkownika Współpraca projektanta i programisty (XAML) Interfejsy atrakcyjniejsze graficznie (np. 3D) Aplikacje internetowe (XBAP) Użycie Layoutów Style i szablony Interfejsy wielookienkowe i nawigacyjne

3 Rysowanie 2D i 3D Grafika i kontrolki jako elementy visual tree Transformacje i animacje Skalowalność (użycie grafiki wektorowej) Wykorzystanie możliwości karty graficznej Zamiana GDI+ na DirectX

4 Media Obrazy JPEG, BMP, GIF, TIFF, PNG i inne Audio i Video Kontrolka MediaElement WMV, MPEG, AVI Wykorzystanie Windows Media Player'a

5 Źródła danych Łączenie kontrolek ze źródłami danych np. TextBox'a z właściwością obiektu np. ListBox'a z dowolną kolekcją Klasa Binding

6 Binding <TreeView Name = "treeview"> <TreeViewItem... />... </TreeView> <TextBlock x:name = "currentfolder" Text = "{ Binding ElementName = treeview, Path = SelectedItem.Header}"/>

7 Dokumenty i czcionki Dokumenty niezmienne ten sam wygląd na ekranie i po wydruku XPS Dokumenty pływające lepsza czytelność dostosowywanie wyglądu np. do rozmiaru okna wygodniejsze przeglądanie Zaawansowany mechanizm obsługi czcionek OpenType, ClearType Teksty w formacie Unicode

8 Przykład

9 XAML (Extensible Application Markup Language) Język deklaratywny Oparty na XML'u Ułatwia współpracę projektanta z programistą Może być używany w połączeniu z C# (code behind)

10 XAML <WrapPanel Background="Pink"> <Button Content="Ala" /> <Button> <Button.Content> "Ela" </Button.Content> </Button> <Button> "Ola" </Button> </WrapPanel>

11 X A M L Uniwersalny język do tworzenia i inicjalizowania obiektów Stosowany nie tylko w WPF: Windows Workflow Foundation Windows Communication Foundation

12 Elementy i atrybuty <Button Content = "OK" Click = "button_click"/> X M L.NET deklaracja elementu == utworzenie obiektu ustawienie atrybutu == ustawienie właściwości lub ustawienie atrybutu == obsłużenie zdarzenia

13 Elementy właściwości(owe) <Button> <Button.Content> <Rectangle Height = "40" Width = "40"> </Button.Content> <Button.Background> <SolidColorBrush Color = "White"/> </Button.Background> </Button>

14 Elementy kolekcji <ListBox> <ListBox.Items> <ListBoxItem Content= Item 1 /> <ListBoxItem Content= Item 2 /> </ListBox.Items> </ListBox>

15 "content property" <Button> Ala </Button> <ListBox> <ListBoxItem Content= Item 1 /> <ListBoxItem Content= Item 2 /> </ListBox>

16 Rozmiary i położenie kontrolek Height, MinHeight, MaxHeight, ActualHeight Width, MinWidth, MaxWidth, ActualWidth Margin ( np. "0, 10, 20, 30"; "10, 20" "15" ) Padding HorizontalAlignment (Left, Center, Right, Stretch) VerticalAlignment (Top, Center, Bottom, Stretch)

17 Panele Canvas StackPanel WrapPanel DockPanel Grid

18 Canvas Domyślnie: kontrolki w lewym górnym rogu kontrolki nachodzą na siebie Właściwości Left Top Right Bottom ZIndex

19 Attached properties <Canvas> <Button Canvas.Left = "50" Canvas.Top = "30" Content = "OK" /> <Button Canvas.Bottom = "100" Canvas.Right = "30" Content = "Anuluj" /> </Canvas>

20 Attached properties <StackPanel TextElement.FontSize = "30"> <Button Content = "OK" /> <Button Content = "Anuluj" /> </StackPanel>

21 StackPanel Rozmieszczenie kontrolek: jedna obok drugiej jedna nad drugą Właściwość Orientation Vertical (domyślnie) Horizontal

22 WrapPanel Rozmieszczenie kontrolek: jedna obok drugiej jedna nad drugą jeśli się nie mieszczą w rzędzie lub kolumnie nowy rząd nowa kolumna Właściwości Orientation, ItemHeight, ItemWidth

23 DockPanel Rozmieszczenie kontrolek: wzdłuż czterech brzegów ostatnia wypełnia Właściwości Dock Left, Top, Right, Bottom LastChildFill true, false

24 Grid Rozmieszczenie kontrolek w formie tabeli określona ilość wierszy i kolumn Właściwości RowDefinitions RowDefinition.Height,...SharedSizeGroup ColumnDefinitions ColumnDefinition.Width,...SharedSizeGroup Row, RowSpan Column, ColumnSpan

25 GridSplitter Umożliwia użytkownikowi zmianę szerokości kolumn wysokości wierszy Właściwości HorizontalAlignment VerticalAlignment ResizeDirection Auto, Rows, Columns ResizeBehavior BasedOnAlignment, PreviousAndCurrent, CurrentAndNext, PreviousAndNext

26 Gdy coś się nie mieści Clipping właściwość ClipToBounds Scrolling ScrollViewer Scaling Viewbox Stretch ( None, Fill, Uniform, UniformToFill ) StretchDirection ( UpOnly, DownOnly, Both )

27 Transformacje LayoutTransform przed umieszczeniem elementu w kontenerze RenderTransform po umieszczeniu elementu w kontenerze RenderTransformOrigin środek transformacji

28 Transformacje RotateTransform ScaleTransform SkewTransform TranslateTransform MatrixTransform

29 Transformacje <Button Background= Yellow > <Button.RenderTransform> <ScaleTransform ScaleX= 2 ScaleY= 2 /> </Button.RenderTransform> Przeskalowany </Button>

30 Łączenie transformacji <Button> <Button.RenderTransform> <TransformGroup> <RotateTransform Angle= 45 /> <ScaleTransform ScaleX= 5 ScaleY= 1 /> <SkewTransform AngleX= 30 /> </TransformGroup> </Button.RenderTransform> OK </Button>

31 Kontrolki Content Controls Items Controls Others

32 Przyciski Typ bazowy BaseButton Button RepeatButton ToggleButton CheckBox RadioButton

33 Typ bazowy BaseButton Content HasContent Click IsPressed ClickMode Release Press Hover

34 Button IsDefault IsDefaulted IsCancel

35 RepeatButton Delay Interval

36 ToggleButton IsChecked ( true, false, null ) IsThreeState Zdarzenia Checked Unchecked Indeterminate

37 CheckBox... To tylko ToggleButton z innym wyglądem

38 RadioButton Dziedziczy po ToggleButton Może być zaznaczony jeden w grupie Użytkownik może tylko zaznaczać Grupowanie RadioButton'ów wspólny, bezpośredni rodzic właściwość GroupName

39 Routed event Zachodzi dla danego elementu visual tree, a następnie dla kolejnych elementów, aż do korzenia (Bubbling) Zachodzi dla korzenia visual tree, a następnie dla kolejnych elementów, aż do elementu, który był źródłem zdarzenia (Tunneling) Zachodzi tylko dla elementu źródłowego (Direct)

40 RoutedEventArgs Dziedziczy po System.EventArgs Zawiera: Source (logical tree) OriginalSource (visual tree) Handled RoutedEvent (jakie zdarzenie)

41 Bubbeling a Tunneling Większość zdarzeń jest typu Bubbeling Zdarzenia często występują parami Zdarzenie (np. KeyDown) PreviewZdarzenie (np. PreviewKeyDown) PreviewZdarzenie obsłużenie == anulowanie Zdarzenia (Handled=true) jest typu Tunneling elementy UI nie reagują na te zdarzenia

42 Zdarzenia klawiatury (Preview)KeyDown (Preview)KeyUp IsKeyboardFocusedChanged IsKeyboardFocusWithinChanged (Preview)GotKeyboardFocus (Preview)LostKeyboardFocus

43 Attached events (zdarzenia przyczepione) Zdarzenia "tunelują" i "bąbelkują także przez elementy, które takich zdarzeń nie zawierają Element może obsłużyć zdarzenie z innej klasy <Window Title = "Okno" Button.Click = "Metoda"> <Button Content = "Ala" /> <Button Content = "Ola" /> </Window>

44 Zdarzenia myszy MouseEnter, MouseLeave (Preview)MouseMove (Preview)MouseDown /...Up (Preview)MouseLeftButtonDown /...Up (Preview)MouseRightButtonDown /...Up (Preview)MouseWheel...

45 ListBox <ListBox> <Label> Ola </Label> <Button> Ala </Button> <Image Source = "obrazek.jpg" /> <sys:datetime> 1/1/2012 </sys:datetime> </ListBox>

46 Właściwość Items... typu ItemCollection content property Właściwość tylko do odczytu Każdy element może być dowolnym obiektem... i jest wyświetlany tak jak w ContentControl Elementy typu UIElement wyglądają jak zwykle Elementy innych typów == TextBlock (ToString( ))

47 Dependency properties Powiadamianie o zmianie wartości Dziedziczenie wartości Wielu "dostawców" wartości

48 Powiadamianie <Trigger Property = "IsMouseOver" Value = "True"> <Setter Property = "Foreground" Value = "Blue"/> </Trigger> Tylko w stylach i szablonach!

49 Wielu dostawców 1. Local value 2. Parent template trigger 3. Parent template 4. Style triggers 5. Template triggers 6. Style setters 7. Theme style triggers 8. Theme style setters 9. Property value inheritance 10. Default value