Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy

2. Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy

3. Sisältö • Windows PresentationFoundation • WPF kontrollit • Tapahtumakäsittely • Layout - paneelit • Dokumenttikontrollit • Tiedon sidonta • Tyylit ja resurssit • Navigointisovellukset

4. Windows PresentationFoundation (WPF) • Tulee osana Microsoft .NET Framework 3.0. • WPF oliomalli on samankaltainen mutta ei samanlainen kuin Windows Forms. • Uusi käyttöliittymätekniikka • Ei syrjäytä Windows Forms sovelluksia • Kehitys kuitenkin painottuu WPF suuntaan • WPF:a voidaan käyttää Microsoft Windows XP, Windows Vista, sekä Microsoft Windows Server 2003 ja 2008 kanssa. • .NET Framework 3.0 on automaattisesti mukana Vista ja Windows Server 2008 versioissa. • XP ja Windows Server 2003 erillisenä asennuksena.

5. Windows PresentationFoundation (WPF) • Miksi? • Entinen Win32-pohjainen käyttöliittymäalusta ”vanhahko”, Windows Forms perustuu siihen • Rauta kehittynyt (näytönohjaimet) • Resoluutioriippumattomuus • Käyttöliittymän kuvaus riippumaton sen toiminnoista eriytys kuten ASP.NET Web Forms mallissa • Käyttöliittymä XAML –kielellä • Käyttöliittymän logiikka ohjelmointikielellä (C#, VB.NET jne.)

6. WPF Visio • Yhtenäinen tapa käsitellä käyttöliittymiä, dokumentteja ja medioita • Työvälineet ja API • Vektoripohjainen grafiikkamoottori • Käyttää hyväkseen tämän päivän näytönohjaimia • Käyttöliittymä ja sen logiikka erotettu toisistaan • Käyttöliittymäsuunnittelijat ja kehittäjät mukana kehitystyössä • Yksinkertainen sovellusten jako • Ylläpitäjät voivat jakaa ja hallita sovelluksia turvallisesti

7. XAML vs. .NET koodi <Button Name="myButton" FontSize="24" FontFamily="Candara" Foreground="DarkRed"> _Click me! </Button> Button myButton = new Button(); myButton.FontSize = 24; myButton.FontFamily = new FontFamily("Candara"); myButton.Foreground = Brushes.DarkRed; myButton.Content = "_Click me!";

8. WPF kontrollit • Kuten Windows Forms, WPF sisältää useita valmiita kontrolleja. • Tuttuja kontrolleja (Button, TextBox, Label), sekä joukon uusia (Expander,FlowDocumentReader, Canvas). • WPF kontrollit eivät ole Windows Forms kontrolleja, joskin ne sisältävät samoja ominaisuuksia. • WPF kontrollit löytyy System.Windows.Controls nimiavaruudesta.

9. WPF kontrollit <Button Name="btnValinnat" Height="100" Width = "300"> <StackPanel> <Label Name="lblValinnat" Foreground = "DarkGreen“ Content = "Valinnat"/> <StackPanel Orientation = "Horizontal"> <Expander Name="expanderVari" Header = "Väri"> <!-- valinnat tähän... --> </Expander> <Expander Name="expanderLeveys" Header = "Leveys"> <!-- valinnat tähän... --> </Expander> <Expander Name="expanderKorkeus" Header = "Korkeus"> <!-- valinnat tähän... --> </Expander> </StackPanel> </StackPanel> </Button>

10. WPF kontrollit • Oheisen kontrollin tekeminen Windows Formsilla: • Oman custom kontrollin periyttäminen Button kontrollista. • Manuaalisesti käsiteltävä sisäisten kontrollien päivitys. • Ylikirjoittaa tarvittavat eventhandlerit jne. • WPF kontrolliin määritelty XAML –attribuutti ”Name” mahdollistaa käytön koodipuolelta. lblValinnat.FontSize = 30;

11. Tapahtumakäsittely Bubble/Tunnel • Tunneling • Previews • Bubbling • Main event • Direct • E.g. MouseEnter <Window> <Grid> <StackPanel> <TextBlock> PreviewMouseDown MouseDown <Window> <Grid> <StackPanel> <TextBlock> <Window> <Grid> <StackPanel> <TextBlock>

12. Layout - paneelit

13. Layout - paneelit

14. Demo – WPF kontrollit

15. Dokumenttikontrollit • Perinteisten tekstikenttien, labeleiden jne. lisäksi WPF sisältää useita kontrolleja, joilla voidaan dynaamisesti esittää ja muokata tekstiä ja muuta sisältöä. • Flowdocument esittää tekstiä ja muuta sisältöä optimoiden sitä näytettävän alueen mukaan. • Tuki ClearType / OpenType fonteille. • Mahdollista lisätä dokumenttiin esimerkiksi annotaatioita (a.k.a., sticky notes).

16. Dokumenttikontrollit <FlowDocumentReader> <FlowDocument> <Paragraph FontSize = "30" FontWeight = "Bold" TextAlignment="Center">Dokumentin esitys</Paragraph> <Paragraph FontSize = "20" FontWeight = "Bold" TextAlignment="Left"> Perinteisten tekstikenttien ja labeleiden lisäksi WPF sisältää useita kontrolleja, joilla voidaan dynaamisesti esittää ja muokata tekstiä. </Paragraph> <Paragraph> Flowdocument esittää tekstiä ja muuta sisältöä optimoiden sitä näytettävän alueen mukaan. </Paragraph> <Paragraph> Tuki ClearType / OpenType fonteille. </Paragraph> <Paragraph> Mahdollista lisätä esimerkiksi annotaatioita (a.k.a., sticky notes) </Paragraph> </FlowDocument> </FlowDocumentReader>

17. Demo – Dokumenttikontrollit

18. Kohde Lähde Dependency Object Object OneWay Dependency Property Property TwoWay OneTime Tiedonsidonta <StackPanel> <Label>Select A Customer</Label> <ListBox Name="myListBox" Background="HoneyDew" ItemsSource= "{Binding {StaticResource mySource}}" </ListBox> </StackPanel> • Kontrolli voidaan sitoa CLR olioon tai XML:n • Omat oliot, ADO.NET oliot, Web Serviceen jne. • Aina valinnaista, sama toiminnallisuus saadaan ohjelmallisesti. • XAML tekee tiedon sidonnan helpoksi • Mukana aina lähde ja kohde • lähteestä kohteeseen • kumpaankin suuntaan • yhden kerran lähteestä kohteeseen

19. Tiedon sidonta <StackPanel> <!-- The scrollbar's value is the source of this data bind --> <ScrollBar Orientation="Horizontal" Height="30" Width = "100" Name="mySB" Maximum = "100" LargeChange="1" SmallChange="1"/> <!-- The label's content value is the target of the data bind --> <Label Height="30" Width = "100" Content = "{Binding ElementName=mySB, Path=Value}"/> </StackPanel>

20. Tiedon sidonta - DataContext • DataContext määrittelee tietolähteen lapsielementeille. • Vähentää toistettavaa koodia. <!-- The panel is setting the data context to the scrollbar object --> <StackPanel DataContext = "{Binding ElementName=mySB}"> <ScrollBar Orientation="Horizontal" Height="30" Width = "100" Name="mySB" Maximum = "100" LargeChange="1" SmallChange="1"/> <!-- Now both UI elements use the scrollbar's value in unique ways. --> <Label Height="30" Width = "100" Content = "{Binding Path=Value}"/> <Button Content="Click" Height="300" Width = "300" FontSize = "{Binding Path=Value}"/> </StackPanel>

21. Demo – Tiedon sidonta

22. Tyylit ja resurssit • Tyylit, pohjat ja nahat mahdollistavat käyttöliittymäelementtien ulkoasun yhtenäistämisen. • Tyylien käyttö muistuttaa web –maailmasta tuttua css –tyylikieltä. • Joskin tyylit voi puhtaasti kirjoittaa koodiin tai XAML:n, niin paikallisilla tai globaaleilla resursseilla ulkoasun muutokset hoituvat keskitetysti.

23. Tyylit ja resurssit <!-- Add a logical resource to the window's resource dictionary--> <Window.Resources> <Style x:Key ="OmaTyyli"> <Setter Property ="Control.FontSize" Value ="20"/> <Setter Property ="Control.Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Green" Offset="0.25" /> <GradientStop Color="Yellow" Offset="0.75" /> <GradientStop Color ="Red" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <!-- Both textbox and button now use the same style --> <TextBox Grid.Column ="0" Name="txtHello" Height="30" Width = "100" Style ="{StaticResource OmaTyyli}">Hello</TextBox> <Button Grid.Column ="1" Name="btnClickMe" Height="80" Width = "100" Style ="{StaticResource OmaTyyli}" Content = "Click Me"/> </Grid>

24. Demo – Tyylit ja resurssit

25. Navigointisovellukset • WPF tukee ”navigaatiopohjaista” toiminnallisuutta sovelluksissa: • Sovellukset toimivat selaimen tavoin, sisältäen valmiiksi navigoinnit (eteen/taakse), historian jne. • Lisäksi sovelluksia voidaan ajaa selaimessa XBAP – sovellukset. • XBAP != Silverlight

26. Navigointisovellukset • NavigationWindow • Navigointisovelluksen pääikkuna, joka huolehtii mm. sivujen kirjanpidosta. • ”Selain” • Page • NavigationWindow:nhostaama sivu, jota ei voi käyttää sellaisenaan. • Web sivu • Frame • Sivu tai ikkuna (Window ) voi sisältää yhden tai useamman kehyksen joiden sisällä voidaan hostata sivuja. • Web sivun Frame

27. XBAP - sovellukset • XAML BrowserApplication (XBAP) on WPF sovellus jota ajetaan selaimen sisällä. • Sovellus ladataan web palvelimelta. • Sovellus kytkeytyy selaimeen ja selaimen navigointi, historia ym. liittymiin. • XBAP – sovelluksissa voidaan ajaa Internet Explorerilla tai .NET Framework 3.5 lähtien myös Firefoxilla. • Vaatii .NET Framework 3.0 tai 3.5:n asiakaskoneella. • XBAP ei ole SilverLight

28. Demo – Navigointisovellukset

29. Kiitos ja kumarrus! • Kysymysten vuoro 