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 Pho­ne 8 von Geert van der Cru­ij­sen.

Der Ori­gi­nal­ar­ti­kel befin­det sich hier: 8 days of Win­dows Pho­ne 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 Pho­ne 8. Heu­te, am vier­ten Tag der Serie, beschäf­ti­gen wir uns mit den neu­en Bild­schirm­auf­lö­sun­gen unter Win­dows Pho­ne 8 und was Sie tun soll­ten, um die­se als Ent­wick­ler zu unter­stüt­zen.

day4

Verfügbare Bildschirmauflösungen

In Win­dows Pho­ne 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­nis­se 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 sel­be 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 die­se Auf­lö­sung müs­sen Sie das Lay­out der Benut­zer­schnitt­stel­le so fle­xi­bel gestal­ten, dass es in der Lage ist, die „län­ge­re“ Flä­che des Bild­schirms aus­zu­nut­zen.

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 die­se 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­ne­te UI Ele­men­te, 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­men­te 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 abfra­gen.

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 Wer­te ein­fach auf dem Bild­schirm aus. Die tat­säch­li­chen Wer­te kön­nen Sie im Screen­shot unten sehen. Wir ver­wen­den die­se Wer­te auch, um die Bil­der gemäß der Auf­lö­sung aus­zu­wäh­len.

Als ers­tes fügen wir im XAML der Haupt­sei­te eini­ge Text­fel­der und ein Bild hin­zu. Im Code Behind set­zen wir die Wer­te die­ser Text­bo­xes auf die aktu­el­le Bild­schirm­hö­he/-brei­te und ‑sei­ten­ver­hält­nis und den Namen der Auf­lö­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­chen­de Grö­ße ska­liert sind. Das WVGA Bild hat die Abmes­sun­gen 432*100 (die sel­be Grö­ße wie das Image Con­trol im XAML). Das 720p und das WXGA sind bei­de 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­chen­de Bild abhän­gig von der Sca­le Eigen­schaft gewählt.

Die drei ver­wen­de­ten Bil­der sind (die Grö­ße des Fonts in allen Bil­dern ist die sel­be, 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 Auf­lö­sun­gen:

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ö­ße­re 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 gewis­se Berei­che eine dyna­mi­sche Höhe haben kön­nen. Bei­spie­le hier­für sind List­bo­xes, das Maps Con­trol oder all­ge­mein Scroll­view­er. Die­se Ele­men­te 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 bau­en kön­nen.

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

Dan­ke für Ihr Inter­es­se am vier­ten Arti­kel mei­ner acht­tei­li­gen Serie über die neu­en Fea­tures in Win­dows Pho­ne 8. Mor­gen wer­de ich über eini­ge der neu­en Fea­tures in .NET 4.5 und C# 5.0 schrei­ben. Die­se ver­ein­fa­chen Ihnen das Leben als Ent­wick­ler für Win­dows Pho­ne.

Ein Kommentar

  • Guten Tag,
    Ich nut­ze ein lumia 640 mit 720er bild­auf­loe­sung. Bestimm­te Apps, wie
    Bie­nen­app und Post mobil App
    las­sen sich nicht nut­zen u.a. wegen des For­ma­tes.
    Wel­che Ein­stel­lun­gen muss ich vor­neh­men ‚dass die Apps funk­tio­nie­ren?
    Mit freund­li­chen Grüs­sen
    I.Heilmann

Schreibe einen Kommentar

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