Posted on 25. July 2017

Windows Template Studio 1.2

Выпуск Windows Template Studio 1.2.

Что делает этот выпуск особенным? - Microsoft были приняты в .NET Foundation

Основная задача этого выпуска - это добавление контента в существующее приложение с помощью  щелчка правой кнопкой мыши. Сочетание File->New уже в прошлом 🙂

Что нового: 

Полный список настроек в версии 1.2, перейдите на WTS Github.

 


Улучшения Wizard:

 

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

 

Обновления функций:

  • Сбой при первом запуске
  • Что нового
Улучшения шаблонов:

  • Обновленные ссылки на UWP Community Toolkit 1.5
  • Регулировка стиля
  • Улучшения последействия в шаблонах
Улучшения процесса:

  • Добавлено в шаблон запроса
  • Добавлено в шаблон выпуска

 

Как получить обновление:

Есть два способа для обновления к новому выпуску:

 

  • Уже установлено: Visual Studio должна автоматически обновлять расширение. Чтобы принудительно выполнить обновление, откройте Tools --> Extensions and Updates. Затем перейдите в "Update expander" слева, и там Вы увидите Windows Template Studio --> нажмите «Обновить»
  • Не установлено: откройте https://aka.ms/wtsinstall, нажмите «загрузить» и дважды щелкните на VSIX установщик.

 

Что еще готовится для следующих версий?

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

  • Подвижный дизайн в шаблонах
  • Функции Project Rome, как инстументы для Вашего проекта
  • Шаблоны для инстумента Ink
  • Улучшенное сочетание Right-click-> добавление поддержки для существующих проектов
  • Wizard локализация
  • Поддержка обширной доступности как в Wizard, так и в шаблонах
  • Поддержка Visual Basic
В партнерстве с сообществом .NET Foundation, Microsoft продолжает работать над улучшениями функционала и его продуктивности. Если Вы заинтересованны в том, чтобы сделать Ваш вклад, отправляйте Ваши идеи на GitHub по адресу https://aka.ms/wts

.NET Foundation:

Сотрудничество с .NET Foundation - большой прорыв для Microsoft. Такие новые великолепные проекты с открытым исходным кодом, как .NET Core, Roslyn и UWP Community Toolkit, - это только начало! Теперь, с выпуском Windows Template Studio, их станет намного больше!


Posted on 24. July 2017

Новые освещения и PropertySet Interop – XAML и Visual Layer Interop

В предыдушем посте команда пользовательского интерфейса Windows изучала XamlCompositionBrushBase и LoadedImageSurface, чтобы создать пользовательские CompositionBrushes, с помощью которых можно рисовать XAML элементы прямо в Вашей разметке. Сегодня, мы ознакомим Вас с новыми улучшениями, добавленными в XAML и Visual Layer Interop API в Windows 10 Creators Update.

 

В этом посте мы рассмотрим некоторые из этих улучшений Creators Update, а именно новые API:

В Части 1:

 

  • XamlCompositionBrushBase – удобное и простое рисование XAML UIElement с CompositionBrush
  • LoadedImageSurface – легкая загрузка изображений и их использование с помощь Composition API

 

В Части 2: 

 

  • XamlLights – применение освещений в Вашем пользовательском интерфейсе XAML с помощью всего лишь одной строки XAML
  • PointerPositionPropertySet – создание 60 FPS анимаций, используя позицию указателя, из потока пользовательского интерфейса!
  • Включение свойств перевода - оживление элемента пользовательского интерфейса XAML с помощью Composition анимаций

 

Если Вы хотите ознакомиться с ранее доступными API ElementCompositionPreview, например, работа с «ручными» и «раздаточными» визуальными средствами, Вы можете изучить это здесь.

Осветление интерфейса с XamlLights

Новая великолепная функция в Creators Update - это возможность устанавливать и использовать эффект освещения прямо в XAML с помощью абстрактного класса XamlLight.

Создание XamlLight начинается так же, как и XamlCompositionBrushBase, с помощью метода OnConnected и OnDisconnected (см. Часть 1), но на этой раз источником будет подкласс XamlLight, чтобы создать Ваше собственное уникальное освещение, которое можно использовать прямо в XAML. Microsoft использует это с Reveal эффектом, которые доступен в Creators Update.

Чтобы показать эту возможность в работе, Microsoft разработали демоверсию для создания анимированных GIF, которые показаны выше. Данная демоверсия объединяет все, что Вы уже знаете о XamlCompositionBrushBase и LoadedImageSurface, с добавлением двух XamlLights: HoverLight и AmbientLight.

Начнем с создания AmbientLight: аналогично XamlCompositionBrushBase с помощью метода OnConnected и OnDisconnected. Однако для XamlLight установка свойства CompositionLight подкласса XamlLight.

public class AmbLight : XamlLight
{
    protected override void OnConnected(UIElement newElement)
    {
        Compositor compositor = Window.Current.Compositor;

        // Create AmbientLight and set its properties
        AmbientLight ambientLight = compositor.CreateAmbientLight();
        ambientLight.Color = Colors.White;

        // Associate CompositionLight with XamlLight
        CompositionLight = ambientLight;

        // Add UIElement to the Light's Targets
        AmbLight.AddTargetElement(GetId(), newElement);
    }

    protected override void OnDisconnected(UIElement oldElement)
    {
        // Dispose Light when it is removed from the tree
        AmbLight.RemoveTargetElement(GetId(), oldElement);
        CompositionLight.Dispose();
    }

    protected override string GetId() => typeof(AmbLight).FullName;
}

Охватывающее освещение готово, давайте построим SpotLight XamlLight. Одна из главных задач SpotLight - это следование за указателями пользователя. Для этого можно использовать метод GetPointerPositionPropertySet для ElementCompositionPreview для получения CompositionPropertySet, который можно использовать с помощью Composition ExpressionAnimation (PointerPositionPropertySet более подробно описан в разделе PropertySets ниже).

Вот законченная реализация XamlLight, которая создает это анимированное освещение. Ознакомьтесь с комментариями к коду, чтобы увидеть основные части эффектов, такие как положение покоя и анимированная позиция смещения для создания освещения.

public class HoverLight : XamlLight 
{
    private ExpressionAnimation _lightPositionExpression;
    private Vector3KeyFrameAnimation _offsetAnimation;

    protected override void OnConnected(UIElement targetElement)
    {
        Compositor compositor = Window.Current.Compositor;

        // Create SpotLight and set its properties
        SpotLight spotLight = compositor.CreateSpotLight();
        spotLight.InnerConeAngleInDegrees = 50f;
        spotLight.InnerConeColor = Colors.FloralWhite;
        spotLight.OuterConeAngleInDegrees = 0f;
        spotLight.ConstantAttenuation = 1f;
        spotLight.LinearAttenuation = 0.253f;
        spotLight.QuadraticAttenuation = 0.58f;

        // Associate CompositionLight with XamlLight
        this.CompositionLight = spotLight;

        // Define resting position Animation
        Vector3 restingPosition = new Vector3(200, 200, 400);
        CubicBezierEasingFunction cbEasing = compositor.CreateCubicBezierEasingFunction( new Vector2(0.3f, 0.7f), new Vector2(0.9f, 0.5f));
        _offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
        _offsetAnimation.InsertKeyFrame(1, restingPosition, cbEasing);
        _offsetAnimation.Duration = TimeSpan.FromSeconds(0.5f);

        spotLight.Offset = restingPosition;

        // Define expression animation that relates light's offset to pointer position 
        CompositionPropertySet hoverPosition = ElementCompositionPreview.GetPointerPositionPropertySet(targetElement);
        _lightPositionExpression = compositor.CreateExpressionAnimation("Vector3(hover.Position.X, hover.Position.Y, height)");
        _lightPositionExpression.SetReferenceParameter("hover", hoverPosition);
        _lightPositionExpression.SetScalarParameter("height", 15.0f);

        // Configure pointer entered/ exited events
        targetElement.PointerMoved += TargetElement_PointerMoved;
        targetElement.PointerExited += TargetElement_PointerExited;

        // Add UIElement to the Light's Targets
        HoverLight.AddTargetElement(GetId(), targetElement);
    }

    private void MoveToRestingPosition()
    {
        // Start animation on SpotLight's Offset 
        CompositionLight?.StartAnimation("Offset", _offsetAnimation);
    }

    private void TargetElement_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        if (CompositionLight == null) return;

        // touch input is still UI thread-bound as of the Creators Update
        if (e.Pointer.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Touch)
        {
            Vector2 offset = e.GetCurrentPoint((UIElement)sender).Position.ToVector2();
            (CompositionLight as SpotLight).Offset = new Vector3(offset.X, offset.Y, 15);
        }
        else
        {
            // Get the pointer's current position from the property and bind the SpotLight's X-Y Offset
            CompositionLight.StartAnimation("Offset", _lightPositionExpression);
        }
    }

    private void TargetElement_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        // Move to resting state when pointer leaves targeted UIElement
        MoveToRestingPosition();
    }

    protected override void OnDisconnected(UIElement oldElement)
    {
        // Dispose Light and Composition resources when it is removed from the tree
        HoverLight.RemoveTargetElement(GetId(), oldElement);
        CompositionLight.Dispose();
        _lightPositionExpression.Dispose();
        _offsetAnimation.Dispose();
    }

    protected override string GetId() => typeof(HoverLight).FullName;
}

Теперь, с помощью HoverLight класса, можно добавить оба AmbLight и HoverLight к предыдущему ImageEffectBrush (смотрите ImageEffectBrush в этом посте):
          

            
                
            
  
            
                
                
            



Примечание: Для добавления XamlLight в разметку, Ваша минимальная SDK-версия должна быть установлена в Creators Update, или же Вы можете установить ее в коде после.
Для получения дополнительной информации об использовании XamlLight перейдите сюда; Вы можете изучить документацию Lighting здесь.

Использование CompositionPropertySets

Если Вы хотите использовать преимущества ScrollViewer Offset или Pointer положения X и Y (например, курсор мыши) для выполнения таких действий, как эффекты анимации, Вы можете использовать ElementCompositionPreview для извлечения PropertySets. Это позволяет создавать удивительно бесперебойные 60 FPS анимации, которые не привязаны к потоку пользовательского интерфейса. Эти методы позволяют вам получать преимущества пользовательского взаимодействия для создания анимаций и освещения.

Использование ScrollViewerManipulationPropertySet

Этот PropertySet полезен для анимации таких объектов, как Parallax, Translation и Opacity.

// Gets the manipulation 
CompositionPropertySet scrollViewerManipulationPropertySet = 
    ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MyScrollViewer);

Чтобы ознакомиться с примером, перейдите к посту о Smooth Interaction и Motion, раздел, посвященный использованию ScrollViewerManipulationPropertySet для управления анимацией.

Использование Нового PointerPositionPropertySet

PointerPositionPropertySet - это новая возможность, добавленная в Creators Update. Этот PropertySet полезен для создания анимаций для освещения и наклона. Также как и ScrollViewerManipulationPropertySet, PointerPositionPropertySet обеспечивает быструю, бесперебойную и зависящую от потока анимацию.

Отличный пример - это механизм анимации Fluent Design RevealBrush, где Вы можете увидить эффекты освещения по бокам UIElements. Этот эффект создается CompositionLight, который имеет свойство Offset, анимированное с помощью ExpressionAnimation, используя значения, полученные из PointerPositionPropertySet.

// Useful for creating an ExpressionAnimation
CompositionPropertySet pointerPositionPropertySet = ElementCompositionPreview.GetPointerPositionPropertySet(targetElement);
ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("Vector3(param.Position.X, param.Position.Y, height)");
expressionAnimation.SetReferenceParameter("param", pointerPositionPropertySet);

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

Включение свойства перевода - анимация смещения элемента XAML с использованием анимации композиции

Как уже известно, совместное использование ресурсов между Framework Layer и Visual Layer было достаточно сложным до выпуска Creators Update. Данные визуальные свойства разделяются между UIElements и их Visuals поддержкой:

  • Offset
  • Scale
  • Opacity
  • TransformMatrix
  • InsetClip
  • CompositeMode

До выпуска Creators Update, Scale и Offset были особенно сложными, потому что, как упоминалось ранее, UIElement не знал об изменениях значений свойств на hand-out Visual, даже несмотря на то, что hand-out Visual знал об изменениях в UIElement. Следовательно, если Вы изменяли значение свойства смещения или размера Visual Offset, позиция UIElement также изменялась из-за размера страницы, но все предыдущие значения позиции UIElement следовали всем Вашим визуальным значениям.

С выпуском Creators Update это стало намного легче, поскольку теперь Вы можете предотвратить масштабирование Scale и Offset, добавив новое свойство Translation в Ваш элемент посредством объекта ElementCompositionPreview.

ElementCompositionPreview.SetIsTranslationEnabled(Rectangle1, true);

//Now initialize the value of Translation in the PropertySet to zero for first use to avoid timing issues. This ensures that the property is ready for use immediately.

var rect1VisualPropertySet = ElementCompositionPreview.GetElementVisual(Rectangle1).Properties;
rect1VisualPropertySet.InsertVector3("Translation", Vector3.Zero);

Затем анимируйте визуальную функцию Translation, где ранее Вы анимировали свойство Offset.

// Old way, subject to property stomping:
visual.StartAnimation("Offset.Y", animation);
// New way, available in the Creators Update
visual.StartAnimation("Translation.Y", animation);
Анимируя другое свойство из того, которое было затронуто во время пропусков макета, Вы избегаете нежелательного смещения, исходящего из XAML.

В завершении

В прошлых постах были рассмотрены некоторые новые функции XAML и Composition Interop, а также упрощенные основы использования Composition функций в Вашей XAML разметке.  Начиная от рисования Ваших UIElements с помощью CompositionBrushes и применения подсветки, чтобы выровнять анимацию UIThread. Теперь Composition API становится более доступной, чем когда-либо.
В следующем посте мы расскажем о создании удивительных Composition эффектов и об эволюции Fluent Design.





Posted on 20. July 2017

Вызов WinRT Components из процесса Win32 с помощью Desktop Bridge

В этом посте рассмотрим возможность Desktop Bridge: в частности, о перемещение бизнесс-логики на Windows Runtime Components, также известные как WinRT Components. Раньше Windows поддерживала только вызываемую ОС, обусловленную WinRT компонентами из Win32 приложений. Любая попытка вызвать пользовательские (так называемые сторонние) WinRT компоненты не выполнялась, потому что приложение Win32 не имеет идентификатора пакета и, следовательно, не было способа зарегистрировать компонент с системой во время установки или каким-либо образом найти подходящий компонент для выполнения.

Эти ограничения были устранены, так как приложения Win32 на Desktop Bridge могут быть индивидуальны и зарегистрированы в ОС, включая любые Windows Runtime Components, входящие в состав пакета. В Windows 10 Fall Creators Update, Desktop Bridge поддерживает эту функциональность, включая поддержку как для In-Process Servers, так и Out-Of-Process Servers.

Обмен кодами - Чем WinRT Components лучше других параметров

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

 

  • DLL - для сценариев, требующих производительности proc кода и не требующих межязыковой совместимости
  • WinRT Components – для межъязыковой совместимости или поддержки внепроцессной активации для надежности
  • .Net library – для сценариев, которые работают в proc, и всех клиентов, управляемыми разработчиками, включая PCL или .Net Standard libraries

 

Создание нового или движущегося кода в Windows Runtime Component позволяет повторно использовать код между процессами AppContainer и Win32 в одном пакете. В то время как вы повторно используете существующие библиотеки DLL в вашем процессе AppContainer, вызывая LoadPackageLibrary, переходя к Windows Runtime Component, вы получаете доступ к повторному использованию из-за лучшей совместимости языков (Native C / C ++, управляемый код с C # & VB и Javascript), а также интеграцию Visual Studio через Все ваши проекты. Кроме того, компоненты WinRT поддерживают модель активации вне процесса, которая обеспечивает надежность для вашего приложения.

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

Поскольку приложения на Desktop Bridge имеют манифест, записи регистрации для WinRT Component такие же, как и для UWP приложения, с использованием расширений InProcessServer и OutOfProcessServer. Эти расширения регистрируют ActivatableClassId и его бинарную реализацию с вашим пакетом, поэтому, когда ваше приложение пытается активировать класс, система может его найти.

In-Process Servers

Эта функция позволяет разработчикам легко обмениваться кодами между Win32 и UWP приложениями, запущенными в AppContainer, которые могут быть загружены через In-Proc. Компонент построен таким образом, к примеру: Создайте новый проект WinRT Component в VS и его регистрация в манифесте будет точно такой же, как и для внутренних серверов UWP. Поскольку не требуется никакого изменения схемы манифеста, разработчики могут использовать существующие наборы инструментов в VS2015 или VS2017 для сборки In-Proc серверов, но это может быть выполнено только на устройстве с обновлением Fall Creators Update.
Ниже приведен пример регистрации в процессе для C++ WinRT Component, где CPPSimpleMathWinRT.dll является родной реализацией класса SimpleMath.


  
    CPPSimpleMathWinRT.dll
    
  

Ниже вы увидите простой пример Winforms Calculator, который использует C++ WinRT Component для его математического движка.

Как это выглядит во время выполнения:

 

Пример с C++/CX WinRT Component: https://github.com/Microsoft/DesktopBridgeToUWP-Samples/tree/master/Samples/WinFormsWinRTComponent 

Пример с C# WinRT Component: https://github.com/Microsoft/DesktopBridgeToUWP-Samples/tree/master/Samples/WinformsManagedWinRTComponent

 

Out-Of-Process servers

Регистрация OOP-сервера для приложения с использованием расширений Desktop Bridge очень знакома разработчикам, которые ранее регистрировали серверы в UWP. Тем не менее, есть нюансы и ограничения, о которых нужно знать. Так как OOP серверы позволяют вам обмениваться кодами между процессами Win32 и AppContainer, существуют ограничения для совместного использования данных между клиентами - это отражается на модели сервера.  Все зависит от потребностей вашего приложения в отношении того, какую модель стимулирования вы должны использовать.

Инстинктивное поведение сервера определяется требованиями символического процесса, независимо от того, вызывается ли процесс NTCompareToken () и работает ли экземпляр сервера правильно. Если они совпадают, то используется существующий экземпляр сервера. Если они разные, то запускается новый экземпляр сервера.

Одно из ключевых требований - идентификация приложения. Приложения в UWP определены в манифесте, а в большинстве UWP приложений, опубликованных в Windows Store, существует только одно приложение. Но на Desktop Bridge у вас может быть несколько. Еще одним ключевым требованием является уровень доверия вызывающего процесса. На Desktop Bridge, пакет объявлен с возможностью runFullTrust, , который позволяет одному или нескольким приложениям быть объявлеными с  FullTrust entrypoint, EntryPoint=”Windows.FullTrustApplication”. Приложения, использующие FullTrust entrypoint, могут вызывать любой API, который им нужен. Обычно это основной исполняемый файл Win32 / .Net. 

Microsoft ссылаются на эти приложения как на приложения FullTrust.

Если у вас нет этой точки входа, приложение работает на более низком уровне доверия, называемом Base Trust, и имеет дополнительные ограничения в изолированной среде под названием AppContainer, что характерно для приложения при создании приложения UWP в Visual Studio. Эти разные уровни доверия приводят к различным требованиям к признакам процесса, и в результате - к другому экземпляру сервера. Эта модель называется ActivateAsActivator или AAA. Ниже приведен пример этой регистрации, и вы заметите, что это то же самое, что и для UWP приложения; нет ничего нового для использования этой инстинктивной модели для доступа к серверу из вашего Win32 кода:

 

  

  
    Microsoft.SDKSamples.Kitchen.exe
    singleInstance
    
  

 

В то время как модель ActivateAsActivator позволяет обмениваться кодами, создание отдельного экземпляра сервера для каждого клиента может быть немного сложнее. Чтобы облегчить процесс, UWP представил концепцию ActivateAsPackage (AAP), которая обеспечивает одинаковое поведение для серверов в пакете. Это отображено в новом атрибуте IdentityType=”activateAsPackage” в элементе .

Однако существует ограничение в модели AAP, так как вы должны указать, в какой границе доверия вы хотите запустить сервер. Сервер должен быть зарегистрирован для использования процессами AppContainer или FullTrust. Если вы хотите использовать сервер как в процессах FullTrust, так и в AppContainer, вам нужно будет создать и зарегистрировать два сервера с отдельными именами серверов и именами классов, поскольку эти имена должны быть уникальными для каждого пакета. Чтобы зарегистрировать сервер для использования в процессе FullTrust, был добавлен новый атрибут RunFullTrust=”true”. Если вы хотите, чтобы сервер использовался в ваших AppContainer процессах, пропустите данный атрибут.

Оба новых атрибута находятся в пространстве имен xmlns:uap5=”http://schemas.microsoft.com/appx/manifest/uap/windows10/5”. Ниже приведен пример регистрации, показывающий регистрацию Win32 и UWP серверов:

AAP Регистрация сервера для использования процесса Win32, также известного как FullTrust:

  

  
    Microsoft.SDKSamples.Kitchen.exe
    singleInstance
    
  
AAP-регистрация сервера для использования  UWP процессами:

  

  
    Microsoft.SDKSamples.KitchenUWP.exe
    singleInstance
    
  

Образец использует AAP сценарий и показывает два приложения C # Winforms с использованием OOP WinRT Component, в результате чего выполняется только один экземпляр исполняемого файла сервера. WinRT Component представляет собой модифицированную версию образца WRLOutOfProcessWinRTComponent из Universal Windows Samples на github. В этом примере оба клиента вызывают сервер и BakeBread () метод. Из TaskManager можно увидеть, что существует только один экземпляр Сервера.


Ссылка GitHub: https://github.com/Microsoft/DesktopBridgeToUWP-Samples/tree/master/Samples/WinformsOutOfProcessWinRTComponent

Поддержка Visual Studio

В проектах, созданных для этого решения, стоит выделить пару деталей и обходные пути. Прежде всего, Visual Studio в настоящее время не позволяет добавлять ссылки на проекты из проекта WinRT Component в проект Win32 / .Net. Вы можете обойти это, выгрузив проект Win32 / .Net и добавив ссылку на проект прямо в файл проекта, например:

 


  

 

Хотя это добавляет ссылку, вы увидите предупреждение в Visual Studio, поскольку ранее это не поддерживалось. Microsoft продолжает работать с Visual Studio, чтобы улучшать его с каждой новой версией, но пока вы можете игнорировать предупреждение.

Во-вторых, образцы используют UWP JavaScript проект для обработки упаковки приложения. Этот метод отмечен в документе Desktop Bridge Packaging с документацией Visual Studio и работает как разумное решение, до тех пор пока Visual Studio не добавит поддержку. Преимущество этого подхода заключается в том, что вы можете добавить ссылку с вашего компонента WinRT в проект JavaScript, а затем система сборки Visual Studio добавляет соответствующие регистрации для зависимостей пакетов, включая VCLib и .NetNative, а также расширения . Visual Studio не поддерживает добавление регистраций , поэтому вам нужно будет добавить их в манифест вручную.

Сборка на основе метаданных - никаких Proxy/Stub DLL!

Наконец-то, в примере используются приемущества сборки на основе метаданных (Metadata Based Marshaling), которая была представлена в обновлении Windows 10 Anniversary Update (Windows 10 version 1607). Эта функция не привлекла большого внимания, но она позволяет WinRT Component разработчикам не создавать класс proxy / stub, экономя их время и усилия. Это возможно, потому что WinMD развертывается с приложением, и, таким образом, система может идентифицировать и собирать типы кросс-процессов для разработчика. Вы заметите, что код сервера в этом примере не включает прокси-проект и бинарные файлы.

Вывод 

Благодаря Windows Runtime Components и Desktop Bridge разработчики могут сделать еще один шаг на пути к переносу бизнес-логики в UWP. Windows Runtime Components обеспечивают повторное использование кода, которое может работать как с процессами FullTrust, так и с процессами UWP, и они позволяют использовать более широкий межпеременный язык.

Для получения дополнительной информации о Desktop Bridge, перейдите на Windows Dev Center.

 

Ваше приложение уже готово к публикации в Windows Store? Дайте нам знать!



Posted on 8. July 2017

Взаимодействие и Движение с Visual Layer in Windows 10 Creators Update

https://blogs.windows.com/buildingapps/2017/06/27/smooth-interaction-motion-visual-layer-windows-10-creators-update/amp/

API-интерфейс Composition оснащен мощным механизмом анимации, который обеспечивает быстрое движение, выполняемое в отдельном процессе вашего UWP приложения. Это гарантирует постоянство 60 кадров в секунду при запуске вашего приложения на устройстве IoT, а также на игровых девайсах. Это просто и очень быстро! Это необходимая возможность для внедрения Fluent Design System, которая сподвигла Microsoft создавать ощущение кинематографического движения в UWP приложениях.

 

 

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

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

Быстрая и подвижная анимационная система

Visual Layer поддерживает анимацию как для ключевого кадра, так и для анимации выражений. Если вы раньше работали с анимацией XAML, вы, вероятно, уже знакомы с тем, как работают ключевые кадры. В анимации ключевого кадра вы устанавливаете значения для некоторого свойства, которое со временем хотите изменить, а также необходимо назначить продолжительность для изменения: в приведенном ниже примере начальное значение, среднее значение, а затем конечное значение. Система анимации будет следить за анимацией - другими словами, создавая все значения между теми, которые вы явно указали, на основе выбранной функции. Linear или Cubic Bezier -  система анимации будет использовать это для определения значений при интерполяции.

 

CubicBezierEasingFunction cubicBezier = _compositor.CreateCubicBezierEasingFunction(new Vector2(.17f, .67f), new Vector2(1f, 1f));
ScalarKeyFrameAnimation blurAnimation = _compositor.CreateScalarKeyFrameAnimation();
blurAnimation.InsertKeyFrame(0.0f, 0.0f);
blurAnimation.InsertKeyFrame(0.5f, 100.0f);
blurAnimation.InsertKeyFrame(1.0f, 0.0f);
blurAnimation.Duration = TimeSpan.FromSeconds(4);
blurAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
_brush.StartAnimation("Blur.BlurAmount", blurAnimation);

 

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

 

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

Решающий код, который подключает шестерни для анимации, находится в следующем примере кода, который использует новую Expression Builder Library - компонент с открытым исходным кодом, выпущенный в Creators Update для создания анимаций выражений. Вышеприведенное выражение говорит о том, что анимация должна ссылаться и управляться свойством RotationAngleInDegrees Visual, которое обозначается параметром «previousGear». В следующей строке текущее свойство RotationAngleInDegrees Visual в конечном итоге анимируется на основе значения, указанного в выражении.

 

private void ConfigureGearAnimation(Visual currentGear, Visual previousGear)
{
    // If rotation expression is null then create an expression of a gear rotating the opposite direction

    var _rotateExpression = previousGear.GetReference().RotationAngleInDegrees;

    // Start the animation based on the Rotation Angle in Degrees.
    currentGear.StartAnimation("RotationAngleInDegrees", _rotateExpression);
}

 

Но что если анимация может управляться другой анимацией, вам может быть интересно, не могли бы вы также задействовать анимацию с чем-то более конкретным, как пользовательский ввод? Да, Это возможно!

Великолепие ScrollViewer ManipulationPropertySet

Управлять анимацией из ScrollViewer с помощью XAML-Composition interop довольно просто. При наличие всего несколько строк кода, вы можете улучшить визуализацию существующего элемента управления ScrollViewer с помощью CompositionAnimation, используя метод GetScrollViewerManipulationPropertySet в классе ElementCompositionPreview. Используя выражение анимации, вы можете привязать свою анимацию к позиции вашего компонента ScrollViewer.

 

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

 

Добавление смещения на страницу XAML может быть выполнено с помощью нескольких строк.

 

// Note: We're not using the ScrollViewer's offset values directly. Instead, we use this PropertySet which holds the position values of the ScrollViewer in real-time.
var scrollPropSet = _scrollProperties.GetSpecializedReference();
var startOffset = ExpressionValues.Constant.CreateConstantScalar("startOffset", 0.0f);
var parallaxValue = 0.5f;
var itemHeight = 0.0f;
var parallax = (scrollPropSet.Translation.Y + startOffset - (0.5f * itemHeight));
_parallaxExpression = parallax * parallaxValue - parallax;
_parallaxExpression.SetScalarParameter("StartOffset", (float)args.ItemIndex * visual.Size.Y / 4.0f);
visual.StartAnimation("Offset.Y", _parallaxExpression);

 

 

Еще больше красоты в InteractionTracker

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

Что делать, если вы хотите потянуть предметы к себе пальцем, как в демонстрационной версии ниже (исходный код), или анимировать несколько летящих изображений по экрану и на экране, как это происходит в демо в верхней части этой публикации (исходный код)?

 

Чтобы достичь этих эффектов, вы должны использовать новые классы InteractionTracker и VisualInteractionSource. InteractionTracker - это конечный инструмент, который может управляться активным входом. InteractionTracker также поддерживает ряд свойств, таких как Position и ScalePosition, как часть поддержания состояния. Это то, что вы подключаете к анимации. С другой стороны, класс VisualInteractionSource определяет, какой вход вы будете использовать для вождения вашего InteractionTracker, а также когда начинаете обработку ввода (в частности сенсорное).

 

Следующий пример кода демонстрирует базовую реализацию InteractionTracker. ViewportVisual - это обычная поддержка Visual для корневого элемента на странице. Вы используете ее как VisualInteractionSource для трекера. При этом вы указываете, что отслеживаете манипуляции X и Y. Вы также указываете, что хотите отслеживать инерционное движение.

 

_tracker = InteractionTracker.Create(_compositor);

var interactionSource = VisualInteractionSource.Create(viewportVisual);

interactionSource.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
interactionSource.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;

_tracker.InteractionSources.Add(interactionSource);

 

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

 

ar positionExpression = _compositor.CreateExpressionAnimation("-tracker.Position");
positionExpression.SetReferenceParameter("tracker", _tracker);

contentVisual.StartAnimation("Offset", positionExpression);

 

Этот код использует позицию InteractionTracker для создания бесперебойной анимации для смещения Visual. Вы также можете включить анимацию Blur и Opacity для других визуальных эффектов. Это приведет к тому, что все три анимации будут работать вместе, со значениями, основанными на том, как далеко пользователь перетащит палец, чтобы получить удивительно подвижный визуальный эффект. Запустите демо-версию и попробуйте (исходный код).

Это основы управления любой анимацией с любого входа. Все действия будут зависеть от вас.

В завершение

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

 

 



Posted on 29. June 2017

Windows 10 SDK Preview Build

Вчера, 28 июня, Microsoft выпустили новую версию Windows 10 SDK Preview Build, которая будет использоваться в сочетании с Windows 10 Insider Preview (Build 16225 или выше). Preview SDK Build 16225 содержит исправления ошибок и изменения разработки в области поверхности API.

Preview SDK можно загрузить из раздела разработчика в Windows Insider.

Перейдите на форум разработчика, чтобы оставить ваш отзыв или узнать об обновлениях известных проблем. Если Вы хотите оставить ваши пожелания для будущих версий, перейдите на Windows Platform UserVoice.

Обратите внимание:

  • Этот выпуск работает в сочетании с ранее выпущенными SDK и Visual Studio 2017. Вы можете установить этот SDK и по-прежнему отправлять свои приложения, предназначенные для выпуска Windows 10 Creators или тех, что были ранее в Store.
  • Теперь Windows SDK будет официально поддерживаться только Visual Studio 2017 и выше. Вы можете скачать Visual Studio 2017 здесь.

 

Известные проблемы:

  • Дизайнер не может отобразить: при просмотре XAML в окне Designer Window в Visual Studio элементы управления не отображаются. Это можно решить, используя Visual Studio 2017.3 Preview.
  • Компиляция выполняется только на платформе Windows 10: при создании приложений на предыдущих платформах вы можете получить ошибку сборки:

 

C:\program files (x860\Windows Kits\10\bin\10.0.16225.0\x86\genxbf.dll:C:\program files (x860\Windows Kits\10\bin\10.0.16225.0\x86\genxbf.dll(0,0): Error WMC0621: Cannot resolve ‘GenXbf.dll’ under path ‘C:\program files (x860\Windows Kits\10\bin\10.0.16225.0\x86\genxbf.dll’. Please install the latest version of the Windows 10 Software Development Kit.
Process ‘msbuild.exe’ exited with code ‘1’.

Это произойдет, если для версии минимальной целевой платформы установлено значение 10.0.16225.0. Чтобы обойти эту проблему, щелкните правой кнопкой мыши на файле проекта и выберите свойства или откройте файл проекта в своем любимом редакторе и измените версию на предыдущий выпущенный SDK. Например:
10.0.10586.0

Обновления и дополнения API

При настройке новых API-интерфейсов, подумайте над тем, чтобы ваше приложение было адаптивным для правильной работы на большом количестве устройств Windows 10. Для получения дополнительной информации, смотрите Раздел Динамическое обнаружение функций с помощью API контрактов (10 на 10).

Больше информации в официальном анонсе.


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. До сих пор они не были полностью доступны. Подумайте о том, что уже сегодня Вам доступны эти возможности. Однако с этим обновлением также возникает ответственность за создание красивого интерфейса и прекрасных взаимодействий. 

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

 

 



Posted on 24. June 2017

Монетизация вашего приложения: настройка параметров COPPA

Закон о защите конфиденциальности детей в Интернете (COPPA) запрещает операторам коммерческих веб-сайтов и онлайн-сервисам (включая мобильные приложения) ориентироваться на детей в возрасте до 13 лет с помощью использования целевых объявлений. Dev Center предоставляет разработчику приложения возможность указать, предназначено ли приложение или рекламный блок для детей.

Microsoft, еще в 2015 году, напомнили их сообществу разработчиков, чтобы они установили настройки COPPA для своих приложений, но несколько разработчиков установили данные настройки COPPA неправильно. Это очень влияет на доход, который разработчик может заработать на приложениях, которые не предназначены для детей в возрасте до 13 лет.

Если разработчик выбирает вариант соответствия COPPA и его приложение предназначено для детей младше 13 лет, Microsoft будет отключать свои рекламные услуги для предоставления объявлений в приложение. Если приложение разработчика предназначено для детей в возрасте до 13 лет, он должен выбрать эту опцию в разделе «Монетизировать с рекламой» в разделе «Монетизация» в Dev Center для этого конкретного приложения.

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

 

 

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



Posted on 23. June 2017

Выпущена версия Windows Template Studio 1.1!

Microsoft объявила о выпуске Windows Template Studio 1.1. В партнерстве с сообществом, Microsoft совершенствовали и проверяли новые функции и возможности. Если Вы заинтересованы в том, чтобы внести Ваш вклад в развитие проекта, пройдите в GitHub по адресу https://aka.ms/wts.

Как получить обновление:

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

 

  • Если уже установлено: Visual Studio должна автоматически обновлять расширение. Чтобы в ручную выполнить обновление, откройте «Инструменты» -> «Расширения и обновления». Затем перейдите на вкладку слева «Обновление расширителя», и вы увидите Windows Template Studio -> нажмите «Обновить».
  • Если еще не установлено: откройте https://aka.ms/wtsinstall, нажмите «загрузить» и дважды щелкните на установщик VSIX.

 


Усовершенствования Wizard мастера:

  • Переупорядоченные страницы
  • Первая страница не будет пустой
  • Переименование страниц и фоновых задач
  • Автономные улучшения
  • Исходная работа для поддержки локализации
  • Был добавлен анализ кода

Обновление страницы:

  • Добавлена сетка
  • Добавлена страница диаграммы
  • Добавлена страница мультимедиа / видео
  • Увеличена Веб-страница

Обновления функций:

  • Добавлены Store SDK Notifications 
  • Теперь у параметра SettingStorage есть опция двоичного сохранения (а не только основная строка)
Улучшение шаблонов:

  • Панель навигации переместилась в UWP Community Toolkit
  • Настройка стиля
  • Улучшение производительности ResourceLoader

Для получения полного списка исправленных ошибок, в версии 1.1, перейдите на Github.


Что будет в следующих версиях?

Microsoft очень ценит Вашу поддержку и участие в проектах. Они уже сотрудничают с дополнительной инфраструктурой Caliburn.Micro и имеют филиал, который в настоящее время разрабатывается с Найджелом Сэмпсоном. Ведутся переговоры по сотрудничеству с Prism и Template 10, чтобы посмотреть, как могут быть добавлены их рамки. Кроме того, это лишь некоторые из задач, над которыми Microsoft работает на данный момент:

  • Свободный дизайн в шаблонах
  • Функции Project Rome как опция для вашего проекта
  • Щелкните правой конпкой мыши -> добавьте поддержку уже существующих проектов
  • Wizard локализация
  • Доступ есть как к Wizard мастеру, так и к шаблонах

Если Вы хотите помочь, перейдите на https://aka.ms/wts.


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

Ресурсы



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 считает, что этот инструмент полезен, поэтому они сделали его доступнымым проектом с открытым исходным кодом для других, чтобы использовать и улучшать.

Вывод

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