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

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

Die­ser Arti­kel ist Tag #4 der Serie 8 Tage Win­dows Phone 8 von Geert van der Cruijsen.

Der Ori­gi­nal­ar­ti­kel befin­det sich hier: 8 days of Win­dows Phone 8 — Day 4: New Screen Reso­lu­ti­ons.

8 Tage Windows Phone 8

Will­kom­men zurück zu mei­ner Arti­kel­se­rie 8 Tage Win­dows Phone 8. Heute, am vier­ten Tag der Serie, beschäf­ti­gen wir uns mit den neuen Bild­schirm­auf­lö­sun­gen unter Win­dows Phone 8 und was Sie tun soll­ten, um diese als Ent­wick­ler zu unterstützen.

day4

Ver­füg­bare Bildschirmauflösungen

In Win­dows Phone 8 wer­den drei Auf­lö­sun­gen unter­stützt: WVGA, WXGA und 720p.

  Auf­lö­sung Sei­ten­ver­hält­nis
WVGA 480*800 15:9
WXGA 768*1280 15:9
720P 720*1280 16:9

Unbe­dingt zu beach­ten ist, dass es zwei unter­schied­li­che Sei­ten­ver­hält­nisse gibt: 15:9 und 16:9. Wenn Sie sich das Bild unten anse­hen, erken­nen Sie, dass WVGA (480*800) und WXGA (768*1280) das selbe Sei­ten­ver­hält­nis haben. Apps, wel­che für WVGA gebaut wur­den, kön­nen pro­blem­los auf WXGA ska­liert wer­den und umge­kehrt. Die 720p Auf­lö­sung aller­dings hat ein 16:9 Sei­ten­ver­hält­nis. Für diese Auf­lö­sung müs­sen Sie das Lay­out der Benut­zer­schnitt­stelle so fle­xi­bel gestal­ten, dass es in der Lage ist, die „län­gere“ Flä­che des Bild­schirms auszunutzen.

wp8resolutions

Was soll­ten Sie also tun, um alle Auf­lö­sun­gen zu unter­stüt­zen? Als ers­tes soll­ten alle Bil­der, wie z.B. das Bild für die Anwen­dungs­ka­chel, in der höchs­ten Auf­lö­sung bereit­ge­stellt wer­den. Das Betriebs­sys­tem wird diese auto­ma­tisch ent­spre­chend ska­lie­ren. Wei­ter­hin soll­ten Sie das Lay­out der App fle­xi­bel genug gestal­ten, so dass es geeig­nete UI Ele­mente, wie z.B. List­bo­xes, ska­liert, je nach­dem, ob der Bild­schirm län­ger (wie bei 720p) oder kür­zer (wie bei den ande­ren bei­den Auf­lö­sun­gen) ist. Eben­falls bemer­kens­wert ist, dass WXGA 1,6x der Auf­lö­sung von WVGA ent­spricht. Die Flä­che ist immer noch 480*800, nur dass alle UI Ele­mente um den Fak­tor 1,6 ska­liert wer­den. Für WXGA müs­sen Sie Ihre UI im Ver­gleich zu WVGA also nicht ver­än­dern — abge­se­hen von den Bil­dern. Sie kön­nen die Auf­lö­sung des Geräts auch im Code abfragen.

Um die Auf­lö­sung im Code abzu­fra­gen, ver­wen­den Sie die Eigen­schaf­ten von Application.Current.Host. Im Bei­spiel­po­jekt gebe ich die Werte ein­fach auf dem Bild­schirm aus. Die tat­säch­li­chen Werte kön­nen Sie im Screen­shot unten sehen. Wir ver­wen­den diese Werte auch, um die Bil­der gemäß der Auf­lö­sung auszuwählen.

Als ers­tes fügen wir im XAML der Haupt­seite einige Text­fel­der und ein Bild hinzu. Im Code Behind set­zen wir die Werte die­ser Text­bo­xes auf die aktu­elle Bildschirmhöhe/-breite und –sei­ten­ver­hält­nis 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 Bil­der wvga, wxga und 720p sind Bil­der, wel­che jeweils auf die ent­spre­chende Größe ska­liert sind. Das WVGA Bild hat die Abmes­sun­gen 432*100 (die selbe Größe wie das Image Con­trol im XAML). Das 720p und das WXGA sind beide grö­ßer. Das 720p Bild hat 1,5x die Größe des WVGA Bil­des. Das WXGA Bild hat 1,6x die Abmes­sun­gen des WVGA Bil­des. Wie im Code oben zu sehen, wird das ent­spre­chende Bild abhän­gig von der Scale Eigen­schaft gewählt.

Die drei ver­wen­de­ten Bil­der sind (die Größe des Fonts in allen Bil­dern ist die selbe, um Ihnen einen Ein­druck von der Qua­li­tät der Bil­der zu geben. Kli­cken Sie auf ein Bild, um die tat­säch­li­che Größe zu sehen):

wvga

720p

wxga

Das Ergeb­nis im Emu­la­tor für alle drei Auflösungen:

resolutionwvga

resolution720p

resolutionwxga

Jetzt wis­sen wir, wie wir Bil­der auf der Benut­zer­ober­flä­che behan­deln kön­nen. Als letz­tes soll­ten Sie unbe­dingt im Hin­ter­kopf behal­ten, dass 720p Auf­lö­sun­gen eine grö­ßere Höhe im Ver­gleich zu WVGA und WXGA haben (wie in den Screen­shots oben zu erken­nen). Wenn Sie Ihr Lay­out fix auf 800 Pixel Höhe fest­le­gen, wer­den Sie ein lee­res, unge­nutz­tes Stück Bild­schirm ober­halb Ihrer App sehen. Es ist bes­ser, die App gleich so zu ent­wer­fen, dass gewisse Berei­che eine dyna­mi­sche Höhe haben kön­nen. Bei­spiele hier­für sind List­bo­xes, das Maps Con­trol oder all­ge­mein Scroll­viewer. Diese Ele­mente kön­nen den Bild­schirm aus­fül­len, indem sie bei 720p ein­fach ein Stück­chen län­ger sind.

Hof­fent­lich gibt Ihnen die­ser Arti­kel eine Idee, wie Sie Anwen­dun­gen für alle drei Auf­lö­sun­gen bauen können.

Das Bei­spiel­pro­jekt kön­nen Sie hier her­un­ter­la­den: http://sdrv.ms/QSJ2yx.

Danke für Ihr Inter­esse am vier­ten Arti­kel mei­ner acht­tei­li­gen Serie über die neuen Fea­tures in Win­dows Phone 8. Mor­gen werde ich über einige der neuen Fea­tures in .NET 4.5 und C# 5.0 schrei­ben. Diese ver­ein­fa­chen Ihnen das Leben als Ent­wick­ler für Win­dows Phone.

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>