Draußen ist es kalt. Wie kalt genau wird meine neue Wetter App anzeigen und zwar für jeden ppedv Standort. Die Anzeige soll rotieren.
Perfekt passend dazu gibt es im UWP Toolkit gibt es das RotateTile Steuerelement. Ein Listenelement, das nur ein Element anzeigt, dies aber rotierend. Ganz wie man das aus dem Windows 10 Menü und den Live Tiles kennt.
Per Nuget werden die Assemblies für Microsoft.Toolkit.UWP ins Projekt geladen.
ppedv betreibt 12 Schulungstandorte, an denen man auch eine Universal Windows Platform Schulung besuchen kann. Nachdem mit Visual Studio 2017 ein UWP Projekt angelegt worden ist, wird einfach eine Textdatei dem Projekt hinzugefügt in er die Ort für UWP Kurse gespeichert sind.
Eine Klasse Wetter wird später Wetterdaten behinalten. Fürs erste reicht eine Property Ort.
1: Public Class Wetter
2: Private _ort As String
3: Public Property Ort() As String
4: Get
5: Return _ort
6: End Get
7: Set(ByVal value As String)
8: _ort = value
9: End Set
10: End Property
11:
12: End Class
Die App wird im Vollbildmodus gestartet. Aus der Textdatei wird Zeile für Zeile je ein Ort ausgelesen und einer Property vom Typ ObservableCollection zugewiesen.
1: Private Async Function MainPage_LoadedAsync(sender As Object, e As RoutedEventArgs)
As Task Handles Me.Loaded
2: ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.FullScreen
3: Dim file = Await StorageFile.GetFileFromApplicationUriAsync(New Uri("ms-appx:///orte.txt"))
4: Dim orte = Await FileIO.ReadLinesAsync(file)
5: For Each o In orte
6: wetterListe.Add(New Wetter With {.Ort = o})
7: Next
8: End Function
Im nächsten Schritt gibt es eine kurze Einführung in MVVM für UWP. Wer sich auf compiled Bindings (neu in UWP) stützt, legt ein Property in der Page Klasse an. Normalerweise vom Typ des Viewmodels, hier einfach nur die Liste.
1: Public wetterListe As ObservableCollection(Of Wetter) = New ObservableCollection(Of Wetter)
Im XAML View wird per Bind die Liste gebunden. Nicht vergessen, das im Gegensatz zur Binding Syntax der Default Wert Onetime Binding ist. Also Mode mit angeben!
1: ItemsSource="{x:Bind wetterListe, Mode=OneWay}"
Um dann letztendlich die Anzeige zu formatieren, muss der DataType angebenen werden. Nur so kann Visual Studio prüfen ob die Typen (hier Ort) auch passen.
1: <DataTemplate x:DataType="local:Wetter">
2: ...
3: <TextBlock Text="{x:Bind Ort,Mode=OneWay}"
Wer die Controls aus dem Toolkit in der Werkzeugleiste eingebunden hat, kann diese per Drag und Drop einfach reinzuziehen. Im anderen Fall muss man dafür sorgen das die Namensräume korrekt lauten. Local zeigt auf das eigene Projekt.
1: xmlns:local="using:WeatherApp"
2: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
3: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
4: xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
Das Rotator Tile Steuerelement wird prinzipiell wie ein Listview verwendet. Ein ItemTemplate enthält eine Datatemplate.
Schwieriger wird es mit dem spezifischen Eigenschaften des RotatorTile Controls. Die Dokumentation ist wie heute üblich Lückenhaft. Visual Studio Intellisense kann im XAML Teil nicht genug Informationen liefern. Ich habe in der Tat den Source Code des Toolkits genutzt um festzustellen, das die Zeiten nicht in Sekunden sondern als Timespan erwartet werden. Der Wechsel zwischen den “Sichten” erfolgt nach 5 Sekunden mit einem bis zu 5 Sekunden Zufallsversatz. Völlig unlogisch ist die Benennung der beiden Propertys. Statt RotationDelay würde ich erwarten, RotationTimeSpan und statt ExtraRandomDuration etwas in der Art RotationTimeSpanRandomOffset. Das folgende Beispiel setzt die Rotation fix auf 1 Sekunden. Das Attribut Direction entspricht der “scrolldirection” mit Up and Left. Immerhin das kann Visual Studio vorschlagen.
1: <Controls:RotatorTile
2: Direction="Up"
3: RotationDelay="0:0:1"
4: ExtraRandomDuration="0:0:0"
5:
Die noch nicht so perfekte UWP Store App als animiertes GIF.
Der XMAL Source Code
1: <Page
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:local="using:WeatherApp"
5: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7: xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
8: x:Class="WeatherApp.MainPage"
9: mc:Ignorable="d">
10:
11: <Grid Background="CornflowerBlue">
12: <Controls:RotatorTile Margin="20,20,0,0" Height="200"
13: Direction="Up"
14: RotationDelay="0:0:1"
15: ExtraRandomDuration="0:0:0"
16: ItemsSource="{x:Bind wetterListe, Mode=OneWay}"
17: HorizontalAlignment="Stretch"
18: VerticalAlignment="Top" >
19: <Controls:RotatorTile.ItemTemplate>
20: <DataTemplate x:DataType="local:Wetter">
21: <Grid>
22: <TextBlock Text="{x:Bind Ort,Mode=OneWay}" FontSize="128"
Foreground="Yellow"></TextBlock>
23: </Grid>
24: </DataTemplate>
25: </Controls:RotatorTile.ItemTemplate>
26: </Controls:RotatorTile>
27: </Grid>
28: </Page>