Posted on 26. June 2017

Анимации в Visual Layer с Windows 10 Creators Update

Windows 10 Creators Update является третьей крупной версией API платформы Windows UI. Целью каждого нового выпуска является попытка упростить функции, представленные в предыдущих обновлениях. Это побуждает разработчиков Universal Windows Platform (UWP) стандартизировать эти функции. Примером этого являются новые скрытые и открытые анимации.

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

Скрытые и открытые анимации для смены страниц

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

 

 

В Creators Update добавлены две новые скрытые техники анимации, которые помогут вам сделать эти переходы более подвижными: 

ElementCompositionPreview.SetImplicitShowAnimation и ElementCompositionPreview.SetImplicitHideAnimation. Всякий раз, когда загружается UIElement или когда для свойства Visibility установлено значение Visible, будет воспроизводиться скрытая анимация, связанная с ним с помощью SetImplicitShowAnimation. Аналогично, всякий раз, когда пользователь переходит от страницы или когда UIElement скрыт, будет вызвана анимация, связанная с использованием метода SetImplicitHideAnimation. Эти две техники облегчают вам возможности добавления движения, как неотъемлемого аспекта всех ваших визуальных элементов, обеспечивая при этом беспрепятственный доступ всем вашим пользователям.

Подключенные анимации

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

 


API-интерфейсы платформы Windows UI предоставляют класс с именем ConnectedAnimationService для координации анимации между исходной страницей и целевой страницей во время навигации. Вы получаете доступ к сервису, вызывая статический метод GetForCurrentView. Затем на исходной странице вы вызываете PrepareToAnimate, передавая уникальный ключ и изображение, которое должно использоваться для анимации перехода.

 

ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("MyUniqueId", image);

 

На целевой странице вы извлекаете изображение из службы ConnectedAnimationService и вызываете TryStart в ConnectedAnimation при передаче в целевом UIElement.

 

var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("MyUniqueId");
if (animation != null)
{
    animation.TryStart(DestinationImage);
};

 

 

В Anniversary Update не было такого расширенного контроля над анимационной техникой. У каждого были лишь стандартные возможности. В Creators Update, у вас есть много новых улучшенных возможностей для персонализации переходов с помощью:

 

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

 

Скоординированные анимации

Скоординированная анимация - это вид анимации, который появляется рядом с вашей подключенной анимацией и который работает в координации с вашей подключенной целевой анимацией. Скоординированная анимация предоставляет дополнительную визуальную опцию  для перехода на страницу.

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

К счастью, координированные анимации также легко реализовать. Метод TryStart класса ConnectedAnimation обеспечивает переопределение, которое позволяет вам вставлять множество визуальных элементов, которые вы хотите оживить скоординированным образом. Предположим, что ваш текст субтитров находится в визуальном элементе, который вы назвали «DescriptionRoot». Вы можете добавить его как скоординированную анимацию, изменив предыдущий код следующим образом:

 

var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("MyUniqueId");
if (animation != null)
{
    animation.TryStart(DestinationImage, new UIElement[] { DescriptionRoot });
};

 

Пользовательские анимации

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

В Creators Update Вы можете использовать пользовательские анимации. Функция пользовательских анимаций позволяет вам модулировать ваши переходы четырьмя способами:

 

  • Crossfade – позволяет вам настроить элементы crossfade, как исходный элемент, которые достигает целевого объекта
  • OffsetX - позволяет настроить X-канал смещения
  • OffsetY - позволяет настроить Y-канал смещения
  • Scale – Позволяет настраивать масштаб элемента при его оживлении

 

Чтобы настроить определенную часть подключенной анимации, вам нужно будет создать анимацию ключевого кадра и добавить ее к переходу страницы с помощью вызова SetAnimationComponent следующим образом:

 

var animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("MyUniqueId");
 
var customXAnimation = Window.Compositor.CreateScalarKeyFrameAnimation();
customXAnimation.Duration = ConnectedAnimationService.GetForCurrentView().DefaultDuration;
customXAnimation.InsertExpressionKeyFrame(0.0f, "StartingValue");
customXAnimation.InsertExpressionKeyFrame(0.5f, "FinalValue + 25");
customXAnimation.InsertExpressionKeyFrame(1.0f, "FinalValue");
 
animation.SetAnimationComponent(ConnectedAnimationComponent.OffsetX, customXAnimation);

 

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

Замечательные анимации изображений

Creators Update также добавил улучшенную интерполяцию изображений для подключенных анимаций, где размер изображения и даже относительные размеры, изменяются между источником и местом назначения - например, переход от квадратого к прямоугольному изображению.


 

Эта интерполяция происходит автоматически, поэтому вам не о чем беспокоиться.

Поддержка скрытой анимации для наборов свойств и теней

Наконец, возможности анимации были также расширены в Creators Update, позволяя применять скрытые анимации к наборам свойств и теням.

 

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

 

var shadowBlurAnimation = compositor.CreateScalarKeyFrameAnimation();
shadowBlurAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
shadowBlurAnimation.Duration = TimeSpan.FromSeconds(1);
shadowBlurAnimation.Target = "BlurRadius";
 
//Associating animations with triggers 
implicitAnimationShadow["BlurRadius"] = shadowBlurAnimation;
implicitAnimationShadow["Opacity"] = shadowOpacityAnimation;
implicitAnimationShadow["Scale"] = shadowScaleAnimation;
 
implicitAnimationVisual["Translation"] = translationAnimation;
             
 
//Applying Implicit Animations to objects 
content.Properties.ImplicitAnimations = implicitAnimationVisual;
shadow.DropShadow.ImplicitAnimations = implicitAnimationShadow;

 

 

В завершении

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

Чтобы узнать больше о темах, затронутых в этой статье, рекомендуем перейти по ссылкам на следующие статьи и видео:

 

 



Exception: Object reference not set to an instance of an object.
Posted on 22. June 2017

Распостранение настольных приложений в Windows 10 S

Обзор

Windows 10 S - это особенная конфигурация Windows 10 Pro, которая предлагает хорошо знакомые, продуктивные возможности Windows, которые оптимизированы для обеспечения безопасности и производительности. Благодаря исключительно использованию приложений в Windows Store и обеспечению безопасного просмотра с помощью Microsoft EdgeWindows 10 S позволяет вам быстро и безопасно работать изо дня в день. Windows 10 S была вдохновлена ​​учениками и преподавателями, и это лучшая версия Windows для школ. Это также отличный выбор для любого пользователя Windows, который хочет получить стабильную производительность и повышенную безопасность. Ограничивая приложения теми, что есть в Windows StoreWindows 10 S идеально подходит для людей, у которых есть все, что нужно в Windows Store, и которые предпочитают спокойствие, которое устраняет риск загрузки приложений из других мест.

 

Что делать с вашим существующим приложением не из Store? Ответ - Desktop Bridge

С помощью Desktop Bridge вы можете легко упаковать текущее настольное приложение или игру в виде .appx, распространять через Windows Store и настраивать таргетинг на все настольные устройства Windows, включая Windows 10 S, чтобы увеличить охват пользователей и упростить монетизацию.

Вы можете упаковать любое настольное приложение, такое как: WPF, WinForms, MFC, VB6 и другие.

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

Теперь вы можете также модернизировать свое приложение с помощью Universal Windows Platform (UWP), чтобы увеличить охват пользователей на всех Windows устройства.

У Microsoft уже много пользователей, которые прошли этот процесс: Kodi, Slack, Evernote, Adobe Photoshop Elements 15 и многие другие.

 

Вот несколько пользователей, которые поделились своими историями:

 

  • MusiXmatch - крупнейшая в мире текстовая платформа с миллионами текстов, доступных онлайн, и более чем 50 миллионов пользователей на разных платформах
  • Tale of Wuxia (侠客风云传) - это традиционная настольная ролевая игра (RPG) Win32, созданная Heluo Studio
  • CLIP STUDIO PAINT - это ведущее программное обеспечение для рисования, которое поддерживает создание анимации и манги
Цитата из Evernote:

«Desktop Bridge значительно упрощает инсталлятор и деинсталлятор нашего [Evernote]. Он также обеспечивает доступ к UWP API, включая «Живые» плитки и уведомления. И наличие многофункционального приложения Evernote в Windows Store означает, что будущие улучшения будут быстрее доступны пользователям».

—Seth Hitchings, VP Engineering, Evernote

 

Что нужно делать дальше?

  1. Зарегистрируйтесь как разработчик приложения в Windows Dev Center
  2. Подготовьте пакет для вашего приложения
  3. Зарегистрируйтесь и приступайте к работе с помощью Desktop Bridge
  4. Упакуйте ваше настольное приложение как .appx
  5. Проверьте свое Windows приложение для Windows 10 S, вы также можете ознакомиться с более подробной информацией в этом блоге
  6. Отправьте ваше приложение в Windows Store

Ресурсы



Exception: Object reference not set to an instance of an object.
Posted on 18. June 2017

Использование цветных шрифтов для красивых текстов и иконок

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

Что такое цветные шрифты?

Цветные шрифты, также называемые «многоцветными шрифтами» или «хроматическими шрифтами» - это относительно новая технология шрифтов, которая позволяет дизайнерам шрифтов использовать несколько цветов в каждом символическом знаке. Цветные шрифты позволяют приложениям и веб-сайтам рисовать многоцветный текст с меньшим количеством кода и более надежной поддержкой операционных систем, чем специальные технологии, реализованные над текстовым стеком.

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

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

Один цветной шрифт, с которым вы, возможно, знакомы, является Segoe UI Emoji - шрифт по умолчанию, используемый в Windows для отображения emoji. Ниже вы можете увидеть пример глифа из Segoe UI Emoji, который отображается монохромно (слева) и в цвете (справа).

Зачем использовать цветные шрифты?

Теперь, когда вы знаете, что такое цветные шрифты, давайте поговорим о том, чем они могут быть полезны.

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

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

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

(Примечание: Начиная с обновления Windows 10 Creators Update, вы также можете достичь масштабируемой векторной иконографии, используя автономные SVG-изображения прямо в вашем XAML приложении. Дополнительные сведения см. В разделе «Иконопись вектора: использование изображений SVG в вашем приложении»).

Какие цветные шрифты поддерживаются Windows?

Спецификация OpenType определяет несколько способов вставки информации о цвете шрифта. Начиная с обновления Windows 10 Anniversary Update, Windows поддерживает все эти подходы. Ниже приведены различные подходы.

Цветные шрифты на основе вектора определяют формы глифов, используя математические кривые и линии. Они могут использовать традиционный синтаксис контура шрифта в сочетании с цветовой палитрой (через таблицы OpenType «COLR» и «CPAL»), или они могут использовать встроенные средства SVG (через таблицу OpenGype SVG). Эти форматы преуспевают в представлении большей части иконографии компактно, и в качестве векторов они обеспечивают бесконечную масштабируемость.

Цветные шрифты на основе растровых изображений определяют формы глифов с использованием встроенной растровой графики, например изображений PNG. Они могут использовать таблицы OpenType «CBDT» и «CBLC», или они могут использовать таблицу «sbix» OpenType. Такой подход позволяет легко контролировать каждый пиксель формы глифа и обеспечивать фотореалистичный контент, но дизайнеры должны обеспечивать несколько размеров изображений для высококачественного визуального масштабирования.

Использование цветных шрифтов

Цветные шрифты, как с точки зрения разработчика, так и с точки зрения пользователя, являются «просто шрифтами». Их можно установить и удалить из системы так же, как монохромные шрифты, они могут быть включены в ваш пакет приложения в качестве локального актива или они могут использоваться в качестве веб-шрифта на вашем веб-сайте.

В рамках XAML и Microsoft Edge вы можете создавать практически любой текст с цветным шрифтом так же, как обычный шрифт, и ваш текст будет отображаться в цвете по умолчанию. Однако, если ваше приложение работает на более низком уровне и вызывает API Direct2D (или API Win2D) для рендеринга его текста, тогда он должен явно запрашивать рендеринг цветового шрифта.

Использование цветных шрифтов

Цветные шрифты, как с точки зрения разработчика, так и с точки зрения пользователя, являются «просто шрифтами». Их можно установить и удалить из системы так же, как монохромные шрифты, они могут быть включены в ваш пакет приложения в качестве локального актива или они могут использоваться в качестве веб-шрифта на вашем веб-сайте.

В рамках XAML и Microsoft Edge вы можете создавать практически любой текст с цветным шрифтом так же, как обычный шрифт, и ваш текст будет отображаться в цвете по умолчанию. Однако, если ваше приложение работает на более низком уровне и вызывает API Direct2D (или API Win2D) для рендеринга его текста, тогда он должен явно запрашивать рендеринг цветового шрифта.

Использование цветных шрифтов в XAML

Текстовые элементы для платформы XAML (например, TextBlock, TextBox, RichEditBox и FontIcon) по умолчанию поддерживают цветные шрифты. Просто нарисуйте текст с помощью цветного шрифта, и стилизованный текст будет отображаться в цвете. В следующем примере кода показано, как модернизировать TextBlock с цветным шрифтом, который был упакован с вашими активами приложения. (Этот же метод применяется и к обычным шрифтам.)
Here is some text.
Применение цветного шрифта к XAML TextBlock

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

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

Использование цветных шрифтов в Direct2D

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

Если ваше приложение отображает текст с помощью API-интерфейсов DrawText и DrawTextLayout Direct2D, вы должны «выбрать» цветную визуализацию глифов. Для этого переместите флаг D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT в соответствующий метод рисования. В следующем примере кода показано, как вызвать метод DrawText Direct2D для визуализации строки в цветовом шрифте:

// If m_textFormat points to a font with color glyphs, then the following 
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be filled with m_defaultFillBrush.
m_deviceContext->DrawText(
    m_string->Data(),
    m_string->Length(),
    m_textFormat.Get(),
    m_layoutRect,
    m_defaultFillBrush.Get(),
    D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT
    );
Рисование многоцветного текста с помощью метода Direct2D DrawText

Использование цветных шрифтов в Win2D

Как и Direct2D, API-интерфейсы рисования Win2D не отображают цветные глифы по умолчанию.

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

// The text format that will be used to draw the text. (Declared elsewhere
// and initialized elsewhere by the app to point to a color font.)
CanvasTextFormat m_textFormat;
 
// Set the EnableColorFont option.
m_textFormat.Options = CanvasDrawTextOptions.EnableColorFont;
 
// If m_textFormat points to a font with color glyphs, then the following 
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be filled with m_color.
drawingSession.DrawText(
    m_string,
    m_point,
    m_color,
    m_textFormat
    );
Рисование многоцветного текста с помощью метода Win2D DrawText

Построение цветных шрифтов OpenType SVG

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

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



Это приложение позволяет вам использовать существующий шрифт и добавлять цвет, встраивая собственные изображения SVG для каждого глифа, используя простой интерфейс перетаскивания. SVG - популярный формат векторного искусства, поддерживаемый такими инструментами, как Adobe Illustrator и Inkscape. На платформах, поддерживающих шрифты OpenType SVG (например, приложения Windows, Edge и Firefox), отображаются глифы цвета. Другие платформы автоматически возвращаются к монохроматическим символам. Для получения дополнительной информации см. cтраницу GitHub для редактора шрифтов OpenType SVG.

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

Вывод

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



Exception: Object reference not set to an instance of an object.
Posted on 1. June 2017

Windows Template Studio

Windows Template Studio - это расширение Visual Studio 2017, которое ускоряет создание новых приложений для универсальной платформы Windows (UWP), используя опыт на основе мастера. Итоговый проект UWP представляет собой хорошо сформированный читабельный код, который включает в себя новейшие функции Windows 10, а также проверенные образцы и лучшую практику. Разбросанные по всему сгенерированному коду ссылки включают в себя Docs, Stack Overflow и блоги с полезной информацией.

Пример сценария: мне нужно приложение, которое использует MVVM, использует основные детали, может приостанавливаться и возобновляться, имеет настройки, карты на одной из страниц и получает Azure hub уведомления. Для этого потребуется фоновая служба, которая выполняет запрос каждые 5 минут ...

Выберите тип и структуру проекта:

Выберите страницы и функции вашего приложения:

 

 

Вы готовы! Создайте свой шаблон проекта и запустите его.

Для получения дополнительной информации ознакомьтесь с repo README!



Exception: Object reference not set to an instance of an object.
Posted on 18. May 2017

Announcing Project Rome iOS SDK

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

Раньше это означало переход между устройствами при сохранении одного пользовательского интерфейса на другом устройстве Windows. Несколько месяцев назад функции Project Rome были расширены на платформу Android, что позволяет вам начать сеанс пользования приложением на телефоне Android и продолжить его на ПК с операционной системой Windows, на Xbox One или даже в Surface Hub.

На сегодняшний день, поддержка Project Rome также доступна для платформы iOS. Здесь вы можете скачать Project Rome SDK для iOS.


Рассмотрение музыкального приложения Contoso

Пример Contoso Music хорошо показывает сценарии работы пользователя с приложением на разных устройствах.

Это приложение для потоковой передачи музыки UWP, которое работает на нескольких устройствах Windows, привязанных к одной и той же учетной записи Microsoft (MSA). Используя Project Rome, приложение работает таким образом, чтобы пользователь, передающий песню на ПК с ОС Windows, мог передать эту песню на свой Xbox. После этого, он всегда может переместить текущий плейлист на свой Windows Phone перед тем, как выйти на пробежку.

Расширение для iOS

Представим себе, что, основываясь на успехе версий Windows и Android, разработчик создает iOS-версию Contoso Music. Изучая его телеметрию через несколько месяцев, видим, что все приложения успешны также, как и его версии для Windows и Android. Однако в отзывах пользователей есть общая тема: Пользователи затрудняются с переключением между устройствами. Итак, планируем добавить такую возможность, чтобы пользователь могу слушать музыку на iPhone через наушники, а затем войти в гостиную и незамедлительно переключиться на воспроизведение той же музыкальной композиции через свой Xbox, подключенный к качественным динамикам.

С Project Rome iOS SDK мы можем создать мост между устройствами iOS и устройствами Windows в два этапа:

 

  • RemoteSystems API позволяет приложению обнаруживать устройства Windows, которыми владеет пользователь. RemoteSystems API позволит приложению Contoso Music обнаруживать эти устройства в той же сети или через облако.
  • После обнаружения устройств, RemoteLauncher API  запустит приложение Contoso Music на другом устройстве Windows.

 

Как это работает?

Чтобы переключиться с воспроизведения музыки с устройства iOS на устройство Windows, приложение должно распознать другое устройство. Для этого требуется использование MSA OAuth, чтобы получить разрешение на запрос для устройств, а затем обнаруживать дополнительные устройства, как показано на диаграмме ниже.


 

 

 

// Asynchronously initialize the Rome Platform.
  // Pass in self as class implements the CDOAuthCodeProviderDelegate protocol.
  [CDPlatform startWithOAuthCodeProviderDelegate:self completion:^(NSError* clientError) {
                                              if (clientError)
                                              {
                                                  // Handle error
                                                  return;
                                              }
 
                                              // Handle success, show discovery screen
                                      }];
 
// Implementation of CDOAuthCodeProviderDelegate
// The Rome SDK calls this delegate method when it needs an OAuth Access Code from the application.
- (NSError*)getAccessCode:(NSString*)signinUrl completion: (void (^)(NSError* error, NSString* accessCode))completion {
 
// Stash away the callback the SDK gives us
_getTokenCallback = completion;
 
  // Show the interactive OAuth Web View flow.
  // Once the OAuth flow completes or fails, invoke this callback.
  ...
 
// Return nil as there was no error
  return nil;
}

 

 

После инициализации, приложение может распознавать все устройства на графике устройства пользователя MSA, инициировав распознание с помощью CDRemoteSystemDiscoveryManager. Информация об обнаруженных устройствах создается через протокол CDRemoteSystemDiscoveryManagerDelegate. В примере Microsoft каждое обнаруженное устройство сохраняется в свойстве NSMutableArray.

 

// Create instance and pass ‘self’ as the delegate as it implements CDRemoteSystemDiscoveryManagerDelegate.
CDRemoteSystemDiscoveryManager* remoteSystemDiscoveryManager = [[CDRemoteSystemDiscoveryManager alloc] initWithDelegate:self];
 
// Start discovery.
[remoteSystemDiscoveryManager startDiscovery];
 
// CDRemoteSystemDiscoveryManagerDelegate implementation
- (void)remoteSystemDiscoveryManager:
            (CDRemoteSystemDiscoveryManager*)discoveryManager
                             didFind:(CDRemoteSystem*)remoteSystem {
  @synchronized(self) {
     [self.discoveredSystems addObject:remoteSystem];
      // Refresh UI based upon updated state in discoveredSystems e.g. populate table
   }
}
 
- (void)remoteSystemDiscoveryManager:
            (CDRemoteSystemDiscoveryManager*)discoveryManager
                           didUpdate:(CDRemoteSystem*)remoteSystem {
  NSString* id = remoteSystem.id;
 
// Loop through and update the Remote System instance if previously seen.
  @synchronized(self) {
    for (unsigned i = 0; i < self.discoveredSystems.count; i++) {
      CDRemoteSystem* currentRemoteSystem =
          [self.discoveredSystems objectAtIndex:i];
      NSString* currentId = currentRemoteSystem.id;
 
      if ([currentId isEqualToString:id]) {
        [self.discoveredSystems replaceObjectAtIndex:i withObject:remoteSystem];
        break;
      }
    }
 
       // Refresh UI based upon updated state in discoveredSystems e.g. populate table
  }
}

 

 

Теперь пользователь может выбрать устройство, на которое он хочет перенести проигрывание музыки, из списка обнаруженных устройств. Из выбранной CDRemoteSystem образец создания CDRemoteSystemConnectionRequest показан на диаграмме последовательности ниже. Используя CDRemoteLauncher, можно удаленно запускать приложение на выбранном устройстве, а также добавлять необходимую дополнительную контекстуальную информацию, такую как воспроизводимая в данный момент песня.

 

 

Здесь вы можете ознакомиться с тем, как дистанционно запустить http://www.bing.com  на вашем устройстве:

 

// Create a connection request using the CDRemoteSystem instance selected by the user
  CDRemoteSystemConnectionRequest* request =
       // Using the RemoteSystem above, [self.discoveredSystems addObject:remoteSystem];
      [[CDRemoteSystemConnectionRequest alloc] initWithRemoteSystem:system];
 
NSString* url = @”http://www.bing.com”;
 
  [CDRemoteLauncher
           launchUri:uri
           withRequest:request
           withCompletion:^(CDRemoteLauncherUriStatus status) {
            // Update UI on launch status
            }];

 

 

Как видите достаточно легко расширить поддержку кросс-устройств для iOS в своем приложении.

В Завершении

Project Rome разрушает барьеры, изменяя представления о том, что такое «приложение», и фокусируясь на пользователе независимо от того, где он находится или какое устроство использует. Теперь приложение не обязательно должно означать что-то, что привязано к одному устройству, вместо этого оно может быть чем-то, что существует между вашими устройствами и оптимизировано для нужного устройства в нужное время.

Чтобы узнать больше о Project Rome, ознакомьтесь с предоставленными ниже ссылками.

 

 

 



Exception: Object reference not set to an instance of an object.
Posted on 28. March 2017

Microsoft Store Services SDK запускают межстраничные баннера

Microsoft анонсировала поддержку межстраничных баннеров в Microsoft Store Services SDK. Межстраничные баннерные объявления стали одним из лучших запросов функциональных возможностей центра разработки для Windows, после того, как мы ввели поддержку межстраничных видеообъявлений.
Что такое межстраничные баннеры?
Межстраничные баннеры - очень популярный способ монетизации приложений и игр, поскольку они предлагают более высокие эффективные цены за тысячу показов, чем стандартные баннерные объявления. Они могут зарабатывать до 8-10 раз больше стандартных баннеров по следующим причинам:

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

Пример межстраничного объявления для мобильных устройств

 

Пример межстраничного объявления для планшетных/ ПК устройств

Этот новый формат объявлений доступен в последней версии Microsoft Store Services SDK для приложений универсальной платформы Windows (UWP) для Windows 10.
Если Вы еще не начали монетизировать свое приложение или игру с объявлениями с помощью Microsoft Store Services SDK, сейчас подходящее время начать. Cотрудники Microsoft подобрали несколько рекламных сетей, чтобы межстраничные баннерные объявления могли приносить хороший доход разработчикам, и также продолжают работу с большим количеством сетей, чтобы увеличить возможности заработка этого и других форматов рекламы. Чтобы узнать больше о вариантах добавления объявлений в Ваши приложения с помощью данного SDK, ознакомтесь с этой статьей.

Как начать?
Поскольку сейчас проходит бета-тестирование, пожалуйста, пишите по адресу aiacare@microsoft.com  ,чтобы отправить свое приложение или игру в бета-версию. После того, как будет созданный межстраничный рекламный блок, вы можете продолжить используя следующие шаги, чтобы включить его в свое приложение или игру.

Чтобы добавить межстраничное объявление в свою игру или приложение, используйте класс InterstitialAd из Microsoft Store Services SDK. Если вы уже знакомы с инструкциями по добавлению межстраничных видеообъявлений в игру или приложение, процесс добавления межстраничных баннерных объявлений будет практически идентичным. Единственное различие состоит в том, что при вызове метода RequestAd для извлечения объявления вы указываете тип AdType.Display для типа объявления (это новое значение перечисления в последней версии SDK).

 

using Microsoft.Advertising.WinRT.UI;
…
…
// declare the object and set your app parameters
InterstitialAd myInterstitialAd = null;
string myAppId = "d25517cb-12d4-4699-8bdc-52040c712cab";
string myAdUnitId = "11389925";
…
…
// instantiate the Ad
myInterstitialAd = new InterstitialAd();
myInterstitialAd.AdReady += MyInterstitialAd_AdReady;
myInterstitialAd.ErrorOccurred += MyInterstitialAd_ErrorOccurred;
myInterstitialAd.Completed += MyInterstitialAd_Completed;
myInterstitialAd.Cancelled += MyInterstitialAd_Cancelled;
…
…
// request for the ad a few seconds before you intend to display
myInterstitialAd.RequestAd(AdType.Display, myAppId, myAdUnitId);
…
…
// display the ad
if (InterstitialAdState.Ready == myInterstitialAd.State)
{
    myInterstitialAd.Show();
}
…
…

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

Какие практические методы наиболее эффективны?

Из-за большего размера межстраничные баннеры требуют больше пропускной способности на пользовательских устройствах, чем стандартные баннерные объявления. Для этого необходимо использовать метод RequestAd для получения межстраничного баннерного объявления за 3-4 секунды до его отображения. Чтобы максимально использовать межстраничные объявления в ваших играх или приложениях, ознакомьтесь с руководящими принципами межстраничных объявлений.



Exception: Object reference not set to an instance of an object.
Posted on 11. February 2017

Новое руководство дизайна UWP приложений от Microsoft

В просторах интернета уже несколько месяц витает слух о новых рекомендациях Майкрософт в дизайне UWP приложений. И вот первая публичная информация о новом направлениии в дизайне появилась в время мероприятия Windows Dev Day 8го февраля. По задумке экспертов Майкрософт новые рекомендации дизайна упростят создание более естественных(используя инструменты Ink и  Dial) и привлекательных интерфейсов UWP приложений.

Отдельно хочу отметить следующие улучшение:

  • более гибка возможность анимации переходов в UWP приложениях
  • использование более широкого спектра возможных визуальных эффектов
  • поддержка SVG формата и др.

Детально о нововведениях в обновлении Creator Update рассказывает Harneet Sidhana



Exception: Object reference not set to an instance of an object.
Posted on 10. February 2017

Windows SDK для Google Analytics

Google Analytics является одной из наиболее популярных аналитических решений для веб-сайтов и мобильных приложений. Google Analytics широко используется для отслеживания пользовательских сеансов, переходов в приложении, событий, сбоев, социальных взаимодействий и рекламных кампаний на Android и IOS.

И сегодня Google Analytics SDK запускается для Windows Store (UWP) приложений, предоставляя простой способ для разработчиков Windows 10 получить доступ к этим ценным услугам. SDK может быть интегрирован в ваши приложения с помощью пакета NuGet. Его источник размещен на GitHub.

Существует C# SDK, который может использоваться как для универсальных Windows Store приложений, так и для настольных приложений, а также есть C++ WinRT компонент для разработчиков, ориентированных на UWP приложения, написанные на C ++ или JavaScript. Оба из них, C# SDK и компонент C ++ WinRT, используют одинаковые API, таким образом используется единых подход в разработке.

SDK построен на основе  протокола передачи статических данных Google сервиса, который позволяет разработчикам отправлять данные к серверам Google Analytics через HTTP-запросы. API-интерфейсы Windows SDK для Google Analytics созданы по образцу имен классов и шаблонов проектирования от компании Google Android SDK, чтобы максимально обеспечить портативность и читабельность для тех, кто уже знаком с Google Analytics на других платформах.

Начать работу

Если Вы предпочитаете видео формат, это "Начало работы с Windows SDK для Google Analytics" наглядно показывает каждый шаг ниже.

Если Вы предпочитаете письменную форму, здесь показано как добавить Windows SDK для Google Analytics в проект:

 

  •  И наконец, добавьте свой код для отслеживания событий.


Exception: Object reference not set to an instance of an object.
Posted on 9. February 2017

Анонс проекта Rome для Android

Ранее уже писал о проекте Rome, который позволяет улучшить взаимодействие пользователей с одним приложением на разных устройствах платформы Windows.

Первая версия проекта Rome для удаленного запуска приложений и удаленных сервисов приложения появилась в Windows 10 Anniversary Update.

Project Rome для Android 

 

Project Rome for Android

 

Сегодня компания Microsoft анонсировала выход Android версии проекта Rome. Эта версия SDK работает с Java и Xamarin.

Примеры приложений можно скачать с GitHub'а данного решения. Видео с демонстрацией работы проекта Rome на устройстве с Android:

 

Скачать пример на Java

Скачать пример на Xamarin



Exception: Object reference not set to an instance of an object.
Posted on 8. February 2017

UWP компоненты Telerik на Github

Telerik объявила о том, что контролы для универсальной платформы Windows становится с открытым исходным кодом и они доступны на GitHub. Опубликованное решение представляет собой набор из более 20-ти элементов управления UI для разработчиков UWP приложений. Оно включает в себя различные элементы управления для множества приложений. Одними из наиболее популярных элементов управления в пользовательском интерфейсе UWP являются Cетка(grid), Диаграмма, DataForm и ListView, которые используются в большинстве бизнес-приложений.


С увеличивающимся интересом к Windows 10, это было вполне логично, что мы расширяем наше портфолио компонентов UI для UWP. Телерик UI для универсальной платформы Windows уже расширил возможости многих приложения в Windows Store. В действительности, сегодня Телерик UI является наиболее популярной UI библиотекой среди всех приложений в Windows Store. Таким образом, эти виджеты уже были проверены и испытаны в реальном мире ™


Полный список доступных элементов управления пакета Telerik.

Telerik UI для UWP репозиторий на GitHub.



Exception: Object reference not set to an instance of an object.