windows presentation foundation - perusteet jari kallonen sovellusasiantuntija tieturi oy
DESCRIPTION
Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy. Sisältö. Windows Presentation Foundation WPF kontrollit Tapahtumakäsittely Layout - paneelit Dokumenttikontrollit Tiedon sidonta Tyylit ja resurssit Navigointisovellukset. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/1.jpg)
![Page 2: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/2.jpg)
Windows Presentation Foundation - perusteetJari KallonenSovellusasiantuntijaTieturi Oy
![Page 3: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/3.jpg)
Sisältö• Windows Presentation Foundation• WPF kontrollit
– Tapahtumakäsittely– Layout - paneelit– Dokumenttikontrollit
• Tiedon sidonta• Tyylit ja resurssit• Navigointisovellukset
![Page 4: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/4.jpg)
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.
![Page 5: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/5.jpg)
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.)
![Page 6: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/6.jpg)
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
![Page 7: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/7.jpg)
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!";
![Page 8: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/8.jpg)
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.
![Page 9: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/9.jpg)
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>
![Page 10: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/10.jpg)
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;
![Page 11: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/11.jpg)
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
![Page 12: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/12.jpg)
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.
![Page 13: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/13.jpg)
Layout - paneelit
GridStackPanelWrapPanelDockPanelCanvas
![Page 14: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/14.jpg)
Demo – WPF kontrollit
![Page 15: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/15.jpg)
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).
![Page 16: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/16.jpg)
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>
![Page 17: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/17.jpg)
Demo – Dokumenttikontrollit
![Page 18: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/18.jpg)
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
![Page 19: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/19.jpg)
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>
![Page 20: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/20.jpg)
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>
![Page 21: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/21.jpg)
Demo – Tiedon sidonta
![Page 22: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/22.jpg)
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.
![Page 23: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/23.jpg)
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>
![Page 24: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/24.jpg)
Demo – Tyylit ja resurssit
![Page 25: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/25.jpg)
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
![Page 26: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/26.jpg)
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
![Page 27: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/27.jpg)
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
![Page 28: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/28.jpg)
Demo – Navigointisovellukset
![Page 29: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/29.jpg)
Kiitos ja kumarrus!
• Kysymysten vuoro
![Page 30: Windows Presentation Foundation - perusteet Jari Kallonen Sovellusasiantuntija Tieturi Oy](https://reader036.vdocuments.site/reader036/viewer/2022062409/5681493b550346895db68343/html5/thumbnails/30.jpg)