Windows 8.1 UI für Entwickler
-
Upload
thomas-claudius-huber -
Category
Technology
-
view
431 -
download
0
Transcript of Windows 8.1 UI für Entwickler
![Page 1: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/1.jpg)
Thomas Claudius Huber | Trivadis AG
Windows 8.1 UI für Entwickler
![Page 2: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/2.jpg)
Thomas Claudius Huber
Principal Consultant @ Trivadis AG
www.trivadis.com
www.thomasclaudiushuber.com
Trainer, Coach, Developer, Architect
Spezialisiert auf WPF, XAML, WinApps
Autor der umfassenden Handbücher
zu WPF, Silverlight und
Windows Store Apps
![Page 3: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/3.jpg)
Sessioninhalt Neue Controls
Fensteransichten und Kacheln
Weitere Neuerungen
Binding
RenderTargetBitmap
…
![Page 4: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/4.jpg)
DatePicker
Date-Property enthält das Datum (DateTimeOffset)
Formatierung: Day-, Month-, YearFormat
Weitere Properties: DayVisible, MonthVisible,
MaxYear, MinYear, Orientation, ...
<DatePicker Header="Datum:"
DayFormat="{}{day.integer} {dayofweek.abbreviated}"
DateChanged="OnDateChanged"/>
Demo
![Page 5: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/5.jpg)
TimePicker
Time-Property enthält die Zeit (TimeSpan)
ClockIdentifier-Property bestimmt 12/24h-Format
Weitere Properties: MinuteIncrement, Header, …
<TimePicker Header="Zeit:" ClockIdentifier="24HourClock"
TimeChanged="OnTimeChanged" Margin="10" />
![Page 6: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/6.jpg)
AppBar Features
Keine StandardStyles.xaml-Datei mehr
Stattdessen neue Klassen namens AppBarButton,
AppBarSeparator, AppBarToggleButton
CommandBar mit Primary und SecondaryCommands
![Page 7: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/7.jpg)
AppBarButton
Button-Subklasse speziell für die AppBar
Inhalt via Icon- und Label-Property
IsCompact-Property entfernt Margin und Label
<!--Kurze Schreibweise-->
<AppBarButton Icon="BrowsePhotos" Label="Bilder"/>
<!--Lange Schreibweise-->
<AppBarButton Label="Bilder">
<AppBarButton.Icon>
<SymbolIcon Symbol="BrowsePhotos"/>
</AppBarButton.Icon>
</AppBarButton>b
Demo
![Page 8: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/8.jpg)
AppBarButton-Icons
SymbolIcon
FontIcon
PathIcon
BitmapIcon
<AppBarButton Label="Turbo">
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///turbo.png"/>
</AppBarButton.Icon>
</AppBarButton>
Demo
![Page 9: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/9.jpg)
CommandBar
Direkte Subklasse von AppBar
Definiert die beiden Properties PrimaryCommands
und SecondaryCommands
Ordnet die Commands gemäss UX-Richtlinie an
<CommandBar>
<CommandBar.PrimaryCommands>
<!--Primäre Commands auf der rechten Seite-->
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<!--Sekundäre Commands auf der linken Seite-->
</CommandBar.SecondaryCommands>
</CommandBar>
Demo
![Page 10: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/10.jpg)
Flyout and MenuFlyout
Werden der Flyout-Property eines Button zugewiesen
via Attached-Property FlyoutBase.AttachedFlyout
jedem beliebigen FrameworkElement
Flyout: zeigt ein beliebiges UIElement an
MenuFlyout: zeigt ein Menu an:
Kindelemente sind MenuFlyoutItem,
ToggleMenuFlyoutItem und MenuFlyoutSeparator
Demo
![Page 11: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/11.jpg)
SettingsFlyout
Neues Control zur Anzeige der Einstellungen
Beachtet die UI-Richtlinien
Show-Methode -> zurück zu den Settings
ShowIndependent-Methode -> zurück zur App
![Page 12: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/12.jpg)
Stellt beliebige Inhalte in Panorama-Ansicht dar
Besteht aus einzelnen HubSections
VS2013 besitzt neue «Hub App»-Vorlage
<Hub Header="BASTA!" SectionHeaderClick="OnHeaderClick">
<HubSection Header="Speaker" IsHeaderInteractive="True">
<DataTemplate>...</DataTemplate>
</HubSection>
<HubSection Header="Sessions">
<DataTemplate>...</DataTemplate>
</HubSection>
...
</Hub>
Das Hub-Element
Demo
![Page 13: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/13.jpg)
Sonstiges
Weitere Verbesserungen existierender Controls
Header-Property für TextBox, ComboBox etc.
PlaceholderText-Property für TextBox, ComboBox etc.
…
Hyperlink-Element für TextBlock/RichTextBlock
SearchBox, um Suche in App zu integrieren
Demo
![Page 14: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/14.jpg)
Sessioninhalt Neue Controls
Fensteransichten und Kacheln
Weitere Neuerungen
Binding
RenderTargetBitmap
…
![Page 15: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/15.jpg)
Fensteransichten in Win 8
![Page 16: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/16.jpg)
Fensteransichten in Win 8.1
Keine feste Breite mehr
Benutzer können Apps bis zur Mindestbreite
beliebig breit darstellen
Mindestbreite ist standardmäßig 500px
Snapped-View in Windows 8 war 320px
Mindestbreite kann auf 320px verringert werden
Via Package.appxmanifest
Demo
![Page 17: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/17.jpg)
Obsolete Properties/Enums
ApplicationView.Value – Property obsolete, da es
keine Ansichtszustände mehr gibt
ApplicationViewState – Aufzählung obsolete, da es
keine Ansichtszustände mehr gibt
ApplicationView.TryUnsnap – nicht mehr gültig, da
Apps keine Snapped-Ansicht mehr besitzen
![Page 18: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/18.jpg)
Neue Properties der
ApplicationView-Klasse
AdjacentToLeftDisplayEdge/
AdjacentToRightDisplayEdge
IsFullScreen
Orientation – Landscape oder Portrait
![Page 19: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/19.jpg)
Mehrere App-Fenster
CoreApplication.CreateNewView-Methode zum
Erstellen einer neuen View
ApplicationViewSwitcher.
TryShowAsStandaloneAsync zum Anzeigen
Optional mit ProjectionManager auf zweitem
Bildschirm die neue View darstellen
Windows 8.1 Samples: Multiple Views
Demo
![Page 20: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/20.jpg)
Neue Kachel-Größen
Windows 8 hatte 2 Kachel-Größen:
Square (150x150)
Wide (310x150)
Windows 8.1 führt zwei weitere Größen ein:
Small (70x70)
Large (310x310)
In Windows 8.1 wird die «Square»-Größe als
«Middle» bezeichnet
Es gibt Small, Middle, Large und Wide
![Page 21: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/21.jpg)
Neue Kachel-Größen
![Page 22: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/22.jpg)
Live-Tiles
TileTemplateType-Enum wurde erweitert
Mitglieder haben jetzt die Skalierung enthalten:
TileSquare150x150*
TileSquare310x310*
TileWide310x150*
Alte Mitglieder ohne Skalierung nicht mehr
verwenden:
TileSquareImage
TileWideImage
…
Demo
![Page 23: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/23.jpg)
Sessioninhalt Neue Controls
Fensteransichten und Kacheln
Weitere Neuerungen
Binding
RenderTargetBitmap
…
![Page 24: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/24.jpg)
Binding-Neuerungen
UpdateSourceTrigger mit PropertyChanged
Zugriff auf die BindingExpression
TargetNullValue und FallbackValue
![Page 25: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/25.jpg)
RenderTargetBitmap
Subklasse von ImageSource
RenderAsync-Methode zeichnet UIElement
GetPixelsAsync um Bild zu speichern/teilen
Demo
![Page 26: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/26.jpg)
Themes
RequestedTheme-Property auf jedem Element
In Windows 8 nur auf App-Objekt
ThemeResource-Markup Extension erlaubt
dynamische Änderung des Themes
IntelliSense hilft, die Ressourcen zu finden.
![Page 27: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/27.jpg)
Sonstiges
Performance-Optimierungen
WebView, MediaPlayer
Zahlreiche neue WinRT-APIS
Siehe Windows 8.1 Feature Guide unter
http://dev.windows.com:
http://msdn.microsoft.com/library/windows/apps/bg182410
![Page 28: Windows 8.1 UI für Entwickler](https://reader033.fdocument.pub/reader033/viewer/2022042701/55ad5b051a28ab25508b4874/html5/thumbnails/28.jpg)
Danke
Twitter: @thomasclaudiush
Homepage: www.thomasclaudiushuber.com
Mail: [email protected]
Slides/Demos:
www.thomasclaudiushuber.com/blog