Blog Educativo.pl Menu

Link:

Tworzenie aplikacji Windows Phone na kilka rozdzielczości ekranu

w kategoriiWindows Phone przez Grzegorz Jamiołkowski
Skomentuj

wp3Wraz z premierą Windows Phone 8, Microsoft wprowadził trzy nowe rozdzielczości w swoich urządzeniach.  Do tej pory, tworzenie na Windows Phone 7.x, nie wymagało zajmowania się tą tematyką, gdyż starszy system ma tylko jedną rozdzielczość. Obecnie prace deweloperskie wymagają zaznajomienia się z tą tematyką. 

Zacząć należy od tego jakie rozdzielczości oferuje system. Windows Phone obecnie ma następujące standardy:

– WVGA – rozdzielczość: 480×800, skala: 15:9, system WP8/7.x, skalowanie: 480×800

– WXGA – rozdzielczość: 768×1280, skala: 15:9, system WP8, skalowanie: 480×800

– 720p – rozdzielczość: 720×1280, skala: 16:9, system WP8 skalowanie: 480×853

W tym momencie już należy brać pod uwagę, iż najbliższe aktualizacje dla Windows Phone wprowadzą wsparcie dla 1080p.

Jak łatwo zauważyć tworzenie pod starszy system było znacznie prostsze. Jednak rozdzielczość WVGA ułatwiała zadanie dla designera. Obecnie trzeba obsłużyć aż trzy rozdzielczości, a co jest najciekawsze, są one w dwóch skalach 15:9 i 16:9, a zatem stare przyzwyczajenia z pisania pod Windows Phone 7.x (czyli operowanie na konkretnych szerokościach/ wysokościach) nie sprawdzi się zupełnie.

Podstawowa zasada obecnie to nie używanie hardcodowanych wymiarów dla elementów layoutu. Warto stosować np. kontrolę grid, która dopasowywać się będzie do rozdzielczości. Co więcej wymiary można ustalać za pomocą wartości Auto i *, które same dostosują się do rozmiaru ekranu. Należy uzmysłowić sobie, że w żadnym wypadku nie należy tworzyć elementów z jedną tylko wartością dla wymiaru. Warto zadbać, także o to by automatyczne skalowanie nie zmniejszyło lub powiększyło danego elementu zbyt dużo – osiągnąć to można poprzez wartości Min/Max dla Width i Height.

Warto wiedzieć także, jak z poziomu kodu wykryć rozdzielczość aplikacji. Przykładowy kod:

public enum Resolutions { WVGA, WXGA, HD720p };

public static class ResolutionDetect
{
      public static Resolution GetResolution
     {
          get
          {
          if (App.Current.Host.Content.ScaleFactor == 100) 
               return Resolutions.WVGA;
          else if (App.Current.Host.Content.ScaleFactor == 160) return Resolutions.WXGA;
          else if (App.Current.Host.Content.ScaleFactor == 150) return Resolutions.HD720p;
          else throw new InvalidOperationException("Unknown resolution");
          }
     }
}

Odwołanie:

ResolutionDetect. GetResolution

zwróci aktualną rozdzielczość w jakiej działa nasza aplikacja.

Ważnym elementem są także obrazki, które umieszczone w aplikacji prócz skalowania, można również wyświetlać w natywnej rozdzielczości. Z pomocą przyjdzie nam powyższy kod, do wykrywania rozmiaru ekranu. W takim wypadku w zależności od ilości pikseli, zwracamy odpowiedni obrazek w natywnej rozdzielczości.

Na koniec jeszcze o standardowych składnikach aplikacji jak ekran startowy i LiveTiles. Pierwszy z nich, jeśli nie przygotujemy odpowiednich plików będzie skalowany automatycznie. W przeciwnym przypadku, należy przygotować trzy grafiki i nazwać te pliki SplashScreenImage.screen-WVGA.jpg, SplashScreenImage.screen-WXGA.jpg, SplashScreenImage.screen-720p.jpg w rozdzielczości takiej, na jaką wskazuje nazwa pliku. Sytuacja z LiveTiles jest prostsza. Wystarczy przygotować grafikę w formacie WXGA, a dla pozostałych rozdzielczości, zostaną one odpowiednio przeskalowane.

Warto dodać także, że dla naszego ułatwienia, emulator Windows Phone 8 w Visual Studio pozwala na przetestowanie z poziomu IDE każdej z wymienionych rozdzielczości, co podnosi znacząco  komfort pracy.

  • Michal

    Tylko po co tworzyć aplikacje na windows phone, i wspierać monopol ?

    • Piotr Potulski

      Panowie… (Pań na razie nie widzę) dajmy sobie spokój z wojenkami iOS/Android/WP – jeśli próbujemy być profesjonalistami – pisze się na to, czego używają ludzie. Fakt – WP raczej nie używają.

  • Wp

    Aby ukrócić monopol Androida i iOSa 🙂

  • Dziękujemy za skomenentowanie, dozwolone znaczniki html to strong, code i href.