Instytut Informatyki UP-H w Siedlcach 1/91 dr Grzegorz Terlikowski WPF/Silverlight

Instytut Informatyki UP-H w Siedlcach 2/91 Microsoft WPF  WPF (Windows Presentation Fundation) – jest frameworkiem UI następnej generacji do tworzenia RIA firmy Microsoft – jest następcą Windows Forms.  Prace rozpoczęły się w 2002 roku natomiast pierwsza wersja została udostępniona w 2006 roku wraz z.NET Framework 3.0.  Bazuje na platformie.NET dzięki czemu pozwala aplikacje można pisać w dowolnym języku programowania opartym na CLR (Common Library Runtime).  Ponadto wspiera także technologie AJAX.

Instytut Informatyki UP-H w Siedlcach 3/91 Microsoft Silverlight  Silverlight znany wcześniej jako WPF/E jest technologią internetową umożliwiającą prezentację treści multimedialnych w oknie przeglądarki.  Prace rozpoczęły się w 2005 roku, natomiast pierwsza wersja ukazała się w grudniu  Obie technologie bazują na silniku renderującym, wykorzystującym akcelerację sprzętową nowoczesnych kart graficznych.

Instytut Informatyki UP-H w Siedlcach 4/91 Microsoft Silverlight Do działania wymaga:  zainstalowania przeglądarce  Windows - wtyczki Silverlight plugin  opensorsowego pluginu Moonlight lub oprogramowania Wine.  Od wersji Silverlight 3 może działać poza przeglądarką, w bezpiecznym sandbox-ie  Istnieją też (okrojone) biblioteki pod Windows Phone. Przeznaczenie:  Różne przeglądarki internetowe,  Różne systemy operacyjne.

Instytut Informatyki UP-H w Siedlcach 5/91 Microsoft Silverlight - architektura  Możliwość wykorzystania języków.NET, Python i Ruby,  W skład Silverlight wchodzi język XAML (eXtensible Application Markup Language) – podzbiór WPF,  Kod XAML może być umieszczony w: treści strony, osobnym pliku lub pakiecie,  Dokumenty XAML dostępne są z poziomu JavaScript za pośrednictwem modelu DOM,  Możliwość uruchomienia programu w lokalnej piaskownicy (poza przeglądarką),

Instytut Informatyki UP-H w Siedlcach 6/91 Microsoft Silverlight – narzędzia (1) Zestaw aplikacji pakietu Expression Studio: 1.Expression Web - wizualny edytor stron WWW. 2.Expression Media - aplikacja do zarządzania multimediami w projekcie. 3.Expression Design - aplikacja graficzna pozwalająca na tworzenie elementów graficznych do wykorzystania w interfejsie aplikacji Silverlight. Wspiera między innymi formaty Adobe PSD (.PSD) i Adobe Illustrator (.AI) oraz Windows Media Photos (.WDP,.HDP). 4.Expression Blend - program podobny do AdobeFlash Builder. Pozwala na tworzenie gotowych interfejsów graficznych aplikacji, także animacji, oraz na podgląd i modyfikację pliku XAML, jaki powstanie podczas eksportu danych graficznych. 5.Expression Encoder - narzędzie do przygotowywania wideo (kodowanie do WMV w standardzie VC-1 (część standardu Blue- Ray) oraz H.264 (format MPEG)) wykorzystywanego przez odtwarzacz Microsoft Silverlight.

Instytut Informatyki UP-H w Siedlcach 7/91 Microsoft Silverlight – narzędzia (5) Dodatkowe narzędzie:  Microsoft Deep Zoom Composer – Program pozwala w trzech krokach (import, ułożenie sceny i eksport) zoptymalizować wyświetlanie fotografii.  Elementy graficzne zostają podzielone na fragmenty, a te z kolei zapisane w różnych rozmiarach.  Dzięki temu potem na stronie możemy je płynnie powiększać.  Plik wynikowy możemy umieścić bezpośrednio w kodzie HTML lub wskazać jako źródło danych dla kontrolki MultiScaleImage.

Instytut Informatyki UP-H w Siedlcach 8/91 Microsoft Silverlight - możliwości Silverlight (podobnie jak Flex)jest idealnym rozwiązaniem następujących sytuacjach, obejmujących wiele rzeczywistych zastosowań:  dostarczanie multimediów przez Internet — rozbudowane prezentacje łączące zdarzenia, materiały wideo i marketingowe, dynamiczne pliki wideo z reklamami, odtwarzanie plików dźwiękowych itp.;  wyspy bogatej zawartości na stronie (miniaplikacje) — okolicznościowe gry i gadżety;  elementy wizualizacyjne — elementy nawigacyjne, wizualizacja danych, reklamy.

Instytut Informatyki UP-H w Siedlcach Microsoft Silverlight – zalety Zalety:  Działa na wielu przeglądarkach i pod kontrolą różnych systemów operacyjnych (głównie Windows i Macintosh),  Aplikacje Silverlight mogą być w dużym stopniu tekstowe, co ma ułatwić ich pozycjonowanie w wyszukiwarkach,  Pozwala tworzyć aplikacje o bardziej efektownym wyglądzie w porównaniu ze standardowymi rozwiązaniami,  Zaawansowana obsługa multimediów (audio i wideo),  Wspiera wiele technologii firmy Microsoft (WCF, LINKQ).  Niezależność od serwerów WWW; 9/91

Instytut Informatyki UP-H w Siedlcach Microsoft Silverlight – wady Wady:  Większy rozmiar przesyłanych plików ze względu na brak kompresji,  Pod linuxem trzeba korzystać z niewspieranego już opensource-owego playera (Moonlight) lub oprogramowania Wine (pod nazwą pipelight).  Mniejsza w porównaniu z Flash popularność wśród programistów spowodowana niechęcią użytkowników do instalowania dodatkowego plugina, 10/91

Instytut Informatyki UP-H w Siedlcach XAML(eXtensible Application Markup Language 11/91

Instytut Informatyki UP-H w Siedlcach Język XAML  XAML(eXtensible Application Markup Language), jest opartym na XML znacznikowym językiem programowania.  W tagach można znaleźć różne słowa kluczowe, które mogą oznaczać nazwę klasy, jej właściwości itd.  Zadaniem kompilatora XAML-a jest przepisywanie ich do wspólnego środowiska CLR. 12/91

Instytut Informatyki UP-H w Siedlcach Język XAML - Własności Istnieją dwa podstawowe sposoby deklarowania właściwości w XAML-u. Składnia atrybutowa (ang. attribute syntax) – wszystkie własności obiektu są podawane wewnątrz głównego tagu i są nazywane atrybutami. Składnia elementów własności (ang. property element syntax) – kosztuje programistę więcej wysiłku, ale w wielu sytuacjach (w przypadku zagnieżdżania obiektów) jest koniecznością. Składnia mieszana – nic nie stoi na przeszkodzie, aby mieszać obydwa sposoby definiowania własności Obiektów. 13/91

Instytut Informatyki UP-H w Siedlcach Język XAML – Atrybuty dołączone  Język XAML udostępnia ciekawy mechanizm dołączonych właściwości (ang. attached properties).  Działanie polega na tym, że istnieją pewne szczególne właściwości, które mogą być przypisane do jakiegokolwiek elementu wizualnego technologii Silverlight.  Właściwości dołączone nie muszą występować na liście członków danej klasy. typ obcy typ obca własność wartość 14/91

Instytut Informatyki UP-H w Siedlcach Język XAML – Korzeń dokumentu  Silverlight umożliwia tworzenie własnych kontrolek,  Najprostszą metodą jest dziedziczenie po klasie UserControl, lub Control (jeśli programista chce mieć możliwość używania szablonów na swojej kontrolce),  Korzeniem dokumentu. xaml jest element UserControl,  Pisanie aplikacji Silverlight jest zawsze tworzeniem nowej kontrolki. 15/91

Instytut Informatyki UP-H w Siedlcach Microsoft Silverlight – Język XAML – Przestrzenie nazw  Domyślna przestrzeń nazw – zawarte są w niej definicje obiektów, których używamy w aplikacji ( Button, StackPanel, TextBox ) xmlns="  Dodatkowa przestrzeń nazw „ x ” – zawiera kilka ważnych konstrukcji, np.  x:Key – ustala unikalny klucz w katalogu zasobów,  x:Name – ustala unikalną nazwę obiektu.  x:Class – definiuje przestrzeń nazw i klasę, która dostarcza code-behind. xmlns:x=" 16/91

Instytut Informatyki UP-H w Siedlcach Język XAML – domyślne własności znaczników  Własność domyślna, nazywana jest też treścią znacznika, jest to cecha języka XAML, dzięki której w pewnych przypadkach nie musimy pisać w kodzie nazwy własności, którą definiujemy (podobnie jest we Flex).  Przykładowo domyślną własnością dla obiektów klas:  UserControl i Button jest Content,  TextBlock jest Text,  dla wszystkich kontenerów (np. Canvas, Grid, StackPanel ) własnością domyślną jest Children, 17/91

Instytut Informatyki UP-H w Siedlcach Język XAML – Zdarzenia  Zdarzenia deklarowane są w pliku. xaml, natomiast ich obsługa zakodowana jest w pliku.cs (dla C#) lub.vs (dla Visual Basic).  Przypisanie zdarzenia Click o nazwie Button_Click wygląda podobnie jak definicja własności napisana przy pomocy składni atrybutowej, jednak nie istnieje w tym przypadku alternatywny sposób zapisu. 18/91

Instytut Informatyki UP-H w Siedlcach Język XAML – obsługa zdarzeń  Kontrolki XAML-a mogą być jednoznacznie identyfikowane i modyfikowane z poziomu kodu za pomocą nazw. W tym celu należy w kontrolce należy określić atrybut x:Name.  Jednym z argumentów wywołania funkcji obsługującej zdarzenie jest obiekt, który to zdarzenie wywołał. 19/91

Instytut Informatyki UP-H w Siedlcach Język XAML – Rozszerzenia znaczników  Rozszerzenia znaczników (ang. markup extensions) to własność XAML-a, dzięki której możliwe jest realizowanie skomplikowanych mechanizmów, takich jak szablony, czy bindowanie danych,  Rozszerzenia definiujemy najczęściej wykorzystując składnię atrybutową,  Składnia przyjmuje postać: gdzie, definicja rozszerzenia zależy od tego z jakim typem rozszerzenia mamy do czynienia i jest w postaci: {TypRozszerzenia ArgumentyRozszerzenia} UWAGA: Niemal każdy element wizualny może posiadać własny tzw. katalog zasobów. W takim katalogu możemy definiować zasoby, które będą dostępne dla niego i jego dzieci. 20/91

Instytut Informatyki UP-H w Siedlcach Język XAML – Wiązanie danych – Rozszerzenia znaczników – Typy Można korzystać z następujących typów rozszerzeń: 1.StaticResource – statyczne zasoby, są przypisywane do komponentu tylko raz, podczas uruchomienia aplikacji. Gdy zasób zostanie zmieniony, komponenty które z niego korzystały nie zaktualizują swoich własności. 2.DynamicResource – dynamiczne zasoby będą na bieżąco aktualizowane również w komponentach je wykorzystujących. 3.Binding – wiążące dane. 21/91

Instytut Informatyki UP-H w Siedlcach Język XAML – Wiązanie danych – Przykład rozszerzenia statycznego Składnia rozszerzenia statycznego wygląda następująco: Gdzie, KluczZasobu to nazwa zasobu, dzięki której jest on identyfikowany w katalogu. 22/91

Instytut Informatyki UP-H w Siedlcach Silverlight – Kontenery i pozycjonowanie 23/91

Instytut Informatyki UP-H w Siedlcach Pozycjonowanie Pozycjonowanie kontrolek odbywa się przy pomocy kontenerów. Silverlight 5 posiada tylko trzy typy kontenerów (w WPF jest 7) 1.Panel stosu – StackPanel, 2.Siatka – Grid, 3.Płótno – Canvas, Pozycję obiektu określają: 1.Zależność rodzic-dziecko (element musi być wewnątrz kontenera względem, którego jest pozycjonowany), 2.Właściwości kontenera (np. Orientation w StackPanel ), 3.Atrybuty dołączone do elementu pozycjonowanego (np. Canvas.Left ), Istnieją dwa typy pozycjonowania relatywne ( StackPanel, Grid ) i absolutne ( Canvas ). 24/91

Instytut Informatyki UP-H w Siedlcach  Grid, jest najbardziej zaawansowanym kontenerem Silverlight.  Definiowanie wierszy/kolumn siatki odbywa się poprzez ustawienie własności ColumnDefinitions i RowDefinitions.  Wartości można podawać w sposób statyczny(piksele) lub procentowy(100% jest reprezentowane przez *), Pozycjonowanie – Grid 25/91

Instytut Informatyki UP-H w Siedlcach Pozycjonowanie – Canvas Canvas jest jedynym kontenerem umożliwiającym pozycjonowanie absolutne. Odbywa się to poprzez ustawienie dołączonych atrybutów Canvas.Left, Canvas.Top oraz Canvas.ZIndex. Domyślnie wszystkie właściwości posiadają wartość 0. 26/91

Instytut Informatyki UP-H w Siedlcach Kontrolki – biblioteki Własności kontrolek zależą od klas, po których dziedziczą. Kontrolki Silverlight mogą dziedziczyć po klasach takich jak: 1.Control (np. Button, ListBox ), 2.Shape (np. Rectangle, Elipse, Path ), 3.Geometry (np. PathGeometry ), 4.Panel (np. Grid, StackPanel, Canvas ), Powyższe elementy dziedziczą z jeszcze bardziej ogólnych klas takich jak: UIElement lub FrameworkElement. 27/91

Instytut Informatyki UP-H w Siedlcach Kontrolki – Komponowanie  Kontrolki w WPF/Silverlight są wyjątkowo podatne na komponowanie.  Można użyć kontrolki dowolnego typu jako zawartości innej.  Właściwe używanie tej cechy umożliwia osiągnięcie wyjątkowych efektów,  Przykładowo, można umieścić obrazek w przycisku. 28/91

Instytut Informatyki UP-H w Siedlcach Grafika i multimedia w Silverlight 29/91

Instytut Informatyki UP-H w Siedlcach Grafika i multimedia WPF i Silverlight udostępniają różnego rodzaju elementy graficzne. Wśród nich są:  Pędzle ( Brush ),  Figury geometryczne ( Rectangle, Ellipse ),  Ścieżki ( Path )  Obrazy ( Image ),  MediaElement – odtwarzanie filmów,  Tworzenie galerii z wykorzystaniem technologii DeepZoom ( MultiScaleImage ). Ponadto można korzystać z:  Bitmap API,  PixelShaders,  Praca z tekstem (wsparcie dla lokalnych czcionek),  Akceleracja hardwerowa GPU,  Kolory systemowe. 30/91

Instytut Informatyki UP-H w Siedlcach Grafika i multimedia – Pędzle  Mechanizm pędzli pozwala na „malowanie” elementów interfejsu.  Dzięki pędzlom możliwe jest wypełnienie obiektu nie tylko jednolitym kolorem, lecz również gradientami, bitmapami, a nawet plikami filmowymi.  Pędzle mogą być użyte do malowania całych kontrolek, jak i teł oraz obramowań. 31/91

Instytut Informatyki UP-H w Siedlcach Grafika i multimedia – Pędzle – Typy Wyróżniamy następujące pędzle:  SolidColorBrush – pędzel o jednolitym kolorze,  LinearGradientBrush – pędzel z liniowym gradientem,  RadialGradientBrush – pędzel z radialnym gradientem,  ImageBrush – pędzel, którego źródłem jest plik graficzny,  VideoBrush – pędzel, którego źródłem jest plik wideo. 32/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych i Szablony 33/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych 1.Dzięki wiązaniu danych możemy sprzęgnąć (związać) wartość własności obiektu z polem napisanej przez nas klasy, 2.Wiele kontrolek (wiele właściwości) może być podwiązane pod jedno pole klasy, 3.Zmiana własności w jednej kontrolce, powoduje aktualizację drugiej kontrolki. Kontrolka1 Własność wiążąca Klasa wiążąca Pole wiążące Kontrolka2 Własność wiążąca 34/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych – Klasy wiążące Aby związać dane programista powinien: 1.Napisać klasę wiążącą (w pliku.cs), przy czym musi ona spełniać następujące warunki:  Musi implementować interfejs typu INotifyPropertyChanged, który wymusza zdefiniowanie zdarzenia typu PropertyChangedEventHandler,  Musi mieć zestaw pól, które służą do wiązania własności kontrolek,  Musi zgłaszać zmianę wartości któregokolwiek pola, 2.W XAML u rozszerzyć własności kontrolek, które mają być związane z klasą przy użyciu znacznika typu Binding. 35/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych – Przykład 36/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych – sposoby przepływu danych Mode jest to opcja, która definiuje, w jaki sposób mają przepływać dane w wiązaniu. Może ona przyjmować trzy różne wartości:  OnWay (domyślna) – przepływ jednostronny. Wartość własności zmieni się tylko wtedy, gdy zmieni się pole klasy z nią związanej,  TwoWay – przepływ dwustronny. Pole klasy zmieni się również, gdy zmieni się wartość własności komponentu,  OneTime – przepływ jednorazowy. Wartość własności zostanie zaktualizowana tylko przy uruchamianiu aplikacji. 37/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych – przypisywanie źródeł danych Aby dane zawarte w klasie wiążącej były dostępne z poziomu różnych kontrolek, należy: 1.ustawić właściwość DataContext tzw. kontekst danych (ang. data context) dla ich rodzica. Ten sposób jest wykorzystywany przy bindingu do 1 wartości, lub 2.ustawić ich właściwości ItemsSource (dla każdej z nich z osobna). Ten sposób jest wykorzystywany głównie przy bindingu do kolekcji. 38/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych – definiowanie kontekstu danych (1) Kontekst danych definiuje jakiego obiektu powinny używać kontrolki podrzędne jako swojego źródła danych dla powiązań. Aby ustawić kontekst danych należy w obsłudze zdarzenia Loaded, (które jest wywoływane przy starcie aplikacji): 1.Utworzyć instancję klasy wiążącej, 2.Ustawić ją jako kontekst danych (własność DataContext ). 39/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych – definiowanie kontekstu danych (2)  Kontekstu nie trzeba przypisywać do każdej kontrolki (chociaż nie jest to zakazane), w której definiowane jest wiązanie (binding).  Zamiast tego przypisujemy kontekst dla kontrolki nadrzędnej.  Kontekst danych jest dziedziczony przez dzieci obiektu, dla którego został zdefiniowany 40/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych – DataGrid  DataGrid to kontrolka, która znajduje się w bibliotece System.Windows.Controls.Data  Daje ona możliwość elastycznego wyświetlania dużych porcji danych w postaci tabelarycznej.  Dane wyświetlane są w kolumnach i wierszach.  Typy kolumn możemy zdefiniować, wybierając jedną z trzech możliwości: 1.DataGridTextColumn – wyświetla dane w formie tekstowej, 2.DataGridCheckBoxColumn – pozwala na przedstawienie wartości logicznych w formie CheckBox -a, 3.DataGridTemplateColumn – pozwala stworzyć kolumny z dowolną zawartością, korzystając z mechanizmu szablonów. 41/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych – właściwość ItemsSource Aby wypełnić kontrolkę informacjami, należy skorzystać z właściwości ItemsSource, której należy przypisać źródło danych – może nim być dowolna kolekcja implementująca interfejs IEnumerable. W analogiczny sposób możemy postąpić z kontrolkami ListBox i ComboBox. 42/91

Instytut Informatyki UP-H w Siedlcach Wiązanie danych – klasy złożone jako źródło danych Źródłem danych może być również lista obiektów pewnej klasy. Kontrolka dobiera typy i nazwy kolumn, dzięki domyślnemu ustawieniu atrybutu AutoGenerateColumns na True. 43/91

Instytut Informatyki UP-H w Siedlcach Szablony (1) Po wyłączeniu flagi AutoGenerateColumns można samodzielnie decydować o wyglądzie kontrolki. DataGridTemplateColumn jest szablonem całej kolumny umożliwiającym zdefiniowanie własnego wyglądu komórki, przy wykorzystaniu jego właściwości:  CellTemplate – definiuje wygląd komórki w trybie do odczytu,  CellEditingTemplate – definiuje wygląd komórki w trybie edycji, Wartościami powyższych właściwości są szablony DataTemplate i w których definiujemy jak dana komórka powinna wyglądać w poszczególnych trybach. 44/91

Instytut Informatyki UP-H w Siedlcach Szablony (2) Po wyłączeniu flagi AutoGenerateColumns można samodzielnie decydować o wyglądzie kontrolki. 45/91

Instytut Informatyki UP-H w Siedlcach Szablony – Konwertowanie danych (1) Z komórkami można powiązać tzw. konwertery danych, które formatują dane wyświetlane w komórce. Aby utworzyć i podłączyć konwerter danych należy: 1.Zaimplementować interfejs IValueConverter, który udostępnia dwie metody Convert i ConvertBack, 2.Utworzyć obiekt konwertera jako statyczne źródło danych w pliku *.xaml, 3.podłączyć go do komórki wykorzystując atrybut Converter. Brzydko 46/91

Instytut Informatyki UP-H w Siedlcach Szablony – Konwertowanie danych (2) Implementacja konwertera danych Przestrzeń nazw, do której należy nasz konwerter Tworzenie konwertera jako zasobu Ustawienie konwertera jako zasobu statycznego 47/91

Instytut Informatyki UP-H w Siedlcach Szablony – Sekcja szczegółów w DataGrid Dodatkowo do kontrolki DataGrid, można dodać sekcję szczegółów. Odbywa się to przy użyciu szablonu RowDetailsTemplate. Sekcja szczegółów ma postać dodatkowego wiersza pojawiającego się bezpośrednio pod wybranym elementem. 48/91

Instytut Informatyki UP-H w Siedlcach Szablony – Szablony jako zewnętrzne zasoby (1) Wszystkie szablony można umieścić jako zasób, który jest następnie podłączany do kontrolki DataGrid. 49/91

Instytut Informatyki UP-H w Siedlcach Szablony – Szablony jako zewnętrzne zasoby (2) Jeszcze innym rozwiązaniem jest utworzenie katalogu zasobów, jako zewnętrznego pliku XAML. 50/91

Instytut Informatyki UP-H w Siedlcach Szablony – Katalogi zasobów W przypadku gdy repozytoria szablonów znajdują się w innym katalogu niż projekt, można je podłączyć w następujący sposób. lub W ten sposób można współdzielić katalogi zasobów pomiędzy różnymi aplikacjami 51/91

Instytut Informatyki UP-H w Siedlcach Szablony – Szablony w innych kontrolkach Szablony możemy zdefiniować również dla innych komponentów np. ListBox i ComboBox. 52/91

Instytut Informatyki UP-H w Siedlcach Animacje w Silverlight 53/91

Instytut Informatyki UP-H w Siedlcach Animacje – Secenariusze  Animacje w Silverlight można grupować wykorzystując obiekty Storyboard, czyli scenariusze.  Scenariusze mogą składać się z jednej lub kilku animacji.  Klasa Storyboard posiada atrybuty, które są dołączane przez (zagnieżdżone w nim) obiekty animacji i są niezbędne do ich prawidłowego działania:  Storyboard.TargetName – nazwa obiektu (określonego przez atrybut x:Name ), którego dotyczy animacja.  Storyboard.TargetProperty – nazwa właściwości, której wartości mają być animowane (podmienione przez animację). 54/91

Instytut Informatyki UP-H w Siedlcach Animacje – Scenariusze (2) Scenariusze są traktowane jako zasób i są umieszczane w znaczniku Resources, lub w katalogu zasobów. Aby uruchomić scenariusz należy wywołać na nim metodę Begin(). 55/91

Instytut Informatyki UP-H w Siedlcach Animacje – Typy Silverlight wspiera dwa typy animacji: 1.Animacje podstawowe – są to animacje typu From/To/By, gdzie:  From – określa początkową wartość własności,  To – określa końcową wartość własności  By – wartość, o którą ma się zmienić wartość początkowa. 2.Animacje zaawansowane – wykorzystują one mechanizm klatek kluczowych ( Frames ). Ten typ animacji pozwala na dokładniejszą kontrolę, 56/91

Instytut Informatyki UP-H w Siedlcach Animacje – DoubleAnimation Najprostszą animacją typu From/To/By jest DoubleAnimation. Animacja ta produkuje wartości typu Double. Za jej pomocą można animować takie właściwości jak Width, Height, Opacity, a także Canvas.Left i Canvas.Top. Oś czasu 57/91

Instytut Informatyki UP-H w Siedlcach Animacje – ColorAnimation ColorAnimation podmienia wartości typu Color. Najczęściej wykorzystuje się ją do animowania własności Fill, Foreground i Background. Oś czasu 58/91

Instytut Informatyki UP-H w Siedlcach Animacje – PointAnimation PointAnimation produkuje wartości typu Point. Oś czasu 59/91

Instytut Informatyki UP-H w Siedlcach Animacje – Sposoby wskazania własności do animowania Istnieją dwa sposoby wskazania własności do animowania:  Wskazanie pośrednie  Wskazanie bezpośrednie 60/91

Instytut Informatyki UP-H w Siedlcach Animacje – Klatki kluczowe (1)  Jeśli chcemy mieć wpływ na dynamikę animacji, musimy skorzystać z mechanizmu klatek kluczowych.  Każda prosta animacja ma swój odpowiednik w postaci animacji z klatkami kluczowymi.  DoubleAnimationUsingKeyFrames – produkuje wartości typu Double.  ColorAnimationUsingKeyFrames – produkuje wartości typu Color,  PointAnimationUsingKeyFrames – produkuje wartości typu Point,  ObjectAnimationUsingKeyFrames – produkuje obiekty, 61/91

Instytut Informatyki UP-H w Siedlcach Animacje – Klatki kluczowe(2)  Animacje z klatkami kluczowymi posiadają (zamiast From/To/By ) właściwość KeyFrames, która jest kolekcją przechowującą klatki.  Klatki kluczowe definiują jakie wartości ma generować animacja i w jaki sposób ma to robić.  Właściwość KeyFrames jest własnością domyślną animacji.  Każda animacja wykorzystująca klatki kluczowe wykorzystuje własny zestaw klatek.  Podstawowym rodzajem klatki dla animacji DoubleAnimationUsingKeyFrames jest LinearDoubleKeyFrame. 62/91

Instytut Informatyki UP-H w Siedlcach Animacje – Klatki kluczowe – właściwości Wszystkie klatki posiadają wspólne właściwości oraz takie same typy interpolacji. Wspólnymi właściwościami wszystkich klatek są: 1.KeyTime – określa czas (w formacie h:m:s) wystąpienia animacji, 2.Value – wartość własności animowanej w danej klatce kluczowej. Jej typ zależy od tego, jakiego rodzaju animacji używamy, Powyższy zapis oznacza, że animowana własność ma mieć wartość równą 1, w drugiej sekundzie animacji. 63/91

Instytut Informatyki UP-H w Siedlcach Animacje – Klatki kluczowe – Interpolacje  Animacje są określonego typu, trwają pewien czas oraz mają swoją wartość początkową i końcową.  Interpolacja jest sposobem, w jaki generowane są wartości animacji od wartości początkowej do końcowej.  Interpolacje są następujące:  Liniową (ang. linear) – kolejne wartości różnią się o stałą wartość,  Dyskretną (ang. discrete) – polega na tym, że przez cały czas trwania animacji generowana jest wartość początkowa, a w momencie jej zakończenia produkowana jest wartość końcowa,  Splajnową (ang. spline) – daje największe możliwości i polega na tym że określany jest kwadratowy punkt Beziera, który implikuje dynamikę generowania wartości. 64/91

Instytut Informatyki UP-H w Siedlcach Animacje – Klatki kluczowe – Interpolacja liniowa Oś czasu 65/91

Instytut Informatyki UP-H w Siedlcach Animacje – Klatki kluczowe – Interpolacja dyskretna Natychmiastowy przeskok Złożona wartość, którą jest obiekt 66/91

Instytut Informatyki UP-H w Siedlcach Animacje – Klatki kluczowe – Interpolacja splajnowa  Klatki z interpolacją splajnową posiadają dodatkową właściwość KeySpline, której wartość określa sposób przeprowadzania tego typu interpolacji.  Wartość KeySpline to definicja kwadratowego punktu Beziera. Założeniem jest że KeySpline zaczyna się w punkcie 0.0,0.0, a kończy 1.0,1.0, a programista ma wpływ na pozostałe dwa punkty kontrolne. 67/91

Instytut Informatyki UP-H w Siedlcach Animacje – Klatki kluczowe – Interpolacja splajnowa W powyższym przykładzie, animowana Elipsa... 1.Dynamicznie przyspiesza, 2.w mniej niż połowie drogi powoli zwalnia, 3.Zatrzymuje się, 4.Zaczyna powoli przyspieszać, 5.Dynamicznie zatrzymuje się we wskazanym miejscu. 68/91

Instytut Informatyki UP-H w Siedlcach Animacje – Funkcje dynamiki  W Silverlight 3 zostały wprowadzone funkcje dynamiki, które są umieszczane wewnątrz właściwości EasingFunction.  Każda funkcja dynamiki posiada właściwość EasingMode, która może przyjmować wartość EaseIn, EaseOut lub EaseInOut.  EasingFunction także może być elementem animacji prostych. 69/91

Instytut Informatyki UP-H w Siedlcach Animacje – Funkcje dynamiki  W przypadku animacji wykorzystujących klatki kluczowe, EasingFunction jest właściwością specjalnych klatek kluczowych,  Easing_TypAnimacji_KeyFrame. Funkcje dynamiki można postrzegać jako kolejną interpolacje. 70/91

Instytut Informatyki UP-H w Siedlcach Animacje – Funkcje dynamiki – Rodzaje Silverlight 4 posiada bogaty zbiór funkcji dynamiki. 71/91

Instytut Informatyki UP-H w Siedlcach Animacje – Klatki kluczowe w Expression Blend Expression Blend posiada narzędzie Objects and Timeline, wspierające proces tworzenia animacji z wykorzystaniem klatek kluczowych. 72/91

Instytut Informatyki UP-H w Siedlcach Transformacje 3D w Silverlight 73/91

Instytut Informatyki UP-H w Siedlcach Transformacje 3D  Technologia Silverlight (od wersji 3) umożliwia obrót, każdego elementu dziedziczącego po UIElement w 3 wymiarach (3D) przez ustawienie własności Projection,  Silverlight 4 nie posiada prawdziwego środowiska 3D – w prawdziwym 3D wszystkie obiekty żyją w jednej przestrzeni, natomiast w Silverlight, każdy obiekt posiada własną przestrzeń,  Aby dokonać iluzji 3D programista musi wszystkie obiekty (ich przestrzenie) zsynchronizować. 74/91

Instytut Informatyki UP-H w Siedlcach Transformacje 3D  Do właściwości Projection można przypisać dwa obiekty:  PlaneProjection – do zwykłych projekcji 3D,  Matrix3DProjection – do bardziej wyrafinowanych projekcji,  Każda projekcja logicznie posiada swoją własną kamerę,  Aby spozycjonować więcej niż jeden obiekt względem tej samej kamery, należy użyć atrybutów GlobalOffsetX, GlobalOffsetY, i GlobalOffsetZ.  Aby spozycjonować obiekt względem lokalnej kamery należy użyć atrybutów LocalOffsetX, LocalOffsetY, i LocalOffsetZ. 75/91

Instytut Informatyki UP-H w Siedlcach Projekcje 3D 76/91 Obrót względem wybranej osi układu współrzędnych umożliwiają atrybuty RotationX, RotationY i RotationZ.

Instytut Informatyki UP-H w Siedlcach Projekcje 3D 77/91

Instytut Informatyki UP-H w Siedlcach Projekcje 3D Za pomocą atrybutów CenterOfRotationX, CenterOfRotationY i CenterOfRotationZ, możemy ustalać punkt względem którego nastąpi obrót. 78/91

Instytut Informatyki UP-H w Siedlcach Transformacje 3D – XNA 3D API  W wersji Silverlight 5 wprowadzono XNA 3D API,  Microsoft XNA jest to zbiór narzędzi, wykorzystujących środowisko kodu zarządzanego, dzięki którym programista może wytwarzać np. komputerowe gry wideo,  Możliwe zastosowanie – aplikacje dla sektora medycznego, logistycznego i finansowego.  Silverlight 5 Toolkit – zbiór dodatkowych, darmowych komponentów, które ułatwiają korzystanie z Silverlight.  W zakresie wsparcia dla XNA 3D API, Silverlight 5 Toolkit, umożliwia programistom korzystanie z szablonów, przyspieszających proces tworzenia projektu w technologii Silverlight, w oparciu o XNA.  Ponadto, pakiet ten zawiera ciekawe przykłady z kodem źr. 79/91

Instytut Informatyki UP-H w Siedlcach Projekcje 3D 80/91 om/blog/2009/07/Taper- Transforms-with- Matrix3DProjection-An- Analytical-Approach.html om/silverlight/Matrix3DProj ectionDemo/Matrix3DProjec tionDemo.html

Instytut Informatyki UP-H w Siedlcach Technologia Deep Zoom i Deep Zoom Composer 81/91

Instytut Informatyki UP-H w Siedlcach Deep Zoom  Technologia Deep Zoom umożliwia płynne przeglądanie i powiększanie ogromnych obrazów,  Ładowane są tylko te dane, które aktualnie ogląda użytkownik,  Dzięki darmowemu narzędziu Deep Zoom Composer, możliwe jest szybkie utworzenie własnej animowanej galerii, zawierającej zdjęcia o wysokiej rozdzielczości,  Efekt działania Deep Zoom Composer-a można opublikować na stronie WWW,  Galerię cechują: płynny zoom, animacje, intuicyjny sposób nawigacji. 82/91

Instytut Informatyki UP-H w Siedlcach Deep Zoom  Narzędzie dzieli obraz na fragmenty 256x256 pikseli,  Następnie generuje zdjęcia niższej rozdzielczości. 83/91

Instytut Informatyki UP-H w Siedlcach Deep Zoom Przykładowa galeria w technologii Deep Zoom 84/91

Instytut Informatyki UP-H w Siedlcach Deep Zoom  Obrazy najniższej rozdzielczości są wyświetlane w pierwszej kolejności,  Po pobraniu obrazów lepszej jakości następuje płynne podmienianie,  Narzędzie Deep Zoom Composer przygotowuje grafiki, oraz plik xml z opisem galerii.  Efekt wyświetlany jest przez kontrolkę MulitScaleImage. 85/91

Instytut Informatyki UP-H w Siedlcach 86/91 Modern UI

Instytut Informatyki UP-H w Siedlcach Modern UI  Wraz z pojawieniem się Windows 8, firma Microsoft zaprezentowała całkowicie nowy interfejs użytkownika, powstały w oparciu o Modern UI.  Modern UI jest językiem projektowania inspirowanym znakami, które można znaleźć wśród infrastruktury transportowej – na przystankach metra, czy lotniskach.  Cechy:  przejrzyste napisy – specjalna czcionka Segoe,  ascetyczne piktogramy,  minimalizm,  brak ozdobników (np. gradientów czy zaokrąglonych narożników),  kontrastowa kolorystyka. 87/91

Instytut Informatyki UP-H w Siedlcach Modern UI – rozkład  System Windows posiada interfejs Modern UI, który przeplata się z tradycyjnym pulpitem.  Wprowadza nowy rozkład elementów:  Zawiera grupę kafelków  Każdy kafelek reprezentuje aplikację Modern UI lub aplikację Desktopową  Horyzontalny scroling  Zunifikowana nawigacja myszą i dotykiem. 88/91

Instytut Informatyki UP-H w Siedlcach

Instytut Informatyki UP-H w Siedlcach Modern UI – WinJS  Windows Library for JavaScript (WinJS) dostarcza wysokiej jakości infrastrukturę wsperającą:  Sterowanie stronami,  Bindowanie danych,  Wysokowydajne kontrolki takie jak:  ListView,  FlipView,  SematicZoom.  WinJS można wykorzystywać do tworzenia aplikacji:  Windows Runtime,  Strony internetowe,  Aplikacjach bazujących na HTML – np., Apache Cordova. 90/91

Instytut Informatyki UP-H w Siedlcach Modern UI – rozkład Możliwość pobrania „Modern UI for WPF Templates” dla Visual Studio 2012 i 2013, umożliwiającego tworzenie aplikacji WPF z Modern UI. Szablony projektów (Visual C#\Windows)  Modern UI WPF Application  Modern UI WPF Navigation Application Elementy szablonów  Basic Page  List Page  Split Page  Tab Page  Theme  Modern Dialog  Modern Window  Modern Button 91/91