Все о разработке приложений для устройств Windows Phone с большим экраном

Из этой статьи вы получите исчерпывающие сведения о разработке приложений для устройств с большим экраном, таких как Nokia Lumia 1520, а также узнаете, как адаптировать существующие приложения для использования на подобных устройствах.

Примечание. Это заявка на участие в конкурсе Nokia Imaging and Big UI Wiki Competition (IV квартал 2013 г.)

Введение

Не так давно вышло обновление Windows Phone Update 3 (GDR3). Доработанная операционная система рассчитана на разрешение 1080p и поддерживает большие дисплеи. Например, у Lumia 1520/1320 размер дисплея — 6 дюймов.  Lumia 1520 поддерживает разрешение 1080 x 1920, а Lumia 1320 — 720 x 1280 при соотношении сторон 16:9.

Концепцию разработки приложений для таких телефонов пришлось немного изменить с учетом поддержки больших дисплеев и разрешения 1080p. Существующие приложения, выполняемые на устройствах с 4-дюймовыми дисплеями и не поддерживающие разрешение 720p, необходимо оптимизировать для телефонов с большими экранами.

В этой статье мы рассмотрим все аспекты проектирования и оптимизации приложений для телефонов с большими 6-дюймовыми дисплеями.

Поддерживаемое разрешение в GDR3

В таблице ниже представлено поддерживаемое разрешение, соотношение сторон и масштабированное разрешение для Windows Phone 8 GDR3. На экране с разрешением 1080p свойство scaleFactor будет возвращать значение 1,5, несмотря на то что реальное внутреннее разрешение Windows Phone 8 составляет 2,25.

В таблице ниже также показано, как выглядит экран на телефонах с различными разрешениями. (При разрешении 720p рабочий стол может иметь две колонки, как у HTC 8x, или три колонки, как у Lumia 1320.)

Наименование:	WVGA	WXGA
Разрешение:	480 x 800	768 x 1280
Коэффициент масштабирования:	15:9	15:9
Масштабированное разрешение:	480 x 800	480 x 800
Lumia:	Ссылка ND: 525, 625, 520, 620, 720, 820	Ссылка ND: 1020, 925, 928, 920

Наименование:	720p	1080p
Разрешение:	720 x 1280	1080 x 1920
Коэффициент масштабирования:	16:9	16:9
Масштабированное разрешение:	480 x 853	480 x 853
Lumia:	Ссылка ND: 1320	Ссылка ND: 1520

Как существующее приложение будет выглядеть на экране с разрешением 1080p

Приложения для Windows Phone 7 и 8 с разрешениями 1080p работают не одинаково.

Приложения для Windows Phone 7

Приложения для Windows Phone 7 разрабатывались для соотношения сторон 15:9, для формата 16:9 они могут пересчитываться с ошибками. Поэтому, когда приложения для WP7 запускаются на экране с разрешением 1080p, под панелью задач в верхней части окна приложения появляется черная полоса (см. изображение ниже).

Чтобы она не отображалась, такие приложения необходимо портировать с WP7 на Windows Phone 8, обеспечив поддержку разрешения 720p.

Приложение Wp7, не поддерживающее разрешение 720p, при запуске на устройстве с разрешением 1080p.

Приложения для Windows Phone 8

Приложения для Windows Phone 8, рассчитанные на разрешение 720p, автоматически масштабируются до 1080p, и в полноэкранном режиме черной полосы не будет. В обновлении GDR3 поддержка 1080p реализована как масштабированное разрешение 720p. Поэтому черная полоса будет отсутствовать, если запустить на дисплее с 1080p приложение, поддерживающее разрешение 720p.

Поддержку разрешения 720p следует объявить в файле манифеста приложения WMAppManifest.xml, как показано ниже. Обратите внимание на то, что отдельного значения для 1080p не предусмотрено, тег 720 используется как для 720p, так и для 1080p. Для объявления используется тег ScreenResolutions (см. ниже).

<ScreenResolutions>
  <ScreenResolution Name="ID_RESOLUTION_WVGA"/>
  <ScreenResolution Name="ID_RESOLUTION_WXGA"/>
  <ScreenResolution Name="ID_RESOLUTION_HD720P"/> <!-- Также используется для 1080p-->
</ScreenResolutions>

Ниже показано приложение с поддержкой разрешения 720p, работающее на устройствах с разрешением 720p и 1080p. Как показано на втором скриншоте, экран приложения стал крупнее и вмещает больше контента.

Приложение, поддерживающее разрешение 720p, работающее на устройстве с разрешением 720p.

Приложение с поддержкой разрешения 720p, работающее на устройстве с разрешением 1080p.

Тестирование приложения. Эмулятор 1080p

В настоящее время эмулятор для тестирования и проверки отображения приложений на устройствах с разрешением 1080p отсутствует, но разработчики могут использовать эмулятор для 720p. Протестировать свои приложения для различных разрешений можно с помощью интерфейсов ​Microsoft.Devices.Environment.DeviceType и ​App.Current.Host.Content.ActualWidth.

Корпорация Microsoft в скором времени выпустит обновление своего инструмента Windows Phone GDR3 SDK, и эмулятор будет поддерживать 1080p.

Адаптация существующих приложений для разрешения 1080p

Почему приложения нуждаются в адаптации

Разрешение 1080p поддерживают телефоны с большим экраном (6 дюймов и более). На таком экране можно показать больше контента приложения. Как сказано в «Рекомендациях по обеспечению удобной работы пользователя», навигация максимально проста, и приложение может занимать большую часть экрана.

Итак, чтобы сделать пользовательский интерфейс на телефонах с большими экранами максимально дружественным и привлекательным, мы должны адаптировать свои приложения. Навигация будет более удобной, и пользователь увидит больше контента. Адаптации подлежат следующие элементы:

• Макет пользовательского интерфейса:
  Выводить больше контента в соответствующей области.
  Упростить навигацию.
• Использовать графические элементы, которые будут хорошо выглядеть на экранах большего размера:
  Размер и разрешение изображений.
  Размер и разрешение видео.
• Экран-заставка.
• Шрифты.

Ниже описаны два этапа адаптации существующих приложений для использования на устройствах с разрешением 1080p. Аналогичным образом создаются приложения для любых разрешений.

1. Макет, учитывающий разрешение. Определение установленного разрешения и загрузка различных наборов элементов.
2. Динамический макет. Разработка макета с поддержкой автоматического масштабирования.

Макет, учитывающий разрешение (определение установленного на устройстве разрешения)

В данном случае необходимо сначала получить значение параметра scaleFactor с помощью App.Current.Host.Content.ScaleFactor, затем на его основе определить выбранное разрешение (WVGA, WXGA или HD (720/1080)). С учетом установленного разрешения выбирается конкретный набор элементов для отображения, включая макет пользовательского интерфейса, графические элементы, изображения, видео, шрифты.

Чтобы определить установленное на устройстве разрешение, нам нужно узнать коэффициент масштабирования (scaleFactor) с помощью App.Current.Host.Content.ScaleFactor. Показанный ниже класс ReferenceHelper.cs возвращает текущее разрешение устройства. Получив разрешение от этого вспомогательного класса, мы можем загружать различные элементы с учетом разрешения и в соответствии с нашими потребностями.

ReferenceHelper.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ResolutionDependant
{
  public enum Resolutions { WVGA, WXGA, HD };

  public static class ResolutionHelper
  {
    private static bool IsWvga
    {
      get
      {
        return App.Current.Host.Content.ScaleFactor == 100;
      }
    }

    private static bool IsWxga
    {
      get
      {
        return App.Current.Host.Content.ScaleFactor == 160;
      }
    }

    private static bool IsHD
    {
      get
      {
        return App.Current.Host.Content.ScaleFactor == 150;
      }
    }

    public static Resolutions CurrentResolution
    {
      get
      {
        if (IsWvga) return Resolutions.WVGA;
        else if (IsWxga) return Resolutions.WXGA;
        else if (IsHD) return Resolutions.HD;
        else throw new InvalidOperationException("Неизвестное разрешение");
      }
    }
  }
}

С помощью этого вспомогательного класса мы будем загружать соответствующий контент. В представленном ниже классе Reference.cs мы сначала получаем разрешение и активируем различный контент (изображения, видео и т. д.) либо переходим к другому макету страницы, который уже содержит все изображения, видео, ссылки и другие элементы для этого разрешения. В примере кода мы просто выводим на экран разрешение, определенное приложением.

Reference.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ResolutionDependant
{
  public class Resolution
  {
    public string BestResolutionImage
    {
      get
      {
        switch (ResolutionHelper.CurrentResolution)
        {
          case Resolutions.HD:
            return "720/1080. Загрузите элементы или макет страницы для разрешения 720p.";
          case Resolutions.WXGA:
            return "WXGA. Загрузите элементы или макет страницы для разрешения 768x1280.";
          case Resolutions.WXGA:
            return "WVGA. Загрузите элементы или макет страницы для разрешения 480x800.";
          default:
            throw new InvalidOperationException("Неизвестный тип разрешения");
        }
      }
    }
  }
}

На скриншотах далее показан пример приложения, которое позволяет понять данную методику адаптации с учетом разрешения.

Определено разрешение: WXGA.

Определено разрешение: WVGA.

Определено разрешение: HD.

Исходный код этого простого приложения, позволяющего определять разрешение экрана, можно скачать здесь: Media:ResolutionDependant.zip

Динамический макет. Разработка макета с поддержкой автоматического масштабирования

Это методика предполагает, что сначала следует проверить, имеет ли целевое устройство большой экран. Затем, с учетом полученной информации, выбирается специальная страница и (или) приложение, рассчитанное на экраны большего размера.

Чтобы страница правильно отображалась на телефонах с разрешением WVGA, WXGA, 720p и 1080p, не следует жестко задавать высоту, ширину и поля для элементов управления. После того как вы перетащили элементы управления из соответствующей панели, необходимо удалить или тщательно проверить поля, которые были заданы автоматически.

В Windows Phone 8 Update GDR3 появились три новых свойства, имеющих отношение к разрешению; ихзначения можно получить с помощью API DeviceExtendedProperties. Три новых свойства:

1. PhysicalScreenResolution — ширина и высота в физических пикселях.
2. RawDpiX — количество точек на дюйм по горизонтали экрана. Если значение недоступно, свойство возвращает 0.0.
3. RawDpiY — количество точек на дюйм по вертикали экрана. Если значение недоступно, свойство возвращает 0.0.

Примечание. В версии Pre-GDR3 три перечисленных свойства вызовут необрабатываемое исключение.

Ниже показан пример использования динамического макета для адаптации наших приложений под большие экраны.

Определение размера экрана устройства — представленный ниже код помогает понять, можно ли использовать новые свойства или текущее устройство не имеет большого экрана.

using Microsoft.Phone.Info;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;

namespace DynamicLayout
{
  class ScreenSizeHelper
  {
    static private double _screenSize = -1.0f;
    static private double _screenDpiX = 0.0f;
    static private double _screenDpiY = 0.0f;
    static private Size _resolution;

    static public bool IsBigScreen
    {
      get
      {
        // Будем использовать эмулятор 720p для имитации большого экрана.
        if (Microsoft.Devices.Environment.DeviceType == Microsoft.Devices.DeviceType.Emulator)
        {
          _screenSize = (App.Current.Host.Content.ScaleFactor == 150) ? 6.0f : 0.0f;
        }

        if (_screenSize == -1.0f)
        {
          try
          {
            _screenDpiX = (double)DeviceExtendedProperties.GetValue("RawDpiX");
            _screenDpiY = (double)DeviceExtendedProperties.GetValue("RawDpiY");
            _resolution = (Size)DeviceExtendedProperties.GetValue("PhysicalScreenResolution");

            // Вычисляем диагональ экрана в дюймах.
            _screenSize =
              Math.Sqrt(Math.Pow(_resolution.Width / _screenDpiX, 2) +
                   Math.Pow(_resolution.Height / _screenDpiY, 2));
          }
          catch (Exception e)
          {
            // Это старая версия программного обеспечения, экран небольшой.
            Debug.WriteLine("IsBigScreen error: " + e.Message);
            _screenSize = 0;
          }
        }

        // Возвращает значение True, если размер экрана больше 5 дюймов.
        // Вы можете изменить это условие в зависимости от потребностей вашего приложения.
        return (_screenSize > 5.0f);
      }
    }
  }
}

При помощи представленного выше вспомогательного класса мы сначала проверим, имеет ли текущее устройство большой экран. Если ответ будет положительным, мы выберем стиль Theme Style, который будет выводить на экран больше контента. Представленный ниже код использует упомянутый вспомогательный стиль и устанавливает свойство Style.

Public class StyleSelector
{
  static public void SetStyle()
  {
    if(ScreenSizeHelper.IsBigScreen)
    {
      var appTheme = new ResourceDictionary {
        Source = new Uri("/ScreenStyle;component/Themes/Style1080p.xaml", UriKind.Relative)
      };

      Application.Current.Resources.MergedDictionaries.Add(appTheme);
    }
  }
}

Указанный выше метод мы будем вызывать в конструкторе приложения.

public partial class App : Application
{
    public static PhoneApplicationFrame RootFrame { get; private set; }

    /// <summary>
    /// Конструктор для объекта Application.
    /// </summary>
    public App()
    {
      UnhandledException += Application_UnhandledException;

      InitializeComponent();

      // Загружаем стиль для большого экрана.
      StyleSelector.SetStyle();

      InitializePhoneApplication();

      InitializeLanguage();
}

Таким образом, с помощью Theme Style мы можем установить динамический макет для больших экранов после проверки реального размера экрана на текущем устройстве.

Чтобы получить более подробную информацию о принципах адаптации приложений под устройства с большим экраном, ознакомьтесь с библиотекой разработчика Nokia ( нажмите здесь).

Пример динамического макета (пример для разработчика Nokia)

В библиотеке разработчика Nokia имеется один пример, помогающий понять принципы работы с динамическими макетами, у которых с помощью стилей в режиме выполнения изменяется параметр dataitem после определения размера экрана.

Выше мы уже показали, как определить размер экрана и задать стиль Them Style в режиме выполнения. Далее представлен пример практического использования этих возможностей.

Был создан один файл XAML с элементом управления Grid и одним объектом типа Image в нем. В режиме выполнения установим для этих элементов управления различные стили.

<DataTemplate x:Key="SampleDataItemTemplate">
    <Grid Margin="12,6,12,6" Style="{StaticResource GridItem}">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <Image Grid.Row="0" Source="{Binding DataImage}" Style="{StaticResource GridImage}" />

      <TextBlock Grid.Row="1"
           Margin="0"
           Style="{StaticResource LargeBoldText}"
           Text="{Binding DataTitle}" />
    </Grid>
  </DataTemplate>

Затем создадим два стиля Theme Style, которые будут применяться к этим элементам управления.

Первый стиль Theme Style (для небольших экранов): SampleDataItemStyleDefault.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!-- Text -->
  <Style x:Key="NormalText"
     BasedOn="{StaticResource PhoneTextNormalStyle}"
     TargetType="TextBlock" />

  <Style x:Key="LargeBoldText" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe WP Semibold" />
    <Setter Property="FontSize" Value="32" />
  </Style>

  <!-- Layout -->
  <Style x:Key="GridImage" TargetType="Image">
    <Setter Property="Width" Value="204" />
    <Setter Property="Height" Value="204" />
  </Style>

  <Style x:Key="GridItem" TargetType="Grid">
    <Setter Property="Width" Value="204" />
  </Style>

</ResourceDictionary>

В примере выше, в разделе SampleDataItemStyleDefault.xaml, были добавлены четыре стиля для

1. NormalText
2. LargeBoldText
3. GridImage
4. GridItem

То есть разработчик планировал адаптировать размер текста и макет для телефонов с большими экранами, применяя специальный стиль вместо стиля по умолчанию. Ниже представлен стиль для большого экрана:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!-- Large Screen Overrides -->

  <!-- Text -->
  <Style x:Key="LargeBoldText" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe WP Semibold" />
    <Setter Property="FontSize" Value="22" />
  </Style>

  <!-- Layout -->
  <Style x:Key="GridImage" TargetType="Image">
    <Setter Property="Width" Value="128" />
    <Setter Property="Height" Value="128" />
  </Style>

  <Style x:Key="GridItem" TargetType="Grid">
    <Setter Property="Width" Value="128" />
  </Style>

</ResourceDictionary>

Затем в представленном выше коде проверяется размер экрана с помощью вспомогательного класса ScreenSizeHelper, и в режиме выполнения устанавливается стиль для большого экрана с использованием Application.Current.Resources.MergedDictionaries.Add.

• NormalText: в стиле Large Screen Style вместо NormalText используется LargeBoldText.
• LargeBoldText: в стиле Large Screen Style для параметра LargeBoldText устанавливается значение 22 (в стиле Small Screen Style было 32). Размер текста, выводимого на большой экран, должен быть уменьшен операционной системой, поскольку текст и так выглядит крупнее.
• GridImage: в этом ключе стиля изменяется значение ширины и высоты элемента управления Image.
• GridItem: в этом ключе стиля изменяется значение ширины элемента управления Grid, чтобы на большом экране отображалось больше колонок, чем на маленьком.

Примечание. В этом примере показано, как реализовать динамический макет, используя другой стиль. В данном случае с целью адаптации приложения под большой экран настраиваются только текст и макет. Чтобы наше приложение выглядело более привлекательно на телефонах с большим экраном, мы также можем определить стиль для других элементов управления.

Скриншот примера для разработчика Nokia:

Применен стиль по умолчанию для устройств с разрешением экрана 720p.

Применен стиль Bigger1080p Style для устройств с разрешением экрана 1080p.

Некоторые советы в отношении динамического макета для разработчиков пользовательского интерфейса

• Используемые элементы должны изначально иметь подходящее разрешение, чтобы избежать масштабирования в целях увеличения изображений: результаты масштабирования становятся еще более заметными на устройствах с большими экранами.
• Не следует жестко задавать длину или ширину какого-либо элемента управления.
• Не задавайте фиксированные поля для какого-либо элемента управления, поскольку на экранах разного размера поля также будут разными.
• Помещая на форму элементы управления с соответствующей панели, обязательно убедитесь в том, что для них не заданы фиксированные поля и другие параметры, в противном случае эти настройки следует удалить.
• Создавайте разные стили для экранов разного размера, чтобы можно было применять их в режиме выполнения.
• Постарайтесь максимально эффективно использовать пространство, предоставляемое большим экраном, чтобы выводить больше контента.
• Не задавайте фиксированный размер для шрифтов.

Экран-заставка

Один общий экран-заставка для всех разрешений

Чтобы вы могли использовать один общий экран-заставку для всех разрешений, создайте файл изображения с именем SplashScreenImage.jpg и разрешением 768 × 1280. Телефон автоматически масштабирует изображение до нужного размера с учетом установленного разрешения экрана.

Идеальный экран-заставка для всех разрешений

Если вам нужен идеальный экран-заставка для всех разрешений, вы можете добавлять изображения в файлах со следующими именами. Все изображения для экрана-заставки должны находиться в корневой папке проекта вашего приложения.

• Разрешение WVGA: SplashScreenImage.Screen-WVGA.jpg
• Разрешение WXGA: SplashScreenImage.Screen-WXGA.jpg
• Разрешение720p: SplashScreenImage.Screen-720p.jpg
• Разрешение1080p: SplashScreenImage.Screen-720p.jpg

Обратите внимание, что в примере выше для экрана-заставки с разрешением 1080p мы указали то же самое изображение, что и для разрешения 720p, поскольку телефон будет по умолчанию использовать заставку с разрешением 720p, когда пользователь установит разрешение 1080p.

Экран блокировки

Если ваше приложение настраивает экран блокировки, рекомендуется использовать изображения в высоком разрешении, поскольку они будут автоматически уменьшаться на устройствах с небольшим экраном. При этом на устройствах с большим экраном изображения не придется увеличивать, что помогает избежать ухудшения их качества.

Если ваше приложение выводит экран блокировки со шрифтами или изображением во время выполнения, рекомендуется создавать новый экран с оптимизированными элементами, после того как будет определено разрешение и (или) размер экрана во время выполнения.

Применен стиль по умолчанию для устройств с разрешением экрана 720p.

Применен стиль Bigger1080p Style для устройств с разрешением экрана 1080p.

Плитки

Что касается плиток, нам придется предоставить изображения только для разрешения WXGA. Телефон автоматически адаптирует изображения плиток под экраны с разрешением WVGA, 720p или 1080p. Менять или оптимизировать что-либо нет необходимости.

Чтобы получить более подробную информацию о создании плиток для больших экранов, ознакомьтесь с материалами из библиотеки разработчика Nokia ( Nokia Developer Library).

Значки и списки приложений

Как и для плиток, для значков нам придется предоставить изображения только для разрешения WXGA. Телефон автоматически адаптирует изображения плиток под экраны с разрешением WVGA, 720p или 1080p. Менять или оптимизировать что-либо нет необходимости.

Чтобы получить более подробную информацию о создании значков приложений для больших экранов, ознакомьтесь с материалами из библиотеки разработчика Nokia ( Nokia Developer Library).

Шрифты

Системные шрифты автоматически масштабируются с коэффициентом 2,25. Однако другие шрифты, например PhoneFontFamilyNormal и PhoneFontSizeMediumLarge, масштабируются только на 80 % от коэффициента 2,25. То есть, к примеру, вместо 25,333 пикселей будет 46 (25,333 * 2,25 * 0,8), а не 57 (25,333 * 2,25). Пользовательские стили шрифтов в приложениях необходимо настраивать аналогичным образом.

Чтобы получить более подробную информацию о размерах шрифтов для больших экранов, ознакомьтесь с материалами из библиотеки разработчика Nokia ( Nokia Developer Library).

Графические элементы

Графические элементы автоматически уменьшаются или увеличиваются на большом экране, но рекомендуется использовать графику с высоким разрешением, поскольку изображения можно уменьшить без потери качества, чего нельзя сказать об их увеличении.

Чтобы получить более подробную информацию о графических элементах для больших экранов, ознакомьтесь с материалами из библиотеки разработчика Nokia ( Nokia Developer Library).

Пример 1. Приложение «Концентратор изображений»

Ниже представлены скриншоты приложения Picture Hub (Концентратор изображений), адаптированного под большие экраны (1080p) таких устройств, как Lumia 1520 и Lumia 1320. Как видите, вместо двух колонок на втором скриншоте появляются три, поскольку на крупном экране вмещается больше контента. Кроме того, в целях оптимизации на устройстве с большим экраном были уменьшены изображения.

Две колонки на 4,3-дюймовом экране.

Три колонки на большом 6-дюймовом экране.

Несмотря на то что четырехколоночный элемент Grid на маленьком экране останется таковым и на большом, размер и количество отображаемых на экране изображений изменятся.

Четыре колонки с изображениями измененного размера на 4,3-дюймовом экране.

Четыре колонки с изображениями измененного размера на 6-дюймовом экране.

Пример 2. Приложение «Контакты»

Как вы могли заметить, приложение People Hub (Контакты) также было адаптировано и теперь отображает больше контента на телефонах с большими дисплеями. На скриншотах ниже вы видите, что элемент управления Grid, у которого на маленьком экране было две колонки, на большом стал трехколоночным. Количество колонок четырехколоночного элемента осталось прежним, но при этом изменился размер отображаемого элемента.

Две колонки в Grid с изображениями измененного размера на 4,3-дюймовом экране.

Три колонки в Grid с изображениями измененного размера на 6-дюймовом экране.

Две колонки в Grid с изображениями измененного размера на 4,3-дюймовом экране.

Три колонки в Grid с изображениями измененного размера на 6-дюймовом экране.

Пример 3. Обозреватель музыки от Nokia

Разработчики Nokia недавно обновили свой проект Nokia Music Explorer (Обозреватель музыки), выступающий в качестве примера кода. Приложение было оптимизировано для экранов с большим разрешением, например, как у Lumia 1520. Кроме того, была реализована поддержка трехколоночного макета. В примере кода показан оптимальный подход к адаптации приложений под экраны с высоким разрешением.

Чтобы получить более подробную информацию, ознакомьтесь с материалами из библиотеки разработчика Nokia ( Nokia Developer Library), а также скачайте исходный код обозревателя музыки CodeExample: Music Explorer.

Далее представлены скриншоты старого двухколоночного макета и нового трехколоночного для нового рабочего стола с разрешением 1080p.

Две колонки в Grid с изображениями измененного размера на 4,3-дюймовом экране.

Три колонки в Grid с изображениями измененного размера на 6-дюймовом экране.

Исходный код

С учетом разрешения

Здесь вы можете скачать исходный код, иллюстрирующий применение макета, учитывающего разрешение, для адаптации приложений:  Файл: ResolutionDependant.zip.

Пример динамического макета

Разработчики Nokia Developer предоставили пример исходного кода для динамического макета. Этот код, который можно скачать с узла Github, поможет вам реализовать динамический макет в своем приложении.