Georg fährt extra nach Berlin um Steve Ballmer zu treffen

8 Tage Windows Phone 8 | Tag #4: Die neuen Bildschirmauflösungen

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.

8 Tage Windows Phone 8

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.

day4

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.

wp8resolutions

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):

wvga

720p

wxga

Das Ergebnis im Emulator für alle drei Auflösungen:

resolutionwvga

resolution720p

resolutionwxga

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.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *