Posted on 27. June 2019

XAML Islands v1 - Обновления и план выпуска

На конференции Microsoft Build было объявлено, что Windows 10 May 2019 Update (версия 1903) будет включать XAML Islands v1.

Ниже Вы можете ознакомиться с более подробной информацией плана выпуска и двух рабочих направлений в процессе разработки: .NET обертки и поддержка Visual Studio 2019.

Что такое XAML Islands?

XAML Islands позволяют .NET и нативным Win32 приложениям размещать элементы управления UWP XAML. Вы можете расширить возможности и функциональность Ваших существующих десктопных приложений с помощью последних инноваций пользовательского интерфейса, ранее доступных только для UWP приложений. Например, Вы можете использовать такие элементы управления, как ColorPicker, InkCanvas, CalendarView и NavigationView, в Ваших существующих C ++ Win32, Windows Forms и WPF приложениях.

С XAML Islands Вы можете модернизировать Ваше приложение в собственном стиле без необходимости переписывать его заново - просто используйте элементы управления UWP XAML.

Как использовать XAML Islands?

Первый компонент - API  UWP XAML хостинг. Это набор API Windows 10 (Windows Runtime классы и COM интерфейсы), которые поставляются на Windows 10 в версии 1903. Если у Вас есть нативное C ++ Win32 приложение, использующее Common Controls библиотеку (Comctl32.dll) или MFC, и Вам необходимо модернизировать Ваш интерфейс, смело используйте эти API.

Второй компонент состоит из обернутых .NET элементов управления и элементов управления хоста. Это набор оберток API  UWP XAML хостинга в Windows Community Toolkit как для Windows Forms, так и для WPF разработчиков.

Каковы требования для использования XAML Islands в Ваших приложениях?

  • Windows 10 версии 1903 и выше: Независимо от того, есть ли у Вас Win32 или .NET приложение, текущая версия XAML Islands работает только с приложениями для Windows 10 версии 1903 и выше.
  • Windows 10 SDK версия 1903 (10.0.18362): этот SDK содержит заголовки, библиотеки, метаданные и инструменты для сборки Windows 10 приложений, используя XAML Islands.
  • Упакованное десктопное приложение: Десктопные приложения можно упаковать в MSIX для доступа к определенным Windows 10 API, таким как живые тайлы и уведомления. Для упаковки Вашего приложения необходимо использовать Windows Application Packaging Project. Упаковка Вашего приложения не означает, что оно будет работать в изолированной программной среде с ограниченными UWP привилегиями. Вместо этого Ваше упакованное Win32 приложение будет работать в режиме полного доверия. Упакованные с XAML Islands приложения будут оптимизированы для разработчиков, которые работают с Visual Studio 2019.

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

  • Visual Studio 2019: только Visual Studio 2019 будет иметь набор инструментов, необходимый для сборки десктопных приложений с использованием XAML Islands.
  • .NET Core 3.0: эта среда полностью поддерживается для .NET приложений. Некоторые сценарии также будут работать в приложениях, предназначенных для .NET Framework 4.7.2, но для этих приложений существуют некоторые ограничения, например использование управляемых сторонних элементов управления.
Какие .NET Core и .NET Framework версии взаимодействуют с XAML Islands?

Обернутые .NET элементы управления поддерживаются в .NET Framework и .NET Core 3. Хост-элемент .NET (WindowsXamlHost) доступен для Windows Forms и WPF. Этот элемент управления позволяет хостить UWP XAML контент. Если UWP XAML контент - это элемент управления, который поставляется с Windows 10, такой как ColorPicker или NavigationView, Вы можете использовать .NET Framework 4.7.2 или NET Core 3.

Если UWP XAML контент - это пользовательский UWP элемент управления, который внедрен в сторонний WinRT компонент, то .NET версия, на которую Вы можете ориентироваться, зависит от того, каким образом был разработан пользовательский элемент управления. Он будет считаться сторонним WinRT компонентом, если он установлен одним из следующих способов: в отдельном UWP проекте, в Nuget пакете или по ссылке на файл.

  • Если сторонний WinRT компонент является нативным (написан на C ++ / WinRT), пользовательский элемент управления может использоваться как .NET Framework 4.7.2, так и как NET Core 3.
  • Если сторонний WinRT компонент является управляемым (например, написан на C#), пользовательский элемент управления может использоваться только на .NET Core 3. Полная версия .NET Framework не полностью поддерживается в этом сценарии, и она требует некоторой кросс-компиляции для того, чтобы работать на всех.

Таблица поддержки платформы для XAML Islands в1:

Если Ваше приложение нацелено на .NET Core 3, независимо от того, является ли сторонний WinRT компонент, который Вы размещаете, нативным или управляемым, Вы получите оптимизированный опыт работы. Если Ваше приложение нацелено на полную .NET Framework версию, Вы получите оптимизированный опыт, только если Ваш сторонний WinRT компонент является нативным.

Как использовать XAML Islands в Вашем нативном C ++ Win32 приложении?

Если Вы C ++ разработчик, Вам нужно использовать API UWP XAML хостинга. Вот одни из основных шагов:

  • Сначала инициализируется UWP XAML структура в текущем потоке (Вы можете использовать статический InitializeForCurrentThread метод для WindowsXamlManager класса).
  • Создайте DesktopWindowXamlSource объект, который требует HWND от Вашего приложения. DesktopWindowXamlSource создаст ChildWindow, где Вы сможете разместить XAML контент.
  • Вам нужно позаботиться о фокусировке клавиатуры, когда пользователи переходят на XAML Islands и выходят из них. Этот DesktopWindowXamlSource объект предоставляет событие для распределения фокусировки клавиатуры.

Вы можете ознакомиться с более подробной информацией здесь: https://docs.microsoft.com/en-us/windows/apps/desktop/modernize/using-the-xaml-hosting-api

Как использовать XAML Islands в Вашем .NET приложении?

Windows Community Toolkit версии 6.0.0 (на данный момент в preview-версии) предоставляет несколько NuGet пакетов для Windows Forms и WPF, которые Вы можете добавить в Ваш проект.

Элемент управления WindowXamlHost является хост-элементом, в котором можно размещать все типы UWP XAML контента.

Обернутые элементы управления создаются для работы с большинством событий и свойств небольшого набора определенных UWP элементов в WPF и Windows Forms элементы. В настоящее время предоставляются следующие упакованные элементы управления:

  • InkCanvas оборачивает UWP InkCanvas и InkToolbar и предоставляет поверхность и панели инструментов для взаимодействия с Ink пользователем.
  • MediaPlayerElement позволяет Вашим .NET приложениям использовать современные аудио- и видео-кодеки и предоставляет более высокую производительность для потоковой передачи и воспроизведения медиа контента.
  • MapControl позволяет использовать в Ваших приложениях последние инновации картографической платформы, например, больше фотореалистичных карт.
  • SwapChainPanel (preview-версия) позволяет добавлять DirectX 12 контент в Ваше приложение.

Какие современные веб элементы доступны для десктопных приложений?

Windows Forms и WPF приложения используют элемент управления WebBrowser, который использует рендеринг Internet Explorer и поэтому не поддерживает HTML5 и другие функции. Windows Community Toolkit содержит Windows Forms и WPF обертки для UWP WebView элемента, который использует Edge в качестве инструмента рендеринга, поэтому эти приложения могут размещать веб-контент, который требуюется на HTML5.

Windows Community Toolkit также содержит элемент управления WebViewCompatible. Этот элемент использует либо WebBrowser, либо WebView рендеринг, в зависимости от Windows версии, на которой работает приложение:

  • Приложения для Windows 10 версии 1803 и выше будут использовать текущий инструмент WebView рендеринга.
  • Приложения для более ранних Windows версий, таких как Windows 8.1, будут использовать более старый инструмент WebBrowser рендеринга.

Используют ли XAML Islands другой поток?

Нет. XAML Islands работают в том же потоке пользовательского интерфейса Вашего десктопного приложения. Вы можете сразу получить доступ ко всем UWP XAML объектам из Вашего кода. Это отличается от Windows Forms и WPF технологий.

Есть ли инструкции?

XAML Islands Lab предоставляет пошаговые инструкции по использованию обернутых элементов управления и хост-элементов в Windows Community Toolkit для добавления UWP элементов управления в уже существующее WPF приложение. Эта работа включает в себя полный код для WPF приложения, а также подробные инструкции для каждого этапа.

Этот C ++ Win32 образец демонстрирует полную реализацию размещения пользовательского UWP элемента управления в неупакованном C ++ Win32 приложении (то есть приложении, которое не встроено в MSIX пакет).

Для WPF .NET Core 3 приложения, которое использует UWP проект в User Control, Вы можете использовать следующее:

Windows Community Toolkit содержит демонстрационные версии для проверки обернутого элемента управления и хост-элемента.

Каков план выпуска XAML Islands в1?

1. Windows 10 May 2019 Update содержит первый выпуск XAML Islands (в1).

2. Windows Community Toolkit, версии 6.0, будет содержать WindowsXamlHost и упакованные элементы управления для .NET Framework.

  • Это запланировано на лето 2019 года.
  • Будет preview-версия 6.1, которая будет содержать WindowsXamlHost .NET Core 3 версию и упакованные элементы управления. Это обновление будет выпущено вместе с .NET Core 3 - во второй половине 2019 года.

3. Visual Studio 2019 обновится во второй половине 2019 года вместе с .NET Core 3, который будет поддерживать XAML Islands в1. Помните, что только с упакованными приложениями Вы получите оптимизированный опыт работы.

Каков план выпуска XAML Islands в2?

XAML Islands в2 будет поставляться в составе WinUI 3.0. Следовательно, вторая версия будет поддерживать те же Windows 10 версии, что и WinUI 3.0. Основной выпуск WinUI v3 запланирован на первую половину 2020 года. WinUI - это проект с открытым исходным кодом, и Вы можете следить за последними событиями здесь: https://github.com/microsoft/microsoft-ui-xaml/blob/master/docs/roadmap.md 

Где оставить отзыв о XAML Islands?





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 28. March 2012

Презентации докладов MS SWIT 2012

22 и 23 марта компания Microsoft провела свое самое большое в году мероприятие для разработчиков и IT специалистов, на которой присутствовало 800 человек занятых в IT индустрии Украины. На конференции можно было узнать о последних направлениях, которые развивает компания и познакомиться с интересными людьми. Те кто не приехал – могли смотреть онлайн трансляцию основного потока докладов конференции в котором рассказывали о возможностях новой платформы Windows 8.

На конференции компания DCT была представлена 4-мя докладчиками: Ангелина Лукошкина (эксперт по дизайну Metro и Windows Phone приложений), Денис Резник (MS SQL MVP), Александр Фещенко (Microsoft Azure MVP) и я.

Презентации моих докладов смотрите ниже:

Разработка игр для Windows Phone

Metro Style Applications: интеграция с платформой

Учасники конференции получили книгу “Windows 8 для C# разработчиков” соавтором которой я являюсь. Сейчас можно скачать ее pdf версию:

Windows 8 для C# разработчиков

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



Posted on 2. August 2010

Настройка Xaml FXCop правил в FXCop GUI

Lester в своем блоге опубликовал описание как настроить Xaml FXCop правила в FXCop GUI.

Для того, что бы настроить необходимо выполнить следующие шаги:

1. Установиться FXCop.

FXCop installation

2. Обновить FxCop.exe.config (находится в %ProgramFiles(x86)%\ Microsoft FxCop 1.36) для запуска на .Net 4.0.

Добавить ниже приведенный xml в нижнюю часть файла конфигурации после тега

3. Открыть FxCop.exe (находится в %ProgramFiles(x86)%\ Microsoft FxCop 1.36).

Microsoft FxCop

4. Загрузить сборку с правилами FxCop (если у вас не собственной с правилами, то можете использовать Microsoft.Xaml.Tools.FxCop.dll).

Microsoft FxCop 2

5. Загрузить Targets\сборку проекта.

Microsoft FxCop 3

6. На этом настройка завершена. Нажмите кнопку Analyze и вы увидите результаты работы установленных правил.

Microsoft FxCop 4