Proč se uživatelská přívětivost nestala součástí software? Animace Win32 Dokumenty DirectX 3D 2D Je to těžké! MFC Data Binding Ovládací prvky se styly Windows Forms Video HTML

Windows Presentation Foundation Dalibor Kačmář Academic Deloper Evangelist Microsoft s.r.o. dalibor.kacmar@microsoft.com

Agenda Přehled a architektura WPF Práce s daty Grafika Nasazení WPF aplikací

Potřeba lépe organizovat informace Výzvy Hardwarová inovace přestihuje software Displeje s vysokým DPI Široké obrazovky s možností rotace (TabletPC) GPU roste 3x rychleji než Moorův zákon Přetížení informacemi Dokumenty, hudba, video, fotografie apod. Potřeba lépe a chytřeji visualizovat informace

Jednotný přístup k UI, dokumentům a médiím Aplikační model Deklarativní programování - XAML Integrace médií Data binding Styly a témata Hostování uvnitř prohlížeče Grafický model 2D & 3D grafika, rastrová grafika Text, video, audio, animace Model dokumentů Variabilní rozložení Pokročilá typografie Řízení práv Media Integration Layer Element Services Aplikační model Model dokumentů Grafický model Composition and Rendering .NET Framework DirectX WPF Nástroje a jazyky Context: First pillar of Avalon UI, docs and media are all just one single platform now. Avalon is based on managed code, as well as DirectX (specifically Direct3D is the rendering engine). You can mix and match graphics, controls, media on a single surface, using layout, animation, styling and data binding to connect them together.

WPF komponenty Document Services User Interface Services XPS Documents Application Services Controls Databinding Packaging Services Deployment Services Layout Media Integration Layer Base Services Imaging 2D Text Audio XAML Effects 3D Video Accessibility Animation Input & Eventing Composition Engine Property System

Deklarativní tvorba aplikací Odděluje grafický návrh aplikace a aplikační logik Model známý z ASP.NET Návrh vzhledu pomocí jazyka XAML XAML převeden do zdrojového kódu a přeložen do binární formy XAML definuje i aplikace jako celku, zdrojů atd. Button btn = new Button(); btn.Background = Colors.Red; btn.Content = "Tlačítko!"; this.Children.Add( btn ); <Button Background="Red"> Tlačítko! </Button>

Kombinace XAML a kódu Typicky je v XAML definován vzhled, animace, vazba na datové zdroje, zachycení a zpracování některých událostí V „kódu v pozadí“ je realizována aplikační logika XAML <Button x:Name="tlacitko" Background="Red" Click="btn_click"> Tlačítko! </Button> partial class Window1 : Window { Window1() { InitializeComponent(); } public btn_click(object sender, RoutedEventArg e) { … } }; + Kód v pozadí partial class Window1 : Window { Button tlacitko; void InitializeComponent() { tlacitko = new Button(); tlacitko.Background = “Red"; tlacitko.Click += btn_click; this.AddChild(tlacitko); } };

Deklarativní návrh vzhledu aplikace Nástroje - XamlPad - Expression Interactive Designer

Layout Canvas StackPanel DockPanel WrapPanel Grid Umístí prvky horizontálně nebo vertikálně Umístí prvky horizontálně s možností „přepadnutí“ do dalšího řádku Alokuje celou boční stranu jednomu prvku Bez logiky layoutu – rozmístí prvky přesně podle souřadnic, plná kontrola Organizace ve formě libovolné tabulky, nejpružnější řešení

Ovládací prvky Všechny standardní prvky jsou dostupné a některé nové Třídy jsou společné pro WPF System.Windows.Controls, ne System.Windows.Forms.Controls Vzhled plně oddělen od funkcionality a modifikovatelný prostřednictvím šablon Nevytvářet nové prvky, využít exitující logiku a definovat nový vzhled

Jak ovládací prvky fungují Prvky obsahují Commands – operace jako jsou Cut, Copy nebo Paste Properties – vlastnosti modifikující vzhled nebo chování Events – ovládací prvky vyvolávají události Metody – část funkcionality je dostupná formou metod Commands, Properties a Events dostupné v XAML Aplikační logika Data binding – vazba na datové zdroje Template – šablona definující vzhled prvku

Události WPF rozšiřuje standardní mechanismus .NET events Routed events Zpracovány v elementu, ale i ve všech „nadřazených“ elementech v tzv. logickém stromu Události mohou Probublat – prochází od zdroje směrem nahoru ve stromu být Tunelovány – začíná u kořene a sestupují dolů ke zdroji být Směrovány - zpracovává pouze zdroj události

Visual Studio 2005 Ovládací prvky ve WPF aplikacích Zpracování událostí

Data binding Proces propojení UI s aplikační logikou Snadná synchronizace dat s vizuální reprezentací Reflektuje na změny v UI i v datovém zdroji WPF propojuje „Dependency Properties“ s řadou datových zdrojů <Image Source="auto.png" Canvas.Left= "{Binding Path = Value, ElementName = horzPos }" /> <Slider Orientation= "Horizontal" Name = "horzPos" Value = "40" Maximum="100" /> The most straightforward form of data binding to look at is binding between one element and another in the user interface. There’s nothing special about this – it works like binding to any data source, it’s just easier to see what’s going on because everything can be shown in markup. Here we have a UI with a horizontal slider control, and we’d like to use that to set the position of an image. We can do this by using data binding to bind the image’s Canvas.Left property to the horizontal slide’s Value property. The binding expression for this needs just two pieces of information: the name of the property (which we set as the Path of the binding) and the name of the source element. Setting the binding’s ElementName property lets the binding know that we want to bind to a UI element. (There are other properties used for other source types.) 15

Binding elementy Cíl (Binding Target) Zdroj (Binding Source) Modely Ovládací prvek Dependency Property Cíl (Binding Target) Libovolná vlastnost WPF elementu Zdroj (Binding Source) CLR objekt WPF Element ADO.NET (prostřednictvím Dataset) XML Kolekce Modely One Time, One Way, Two Way, One Way To Source Dynamika Master-Detail scénáře Value Converter Data Binding Synchronizace Konverze WPF’s data binding system can target any property on any WPF element. (Strictly speaking, the target has to be a Dependency Property, which almost all properties on WPF elements are.) Absolutely any public property on any .NET object can be used as a data source. The object does not need to have any special knowledge of WPF. The property simply has to be a normal CLR property. This is crucial to data binding’s flexibility – it places very few demands on the source object, giving you freedom to choose more or less any object as a source. Data binding also recognizes the .NET Framework’s TypeDescriptor property virtualization system, that allows objects to decide at runtime what properties to expose. This is the system used by the ADO.NET DataSet, DataTable, and related classes to present whatever columns of data happen to be in the table. Finally, data binding has special handling for XML data sources. Zdroj Objekt Property 16

Datový zdroj Zdroje Datový kontext .NET objekt – ObjectDataProvider XML dokument – XmlDataProvider Kolekce Připojeny k ItemControl prvkům nebo formou iterace Dynamická vazba volitelně (ObservableCollection<T>) Přístup k položkám kolekce Automatická synchronizace - INotifyPropertyChanged Datový kontext Místo, kde data binding hledá informace o zdroji dat Definován na úrovni elementů Prohledávání po celém stromu elementů

Datová šablona Datová šablona prezentuje informace datového zdroje konkrétního typu Často použita pro položky kolekce class Car { string Image {get;set;} string Model {get;set;} } <DataTemplate x:Key="carTemplate"> <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray"> <StackPanel> <Image HorizontalAlignment="Center" Source="{Binding Path=Image}" /> <Border HorizontalAlignment="Center" BorderBrush="Navy"> <TextBlock FontSize="18" Text="{Binding Path=Model}" /> </Border> </StackPanel> </DataTemplate> A data template defines how to present the information from a data source of a particular type. A template usually lives in a resource dictionary, and is simply a chunk of markup with {Binding} expressions. When a control presents data using a data template, it is as though the template is copied into that control, and its DataContext set to the data source. (This means that none of the binding expressions need to specify a source – they can just assume that the source will be an instance of the type the template is designed to present.) 18

Spojení uživatelského rozhraní s datovým zdrojem

Styly a šablony ovládacích prvků Individuální nastavení stylu komponent je neproduktivní Styl centralizuje nastavení společné pro konkrétní element pro společné vlastnosti různých elementů Nastavení jsou pojmenovaná nebo typově-orientovaná Vlastnosti definované stylem lze deklarativně dědit lze deklarativně předefinovat na úrovni elementu nastavit programově Styl lze kombinovat s datovou šablonou Oddělení datové vazby od nastavení vzhledu

Triggery Vnáší do statického nastavení vlastností dynamiku Trigger umožňuje podmínečné nastavování vlastností Trigger Spuštění Jednoduchý, násobný Hodnotou vlastnosti visuálního elementu Datový Hodnotou objektu v DataContextu Event Příchodem události

Šablona ovládacího prvku Vzhled zcela oddělen od logiky „Navléká“ na prvek nový vzhled Je množinou Elementů, tvořících vzhled Triggerů, reagujících na změny Storyboardů, vytvářejících animace Logické stromy vs. Vizuální stromy Logický strom - binární reprezentace XAML Visuální strom - graf, který obsahuje všechna data potřebná pro složení a vykreslení okna Přepište vizuální strom - změníte vzhled

Logické a vizuální stromy Kočka Pes <StackPanel> <ListBox> <ListBoxItem>Kočka</ListBoxItem> <ListBoxItem>Pes</ListBoxItem> </ListBox> <Button>Oblíbené zvíře</Button> </StackPanel>

Definice vzhledu ovládacích prvků Jednoduchý trigger

Novinky v grafice Plně integrována do programového modelu Může být součástí libovolného UI elementu Grafické tvary uspořádány do stromu elementů UI Odpadá nutnost neustále překreslovat okna Složitě manipulovat s vykreslenou grafikou WPF se za nás postará o překreslování Všechny elementy jsou vektorové, nikoli bitové mapy, tedy nezávislé na rozlišení!

Společné novinky v grafice Grafika nezávislá na rozlišení a zařízení Postavena na Device Independent Pixel Vylepšená přesnost Souřadný systém WPF a transformace - double WPF nabízí širší barevný gamut (scRGB) Pokročilá podpora grafiky a animací Transformace, hit testování, minimální překreslování, integrace animace Hardwarová akcelerace

Kompozice Proces složení více tvarů nebo obrázků ve výsledný výstup WPF na rozdíl od Win32 podporuje překrývání libovolných elementů (ne pouze celých oken) průhlednost používá anti-aliasing na hranách tvarů aplikaci transformace před kompozicí

Možnosti kompozice DrawingBrush VisualBrush Výplň vektorovým obrázkem Výplň UI elementem Zjednodušuje triky Reflexe UI Použití jako 3D textury The DrawingBrush is conceptually very similar to the ImageBrush, in that both allow you to fill an area with a picture. The difference with the DrawingBrush is that you don’t have to use a bitmap. You can pass in any Drawing object. For example, if you use a GeometryDrawing, you can perform all the same drawing operations as the Path shape. And you can use a DrawingGroup to bring multiple GeometryDrawing elements together. You are free to use any Brush and Pen for each individual GeometryDrawing within the drawing, so you can build up sophisticated imagery and then use it as a pen. The VisualBrush has similar capabilities to DrawingBrush – it allows an imagery, vector or bitmap, to be used as a brush. The difference is that the VisualBrush takes any UI element as its source. You can even point it at a UI element that is already in use in the application. This means you can use a VisualBrush to replicate part of the UI. This can be used for tricks such as making a reflection of part of the UI by painting it somewhere else. (This can be done in conjunction with opacity to make the reflection fade.)

Visual-Layer programování Deklarativní popis není vždy vhodný WPF poskytuje „visual-layer“ API Vykreslování entit podle potřeby Metoda OnRender vykreslí jednotlivé entity Odlišný model překreslování Aplikace Vizuální objekty Aplikace WPF GDI+ nebo GDI32 Grafická karta Frame buffer obrazovky Invalidate WM_PAINT Windows

3D ve 2D světě Layout rozumí pouze 2D Použijeme obdélníkové okno do 3D světa Layout to vidí jako další element Viewport3D Kamera Grid Model FrameworkElement TextBlock StackPanel Světlo As far as WPF’s layout and composition systems are concerned, Viewport3D is just a normal 2D element like any other, with a rectangular bounding box, and which recognizes the same layout rules as all other elements. However, the Viewport3D contains a 3D model, and renders that model into the 2D space allotted. Viewport3D derives from FrameworkElement, which is the base class of all visible elements in the WPF framework. This is what enables it to participate in normal UI layout and composition. One limitation of this design is that the 3D world that the Viewport3D looks into is isolated from the main UI. You cannot arrange for the 3D model to be rearranged as part of the 2D layout process. This means that in some respects, a Viewport3D is similar to the Image and Media elements, which allow bitmaps and video to be incorporated – these elements display content which is not a completely integrated part of the UI. However, although the 3D model cannot respond to layout, the objects that represent the 3D scene are part of the WPF framework, which means you can use animation, styling, and event triggers, so it is certainly possible to use 3D in a way that feels like an integrated part of the UI. StackPanel DockPanel

Animace Proč? Animace kdekoli Kdekoli ≠ všude Silnější dojem z aplikací Vytváří přirozenější UI Plynulejší visuální přechody Animace kdekoli Jakoukoli vlastnost lze animovat Kdekoli ≠ všude Zvážit vhodnost Zdrženlivost je na místě Realizace animací deklarativně i kódem Animation can bring a user interface to life. It is common for parts of a user interface to respond to user input. For example, buttons look like they have been physically pressed in when you click on them; UI elements might light up or change style to indicate that they might do something interesting if clicked on. Tasteful use of animation can enhance the realism of ‘moving parts’ in a UI, and make for a smoother feeling UI. Also, animation can be used to make visual transitions easier to follow. Sudden changes are jarring to watch, and can make us lose our place in the UI. By animating transitions, life can be made easier for the user. Almost any property of any visual element can be animated. (Strictly speaking, any dependency property on any element derived from FrameworkElement can be animated.) Of course it’s important to design your animations with sensitivity to the user. Careless use of animation can have a terrible impact on the UI. Too many animations will make the UI garish and distracting; animations that are slow or which force the user to wait until the end of the animation lead to frustration. So be careful not to let them get in the way. But when animation is used intelligently, it can enhance a UI significantly.

Deklarativní animace Popisují animačnímu systému průběh Např. změň šířku (Width) z 10 na 100 během 10 sekund Zbytek proveden automaticky Bez nutnosti nastavit časovače Bez nutnosti vlastního vykreslování Code is usually not required to animate the UI – WPF supports declarative animation. You can also animate from code as well if you like, but even there, it’s a usually a matter of telling the animation system what you’d like it to do for you, and letting it get on with it. The system will take care of regularly updating the display to keep the animation running. Typ animace <DoubleAnimation From="10" To="100" Duration="0:0:10" Storyboard.TargetName="myellipse" Storyboard.TargetProperty="(Ellipse.Width)" /> Parametry animace Cíl animace Animovaná vlastnost

Grafické efekty v aplikaci a animace

Typy aplikací Plné lokální aplikace Web Browser aplikace Instalovány na lokální počítač Přístup k systémovým zdrojům definován právy uživatele Web Browser aplikace Běží v prostředí prohlížeče s typickým vpřed-vzat navigací Omezení práv aplikace (Partial Trust) Aplikace nemůže požádat o dodatečná práva (běží nebo ne) Definice potřebných práv v projektu aplikace Vlastnost Lokání aplikace Browser aplikace Běhové prostředí Lokální OS IE 7 Důvěra Plná Omezená Dostupnost Online/Offline Online Nasazení Nejlépe ClickOnce nebo MSI Nejlépe ClickOnce

Instalace ClickOnce Přirozený vývoj „bezdotykové instalace“ z .NET 1.x Založeno na HTTP protokolu pro .NET aplikace exe stažen, uložen, spuštěn ClickOnce Podporuje instalaci obou typů aplikací (plné i browser) 2 scénáře nasazení Online/offline Pouze online Odstraňuje problémy předchozí verze; nyní umí Podpora v nástrojích (VS 2005, SDK) Sledování postupu instalace Distribuce jiných souborů než assembly Možnost požádat o vyšší povolení Je vyžadován digitální podpis instalace

Instalace \demo demo_1_0_0_0.application demo.application Manifest nasazení publish.htm setup.exe \demo\demo_1_0_0_0 demo. exe.manifest Aplikační manifest demo. exe.deploy *.*.deploy \demo\demo_1_0_0_0 Aplikační soubory *.*.deploy – soubory učené k nasazení, rozšířeny o přípomu .deploy z důvodu ochrany web serveru *.application - manifest nasazení, XML popis nasazení a update aplikace publish.htm – web stránka OnceClick nasazení setup.exe - .NET FX 2.0 bootstrap + další potřebné aplikaci potřebné pro běh aplikace (např. SQL Server Express), konfigurovatelné ve VS 2005 *.exe.manifest – aplikační manifest, XML popis požadované úrovně bezpečnosti asociovaných souborů dané verze

Hostování aplikace v prohlížeči ClickOnce nasazení aplikace

Rekapitulace Nový a pružný model popisu uživatelského rozhraní WPF rozumí vašim datům Šablony dodávají vzhled i dynamiku Grafika dostupná deklarativně i programově 2D i 3D modely obohacené animací Přenesení výkonu na grafickou kartu Jednoduché nasazení a zvýšenou bezpečnost Stáhněte si .NET Framework 3.0 RC a vyzkoušejte si WPF

Odkazy MSDN Windows Vista Developer Center http://msdn.microsoft.com/windowsvista Microsoft .NET Framework 3.0 http://msdn.microsoft.com/winfx/ Download platformy a ovládacích prvků http://msdn.microsoft.com/winfx/downloads/presentation/default.aspx Doporučení pro Windows Vista UX http://msdn.microsoft.com/windowsvista/experience

© 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.