Upload
taran
View
33
Download
0
Embed Size (px)
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 Presentation
Citation preview
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