Dieser Artikel ist Tag #4 der Serie 8 Tage Windows Phone 8 von Geert van der Cruijsen.
Der Originalartikel befindet sich hier: 8 days of Windows Phone 8 — Day 4: New Screen Resolutions.
Willkommen zurück zu meiner Artikelserie 8 Tage Windows Phone 8. Heute, am vierten Tag der Serie, beschäftigen wir uns mit den neuen Bildschirmauflösungen unter Windows Phone 8 und was Sie tun sollten, um diese als Entwickler zu unterstützen.
- Tag 0: Einleitung zu den 8 Tagen Windows Phone 8
- Tag 1: Überblick über das SDK
- Tag 2: Live Tiles und Sperrbildschirm
- Tag 3: Der Emulator & das Simulation Dashboard
- Tag 4: Die neuen Bildschirmauflösungen
- Tag 5: .NET 4.5 & C# 5.0
- Tag 6: Die API zur Sprachsteuerung
- Tag 7: NFC und Bluetooth
- Tag 8: Brieftasche und In-App Käufe
Verfügbare Bildschirmauflösungen
In Windows Phone 8 werden drei Auflösungen unterstützt: WVGA, WXGA und 720p.
Auflösung | Seitenverhältnis | |
WVGA | 480*800 | 15:9 |
WXGA | 768*1280 | 15:9 |
720P | 720*1280 | 16:9 |
Unbedingt zu beachten ist, dass es zwei unterschiedliche Seitenverhältnisse gibt: 15:9 und 16:9. Wenn Sie sich das Bild unten ansehen, erkennen Sie, dass WVGA (480*800) und WXGA (768*1280) das selbe Seitenverhältnis haben. Apps, welche für WVGA gebaut wurden, können problemlos auf WXGA skaliert werden und umgekehrt. Die 720p Auflösung allerdings hat ein 16:9 Seitenverhältnis. Für diese Auflösung müssen Sie das Layout der Benutzerschnittstelle so flexibel gestalten, dass es in der Lage ist, die „längere“ Fläche des Bildschirms auszunutzen.
Was sollten Sie also tun, um alle Auflösungen zu unterstützen? Als erstes sollten alle Bilder, wie z.B. das Bild für die Anwendungskachel, in der höchsten Auflösung bereitgestellt werden. Das Betriebssystem wird diese automatisch entsprechend skalieren. Weiterhin sollten Sie das Layout der App flexibel genug gestalten, so dass es geeignete UI Elemente, wie z.B. Listboxes, skaliert, je nachdem, ob der Bildschirm länger (wie bei 720p) oder kürzer (wie bei den anderen beiden Auflösungen) ist. Ebenfalls bemerkenswert ist, dass WXGA 1,6x der Auflösung von WVGA entspricht. Die Fläche ist immer noch 480*800, nur dass alle UI Elemente um den Faktor 1,6 skaliert werden. Für WXGA müssen Sie Ihre UI im Vergleich zu WVGA also nicht verändern — abgesehen von den Bildern. Sie können die Auflösung des Geräts auch im Code abfragen.
Um die Auflösung im Code abzufragen, verwenden Sie die Eigenschaften von Application.Current.Host. Im Beispielpojekt gebe ich die Werte einfach auf dem Bildschirm aus. Die tatsächlichen Werte können Sie im Screenshot unten sehen. Wir verwenden diese Werte auch, um die Bilder gemäß der Auflösung auszuwählen.
Als erstes fügen wir im XAML der Hauptseite einige Textfelder und ein Bild hinzu. Im Code Behind setzen wir die Werte dieser Textboxes auf die aktuelle Bildschirmhöhe/-breite und ‑seitenverhältnis und den Namen der Auflösung.
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <StackPanel Orientation="Horizontal"> <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Height</TextBlock> <TextBlock x:Name="TextHeight" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Width</TextBlock> <TextBlock x:Name="TextWidth" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Scale</TextBlock> <TextBlock x:Name="TextScale" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Resolution</TextBlock> <TextBlock x:Name="TextResolution" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock> </StackPanel> <Image Height="100" x:Name="ScaledImage"></Image> </StackPanel>
TextHeight.Text = Application.Current.Host.Content.ActualHeight.ToString(); TextWidth.Text = Application.Current.Host.Content.ActualWidth.ToString(); TextScale.Text = Application.Current.Host.Content.ScaleFactor.ToString(); //use the scale to check which resolution you're using switch (Application.Current.Host.Content.ScaleFactor) { case 100: ScaledImage.Source = new BitmapImage(new Uri("Assets/wvga.png", UriKind.Relative)); TextResolution.Text = "WVGA"; break; case 150: ScaledImage.Source = new BitmapImage(new Uri("Assets/720p.png", UriKind.Relative)); TextResolution.Text = "720P"; break; case 160: ScaledImage.Source = new BitmapImage(new Uri("Assets/wxga.png", UriKind.Relative)); TextResolution.Text = "WXGA"; break; }
Die drei Bilder wvga, wxga und 720p sind Bilder, welche jeweils auf die entsprechende Größe skaliert sind. Das WVGA Bild hat die Abmessungen 432*100 (die selbe Größe wie das Image Control im XAML). Das 720p und das WXGA sind beide größer. Das 720p Bild hat 1,5x die Größe des WVGA Bildes. Das WXGA Bild hat 1,6x die Abmessungen des WVGA Bildes. Wie im Code oben zu sehen, wird das entsprechende Bild abhängig von der Scale Eigenschaft gewählt.
Die drei verwendeten Bilder sind (die Größe des Fonts in allen Bildern ist die selbe, um Ihnen einen Eindruck von der Qualität der Bilder zu geben. Klicken Sie auf ein Bild, um die tatsächliche Größe zu sehen):
Das Ergebnis im Emulator für alle drei Auflösungen:
Jetzt wissen wir, wie wir Bilder auf der Benutzeroberfläche behandeln können. Als letztes sollten Sie unbedingt im Hinterkopf behalten, dass 720p Auflösungen eine größere Höhe im Vergleich zu WVGA und WXGA haben (wie in den Screenshots oben zu erkennen). Wenn Sie Ihr Layout fix auf 800 Pixel Höhe festlegen, werden Sie ein leeres, ungenutztes Stück Bildschirm oberhalb Ihrer App sehen. Es ist besser, die App gleich so zu entwerfen, dass gewisse Bereiche eine dynamische Höhe haben können. Beispiele hierfür sind Listboxes, das Maps Control oder allgemein Scrollviewer. Diese Elemente können den Bildschirm ausfüllen, indem sie bei 720p einfach ein Stückchen länger sind.
Hoffentlich gibt Ihnen dieser Artikel eine Idee, wie Sie Anwendungen für alle drei Auflösungen bauen können.
Das Beispielprojekt können Sie hier herunterladen: http://sdrv.ms/QSJ2yx.
Danke für Ihr Interesse am vierten Artikel meiner achtteiligen Serie über die neuen Features in Windows Phone 8. Morgen werde ich über einige der neuen Features in .NET 4.5 und C# 5.0 schreiben. Diese vereinfachen Ihnen das Leben als Entwickler für Windows Phone.
Keine Kommentare
Guten Tag,
Ich nutze ein lumia 640 mit 720er bildaufloesung. Bestimmte Apps, wie
Bienenapp und Post mobil App
lassen sich nicht nutzen u.a. wegen des Formates.
Welche Einstellungen muss ich vornehmen ‚dass die Apps funktionieren?
Mit freundlichen Grüssen
I.Heilmann