Windows Presentation Foundation - perusteetJari KallonenSovellusasiantuntijaTieturi Oy

Sisältö• Windows Presentation Foundation• WPF kontrollit

– Tapahtumakäsittely– Layout - paneelit– Dokumenttikontrollit

• Tiedon sidonta• Tyylit ja resurssit• Navigointisovellukset

Windows Presentation Foundation Windows Presentation Foundation (WPF)(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.

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.)

WPF VisioWPF 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

XAML vs. .NET koodiXAML 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!";

WPF kontrollitWPF 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.

WPF kontrollitWPF 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>

WPF kontrollitWPF 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;

TapahtumakäsittelyTapahtumakäsittely• Tunneling

– Previews

• Bubbling– Main event

• Direct– E.g. MouseEnter

<Window> <Grid> <StackPanel> <TextBlock>

<Window> <Grid> <StackPanel> <TextBlock>

<Window> <Grid> <StackPanel> <TextBlock>

Bubble/Tunnel

PreviewMouseDown

MouseDown

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.

Layout - paneelit

GridStackPanelWrapPanelDockPanelCanvas

Demo – WPF kontrollit

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).

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>

Demo – Dokumenttikontrollit

Tiedon sidontaTiedon sidonta

• 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

<StackPanel> <Label>Select A Customer</Label> <ListBox Name="myListBox" Background="HoneyDew" ItemsSource= "{Binding {StaticResource mySource}}" </ListBox></StackPanel>

Kohde Lähde

Dependency Object Object

Dependency Property

PropertyTwoWay

OneWay

OneTime

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>

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>

Demo – Tiedon sidonta

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.

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>

Demo – Tyylit ja resurssit

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

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

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

Demo – Navigointisovellukset

Kiitos ja kumarrus!

• Kysymysten vuoro