Windows Presentation Foundation - perusteet

Esitys aiheesta: "Windows Presentation Foundation - perusteet"— Esityksen transkriptio:

1

2 Windows Presentation Foundation - perusteet
Jari Kallonen Sovellusasiantuntija Tieturi Oy

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

4 Windows Presentation Foundation (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 Presentation Foundation (WPF)
.NET Arkkitehtuuri Windows Presentation Foundation (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.) Copyright © Tieturi Oy

6 WPF Visio Työvälineet ja API
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"> <Expander Name="expanderKorkeus" Header = "Korkeus"> </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 event handlerit jne. WPF kontrolliin määritelty XAML –attribuutti ”Name” mahdollistaa käytön koodipuolelta. lblValinnat.FontSize = 30;

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

12 Layout - paneelit WPF Panel Tarkoitus Canvas
“Perinteinen” tapa sijoittaa kontrolleja ilman layout-manageria. Kontrollit sijoittuvat absoluuttisiin paikkoihin lomakkeella. DockPanel Lukitsee kontrollit haluttuun paikkaan paneelia (ylös, alas, vasemmalle, oikealle). Grid Talukkotyyppinen paneeli, missä on rivejä ja sarakkeita. StackPanel Vaaka-tai pystysuora asettelu kontrolleille. WrapPanel Järjestää kontrollit paneelin koon mukaisesti yhdelle tai useammalle riville.

13 Layout - paneelit Grid StackPanel WrapPanel DockPanel Canvas

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. Tuki ClearType / OpenType fonteille. Mahdollista lisätä esimerkiksi annotaatioita (a.k.a., sticky notes) </FlowDocument> </FlowDocumentReader>

17 Demo – Dokumenttikontrollit

18 Tiedon sidonta Kontrolli voidaan sitoa CLR olioon tai XML:n
Kohde Lähde Dependency Object Object Dependency Property Property TwoWay OneWay OneTime <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 18

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/> </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:n hostaama 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 Browser Application (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 

30