Tag Archives: XAML

New Lights and PropertySet Interop – XAML and Visual Layer Interop, Part Two

In the last post, we explored using XamlCompositionBrushBase and LoadedImageSurface to create custom CompositionBrushes that can be used to paint XAML elements directly in your markup. In today’s post, we’ll continue our look into the new improvements made to the XAML and Visual Layer Interop APIs available in the Windows 10 Creators Update.

In this blog series, we’ll cover some of these improvements in the Creators Update and look at the following APIs:

  • In Part 1:
    • XamlCompositionBrushBase – easily paint a XAML UIElement with a CompositionBrush
    • LoadedImageSurface – load an image easily and use with Composition APIs
  • In Part 2, today’s post:
    • XamlLights – apply lights to your XAML UI with a single line of XAML
    • PointerPositionPropertySet – create 60 FPS animations using pointer position, off the UI thread!
    • Enabling the Translation property – animate a XAML UI Element using Composition animation

If you’d like to review the previously available ElementCompositionPreview APIs, for example working with “hand-in” and “hand-out” Visuals, you can quickly catch up here.

Lighting UI with XamlLights

A powerful new feature in the Creators Update is the ability to set and use a Lighting effect directly in XAML by leveraging the abstract XamlLight class.

Creating a XamlLight starts just like a XamlCompositionBrushBase does, with an OnConnected and OnDisconnected method (see Part One here), but this time you inherit from the XamlLight subclass to create your own unique lighting that can be used directly in XAML. Microsoft uses this with the Reveal effect that comes with the Creators Update.

To see this in action, let’s build a demo that creates the animated GIF you see at the top of this post. It combines everything you learned about XamlCompositionBrushBase and LoadedImageSurface in the last post, but this example has two XamlLights: a HoverLight and an AmbientLight.

Let’s begin with creating the AmbientLight first. To get started, we begin similarly to the XamlCompositionBrushBase with an OnConnected and OnDisconnected method. However, for a XamlLight we set the CompositionLight property of the XamlLight subclass.


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;
}

With ambient lighting done, let’s build the SpotLight XamlLight. One of the main things we want the SpotLight to do is follow the user’s pointer. To do this, we can now use GetPointerPositionPropertySet method of ElementCompositionPreview to get a CompositionPropertySet we can use with a Composition ExpressionAnimation (PointerPositionPropertySet is explained in more detail in the PropertySets section below).

Here is the finished XamlLight implementation that creates that animated spotlight. Read the code comments to see the main parts of the effects, particularly how the resting position and animated offset position are used to create the lighting.

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;
}

Now, with the HoverLight class done, we can add both the AmbLight and the HoverLight to previous ImageEffectBrush (find ImageEffectBrush in the last post):

<Grid>
<Grid.Background>
<brushes:ImageEffectBrush ImageUriString="ms-appx:///Images/Background.png" />
</Grid.Background>
<Grid.Lights>
<lights:HoverLight/>
<lights:AmbLight/>
</Grid.Lights>
</Grid>

Note: To add a XamlLight in markup, your Min SDK version must be set to Creators Update, otherwise you can set it in the code behind.

For more information, go here to read more about using XamlLight and here to see the Lighting documentation.

Using CompositionPropertySets

When you want to use the values of the ScrollViewer’s Offset or the Pointer’s X and Y position (e.g. mouse cursor) to do things like animate effects, you can use ElementCompositionPreview to retrieve their PropertySets. This allows you to create amazingly smooth, 60 FPS animations that are not tied to the UI thread. These methods let you get the values from user interaction for things like animations and lighting.

Using ScrollViewerManipulationPropertySet

This PropertySet is useful for animating things like Parallax, Translation and Opacity.

// Gets the manipulation <ScrollViewer x:Name="MyScrollViewer"/>
CompositionPropertySet scrollViewerManipulationPropertySet = 
ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MyScrollViewer);

To see an example, go to the Smooth Interaction and Motion blog post in this series. There is a section devoted to using the ScrollViewerManipulationPropertySet to drive the animation.

Using PointerPositionPropertySet (new!)

New in the Creators Update, is the PointerPositionPropertySet. This PropertySet is useful for creating animations for lighting and tilt. Like ScrollViewerManipulationPropertySet, PointerPositionPropertySet enables fast, smooth and UI thread independent animations.

A great example of this is the animation mechanism behind Fluent Design’s RevealBrush, where you see lighting effects on the edges on the UIElements. This effect is created by a CompositionLight, which has an Offset property animated by an ExpressionAnimation using the values obtained from the 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);

To get a better understanding of how you can use this to power animations in your app, let’s explore XamlLights and create a demo that uses the PointerPositionPropertySet to animate a SpotLight.

Enabling Translation Property – Animating a XAML Element’s Offset using Composition Animations

As discussed in our previous blog post, property sharing between the Framework Layer and the Visual Layer used to be tricky prior to the Creators Update. The following Visual properties are shared between UIElements and their backing Visuals:

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

Prior to the Creators update, Scale and Offset were especially tricky because, as mentioned before, a UIElement isn’t aware of changes to the property values on the hand-out Visual, even though the hand-out Visual is aware of changes to the UIElement. Consequently, if you change the value of the hand-out Visual’s Offset or Size property and the UIElement’s position changes due to a page resize, the UIElement’s previous position values will stomp all over your hand-out Visual’s values.

Now with the Creators Update, this has become much easier to deal with as you can prevent Scale and Offset stomping by enabling the new Translation property on your element, by way of the ElementCompositionPreview object.

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);

Then, animate the visual’s Translation property where previously you would have animated its Offset property.

// Old way, subject to property stomping:
visual.StartAnimation("Offset.Y", animation);
// New way, available in the Creators Update
visual.StartAnimation("Translation.Y", animation);

By animating a different property from the one affected during layout passes, you avoid any unwanted offset stomping coming from the XAML layer.

Wrapping up

In the past couple posts, we explored some of the new features of XAML and Composition Interop and how using Composition features in your XAML markup is easier than ever. From painting your UIElements with CompositionBrushes and applying lighting, to smooth off-UIThread animations, the power of the Composition API is more accessible than ever.

In the next post, we’ll dive deeper into how you can chain Composition effects to create amazing materials and help drive the evolution of Fluent Design.

Resources

Working with Brushes and Content – XAML and Visual Layer Interop, Part One

The Composition APIs empower Universal Windows Platform (UWP) developers to do beautiful and powerful things when they access the Visual Layer. In the Windows 10 Creators Update, we made working with the Visual Layer much easier with new, powerful APIs.

In this blog series, we’ll cover some of these improvements in the Creators Update and take a look at the following APIs:

  • In Part 1, today’s post:
    • XamlCompositionBrushBase – easily paint a XAML UIElement with a CompositionBrush
    • LoadedImageSurface – load an image easily and use with Composition APIs
  • In Part 2, we’ll look at:
    • XamlLights – apply lights to your XAML UI with a single line of XAML
    • PointerPositionPropertySet – create 60 FPS animations using pointer position, off the UI thread!
    • Enabling the Translation property – animate a XAML UI Element using Composition animation

If you’d like to review the previously available ElementCompositionPreview APIs, for example working with “hand-in” and “hand-out” Visuals, you can quickly catch up here.

Using XamlCompositionBrushBase

One of the benefits of the new Composition and XAML interop APIs is the ability to use a CompositionBrush to directly paint a XAML UIElement rather than being limited to XAML brushes only. For example, you can create a CompositionEffectBrush that applies a tinted blur to the content beneath and use the brush to paint a XAML rectangle that can be included in the XAML markup

This is accomplished by using the new abstract class XamlCompositionBrushBase available in the Creators Update. To use it, you subclass XamlCompositionBrushBase to create your own XAML Brush that can be used in your markup. As seen the example code below, the XamlCompositionBrushBase exposes a CompositionBrush property that you set with your effect (or any CompositionBrush) and it will be applied to the XAML element.

This effectively replaces the need to manually create SpriteVisuals with SetElementChild for most effect scenarios. In addition to needing less code to create and add an effect to the UI, using a Brush means you get the following added benefits for free:

  • Theming and Styling
  • Binding
  • Resource and Lifetime management
  • Layout aware
  • PointerEvents
  • HitTesting and other XAML-based advantages

Microsoft, as part of the Fluent Design System, has included a few Brushes in the Creators Update that leverage the features of XamlCompositionBrushBase:

Building a Custom Composition Brush

Let’s create a XamlCompositionBrush of our own to see how simple this can be.  Here’s what we’ll create:

To start, let’s create a very simple Brush that applies an InvertEffect to content under it. First, we’ll need to make a public sealed class that inherits from XamlCompositionBrushBase and override two methods:

  • OnConnected
  • OnDisconnected

Let’s dive into the code. First, create your Brush class, which inherits from XamlCompositionBrushBase:

public class InvertBrush : XamlCompositionBrushBase
{
protected override void OnConnected()
{
if (CompositionBrush == null)
{
// 1 - Get the BackdropBrush, this gets what is behind the UI element
var backdrop = Window.Current.Compositor.CreateBackdropBrush();
// CompositionCapabilities: Are effects supported? If not, return.
if (!CompositionCapabilities.GetForCurrentView().AreEffectsSupported())
{ 
return;
}
// 2 - Create your Effect
// New-up a Win2D InvertEffect and use the BackdropBrush as its Source
// Note – To use InvertEffect, you'll need to add the Win2D NuGet package to your project (search NuGet for "Win2D.uwp")
var invertEffect = new InvertEffect
{
Source = new CompositionEffectSourceParameter("backdrop")
};
// 3 - Set up the EffectFactory
var effectFactory = Window.Current.Compositor.CreateEffectFactory(invertEffect);
// 4 - Finally, instantiate the CompositionEffectBrush
var effectBrush = effectFactory.CreateBrush();
// and set the backdrop as the original source 
effectBrush.SetSourceParameter("backdrop", backdrop);
// 5 - Finally, assign your CompositionEffectBrush to the XCBB's CompositionBrush property
CompositionBrush = effectBrush;
}
}
protected override void OnDisconnected()
{
// Clean up
CompositionBrush?.Dispose();
CompositionBrush = null;
}
}

There are a few things to call out in the code above.

  • In the OnConnected method, we get a CompositionBackdropBrush. This allows you to easily get the pixels behind the UIElement.
  • We use fallback protection. If the user’s device doesn’t have support for the effect(s), then just return.
  • Next, we create the InvertEffect and use the backdropBrush for the Effect’s Source.
  • Then, we pass the finished InvertEffect to the CompositionEffectFactory.
  • Finally, we get an EffectBrush from the factory and set the XamlCompositionBrushBase.CompositionBrush property with our newly created effectBrush.

Now you can use it in your XAML. For example, let’s apply it to a Grid on top of another Grid with a background image:

<Grid>
<Grid.Background>
<ImageBrush ImageSource="ms-appx:///Images/Background.png"/>
</Grid.Background>
<Grid Width="300" Height="300" 
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.Background>
<brushes:InvertBrush />
</Grid.Background>
</Grid>
</Grid>

Now that you know the basics of creating a brush, let’s build an animated effect brush next.

Creating a Brush with Animating Effects

Now that you see how simple it is to create a CompositionBrush, let’s create a brush that applies a TemeratureAndTint effect to an image and animate the Temperature value:

We start the same way we did with the simple InvertBrush, but this time we’ll add a DependencyProperty,  ImageUriString, so that we can load an image using LoadedImageSurface in the OnConnected method.

public sealed class ImageEffectBrush : XamlCompositionBrushBase
{
private LoadedImageSurface _surface;
private CompositionSurfaceBrush _surfaceBrush;
public static readonly DependencyProperty ImageUriStringProperty = DependencyProperty.Register(
"ImageUri",
typeof(string),
typeof(ImageEffectBrush),
new PropertyMetadata(string.Empty, OnImageUriStringChanged)
);
public string ImageUriString
{
get => (String)GetValue(ImageUriStringProperty);
set => SetValue(ImageUriStringProperty, value);
}
private static void OnImageUriStringChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var brush = (ImageEffectBrush)d;
// Unbox and update surface if CompositionBrush exists     
if (brush._surfaceBrush != null)
{
var newSurface = LoadedImageSurface.StartLoadFromUri(new Uri((String)e.NewValue));
brush._surface = newSurface;
brush._surfaceBrush.Surface = newSurface;
}
}
protected override void OnConnected()
{
// return if Uri String is null or empty
if (string.IsNullOrEmpty(ImageUriString))
return;
// Get a reference to the Compositor
Compositor compositor = Window.Current.Compositor;
// Use LoadedImageSurface API to get ICompositionSurface from image uri provided
_surface = LoadedImageSurface.StartLoadFromUri(new Uri(ImageUriString));
// Load Surface onto SurfaceBrush
_surfaceBrush = compositor.CreateSurfaceBrush(_surface);
_surfaceBrush.Stretch = CompositionStretch.UniformToFill;
// CompositionCapabilities: Are Tint+Temperature and Saturation supported?
bool usingFallback = !CompositionCapabilities.GetForCurrentView().AreEffectsSupported();
if (usingFallback)
{
// If Effects are not supported, Fallback to image without effects
CompositionBrush = _surfaceBrush;
return;
}
// Define Effect graph (add the Win2D.uwp NuGet package to get this effect)
IGraphicsEffect graphicsEffect = new SaturationEffect
{
Name = "Saturation",
Saturation = 0.3f,
Source = new TemperatureAndTintEffect
{
Name = "TempAndTint",
Temperature = 0,
Source = new CompositionEffectSourceParameter("Surface"),
}
};
// Create EffectFactory and EffectBrush 
CompositionEffectFactory effectFactory = compositor.CreateEffectFactory(graphicsEffect, new[] { "TempAndTint.Temperature" });
CompositionEffectBrush effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("Surface", _surfaceBrush);
// Set EffectBrush to paint Xaml UIElement
CompositionBrush = effectBrush;
// Trivial looping animation to demonstrate animated effect
ScalarKeyFrameAnimation tempAnim = compositor.CreateScalarKeyFrameAnimation();
tempAnim.InsertKeyFrame(0, 0);
tempAnim.InsertKeyFrame(0.5f, 1f);
tempAnim.InsertKeyFrame(1, 0);
tempAnim.Duration = TimeSpan.FromSeconds(5);
tempAnim.IterationBehavior = AnimationIterationBehavior.Count;
tempAnim.IterationCount = 10;
effectBrush.Properties.StartAnimation("TempAndTint.Temperature", tempAnim);
}
protected override void OnDisconnected()
{
// Dispose Surface and CompositionBrushes if XamlCompBrushBase is removed from tree
_surface?.Dispose();
_surface = null;
CompositionBrush?.Dispose();
CompositionBrush = null;
}
}

There are some new things here to call out that are different from the InvertBrush:

  • We use the new LoadedImageSurface API to easily load an image in the OnConnected method, but also when the ImageUriString value changes. Prior to Creators Update, this required a hand-in Visual (a SpriteVisual, painted with an EffectBrush, which was handed back into the XAML Visual Tree). See the LoadedImageSurface section later in this article for more details.
  • Notice that we gave the effects a Name value. In particular, TemperatureAndTintEffect, uses the name “TempAndTint.” This is required to animate properties as it is used for the reference to the effect in the AnimatableProperties array that is passed to the effect factory. Otherwise, you’ll encounter a “Malformed animated property name” error.
  • After we assign the CompositionBrush property, we created a simple looping animation to oscillate the value of the TempAndTint from 0 to 1 and back every 5 seconds.

Let’s take a look at an instance of this Brush in markup:

<Grid>
<Grid.Background>
<brushes:ImageEffectBrush ImageUriString="ms-appx:///Images/Background.png"/>
</Grid.Background>
</Grid>

For more information on using XamlCompositionBrushBase, see here. Now, let’s take a closer look at how easy it is now to bring in images to the Visual layer using LoadedImageSurface

Loading images with LoadedImageSurface

With the new LoadedImageSurface class, it’s never been easier to load an image and work with it in the visual layer. The class has the same codec support that Windows 10 has via the Windows Imaging Component (see full list here), thus it supports the following image file types:

  • Joint Photographic Experts Group (JPEG)
  • Portable Network Graphics (PNG)
  • Bitmap (BMP)
  • Graphics Interchange Format (GIF)
  • Tagged Image File Format (TIFF)
  • JPEG XR
  • Icons (ICO)

NOTE: When using an animated GIF, only the first frame will be used for the Visual, as animation is not supported in this scenario.

To load in an image, you can use one of the four factory methods:

As you can see there are two ways to load an image: with a Uri or a Stream. Additionally, you have an option to use an overload to set the size of the image (if you don’t pass in a Size, it will decode to the natural size).

CompositionSurfaceBrush imageBrush = compositor.CreateSurfaceBrush();
LoadedImageSurface loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Images/Photo.jpg"), new Size(200.0, 200.0));
imageBrush.Surface = loadedSurface;

This is very helpful when you need to load an image that will be used for your CompositionBrush (e.g. CompositionEffectBrush) or SceneLightingEffect (e.g. NormalMap for textures) as you no longer need to manually create a hand-in Visual (a SpriteVisual painted with an EffectBrush). In an upcoming post in this series, we will explore this further using NormalMap images with to create advanced lighting to create unique and compelling materials.

Using LoadedImageSurface with a Composition Island

LoadedImageSurface is also useful when loading an image onto a SpriteVisual inserted in XAML UI using ElementCompositionPreview. For this scenario, you can use the Loaded event to adjust the visual’s properties after the image has finished loading.

Here is an example of using LoadedImageSurface for a CompositionSurfaceBrush, then updating the SpriteVisual’s size with the image’s DecodedSize when the image is loaded:

private SpriteVisual spriteVisual;
private void LoadImage(Uri imageUri)
{
CompositionSurfaceBrush surfaceBrush = Window.Current.Compositor.CreateSurfaceBrush();
// You can load an image directly and set a SurfaceBrush's Surface property with it
var loadedImageSurface = LoadedImageSurface.StartLoadFromUri(imageUri);
loadedImageSurface.LoadCompleted += Load_Completed;
surfaceBrush.Surface = loadedImageSurface;
// We'll use a SpriteVisual for the hand-in visual
spriteVisual = Window.Current.Compositor.CreateSpriteVisual();
spriteVisual.Brush = surfaceBrush;
ElementCompositionPreview.SetElementChildVisual(MyCanvas, spriteVisual);
}
private void Load_Completed(LoadedImageSurface sender, LoadedImageSourceLoadCompletedEventArgs args)
{
if (args.Status == LoadedImageSourceLoadStatus.Success)
{
Size decodedSize = sender.DecodedSize;
spriteVisual.Size = new Vector2((float)decodedSize.Width, (float)decodedSize.Height);
}
}

There are some things you should be aware before getting started with LoadedImageSurface. This class makes working with images a lot easier, however you should understand the lifecycle and when images get decoded/sized. We recommend that you take a couple minutes and read the documentation before getting started.

Wrapping up

Using Composition features in your XAML markup is easier than ever. From painting your UIElements with CompositionBrushes and applying lighting, to smooth off-UIThread animations, the power of the Composition API is more accessible than ever.

In the next post, we’ll explore more new APIs like the new Translation property, using XamlLights in your XAML markup and how to create a custom light using the new PointerPositionPropertySet.

Resources

Smooth Interaction and Motion with the Visual Layer in Windows 10 Creators Update

The Composition APIs come with a robust animation engine that provides quick and fluid motion running in a separate process from your Universal Windows Platform (UWP) app. This ensures a consistent 60 frames per second when running your app on an IoT device as well as on a screaming gaming machine. It is, quite simply, fast. This is an essential capability for implementing the Fluent Design System which calls on us to create a sense of cinematic motion in our UWP apps.

The Composition APIs also provide something you probably have never had access to before: the ability to create high-performing, low-level manipulation-driven custom animations like the one shown above.  In the same way that we that want our visuals to be fast and smooth, we want our touch interactions to be sticky and responsive. Moving a visual with a finger or a digital pen should result in the visual element clinging to us no matter how fast we push and pull it across the display.

Even if a motion looks good, it also needs to feel good under the finger. It needs to maintain the illusion that we are interacting with a real object. It ought to possess the proper physics so that when we drag a visual across the screen and let go, it continues with the proper inertial movement. Similarly, user controls should provide the right amount of resistance when we pull and release them.

A fast and fluid animation system

The Visual Layer supports both keyframe animations as well as expression animations. If you have worked with XAML animations before, then you are probably already familiar with how keyframes work. In a keyframe animation, you set values for some property you want to change over time and also assign the duration for the change: in the example below, a start value, a middle value and then an ending value. The animation system will take care of tweening your animation – in other words, generating all the values between the ones you have explicitly specified based on the easing function you select. Whether Linear, or a Cubic Bezier, the animation system will use that to determine the values when interpolating.

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);

A keyframe animation is a fire-and-forget mechanism that is time based. There are situations, however, when you need your animations to be coordinated and driving each other instead of simply moving in synchronized fashion.

In the animation above (source code), each gray gear is animated based on the animation of the gear preceding it. If the preceding gear suddenly goes faster or reverses direction, it forces the following gear to do the same. Keyframe animations can’t create motion effects that work in this way, but expression animations can. They are able to do so because, while keyframe animations are time based, expression animations are reference based.

The critical code that hooks up the gears for animation is found in the following code sample, which uses the new Expression Builder Library—an open source component released alongside of the Creators Update to construct expression animations. The expression below says that the animation should reference and be driven by the RotationAngleInDegrees property of the Visual that is indicated by the parameter “previousGear”. In the next line, the current Visual’s RotationAngleInDegrees property is finally animated based on the value referred to in an expression.

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);
}

But if an animation can be driven by another animation, you may be wondering, couldn’t we also drive an animation with something more concrete like user input? Why, yes. Yes, we can.

The beauty of the ScrollViewer ManipulationPropertySet

Driving an animation from a ScrollViewer using XAML-Composition interop is fairly easy. With just a few lines of code, you can enhance the visuals of a pre-existing ScrollViewer control with a CompositionAnimation by taking advantage of the GetScrollViewerManipulationPropertySet method on the ElementCompositionPreview class. Using an animation expression, you can tie your animation to the Position of your ScrollViewer component.

You would use this technique if you wanted to add a parallax effect to your XAML or to create a sticky header that stays in place as content scrolls beneath it. In the demo illustrated below (source code), a ScrollViewer is even used to drive a parallax effect on a ListView.

Adding parallax behavior to a XAML page can be accomplished in just a few lines.

// 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<ManipulationPropertySetReferenceNode>();
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);

The even more beautiful InteractionTracker

Driving expression animations with a ScrollViewer is extremely powerful, but what if you want to drive animations using touch gestures that aren’t limited to a pan/zoom gesture? Additionally, when using the ScrollViewer’s manipulations, your animations are linked to the UI thread responsiveness and can lose that buttery-smooth feel when the UI thread gets bogged down.

What if you want to pull items toward you with your finger, as in the demo below (source code), or animate multiple flying images across and into the screen as happens in the demo at the top of this post (source code)?

In order to achieve these effects, you would use the new InteractionTracker and VisualInteractionSource classes. InteractionTracker is a state machine that can be driven by active input. InteractionTracker also maintains a series of properties like Position and ScalePosition as part of maintaining the state. This is what you hook up to your animations. The VisualInteractionSource class, on the other hand, determines what kind of input you will use to drive your InteractionTracker and also when to start handling input (touch in particular).

The following sample code demonstrates a basic implementation of an InteractionTracker. The viewportVisual is simply the backing Visual for the root element on the page. You use this as the VisualInteractionSource for the tracker. In doing so, you specify that you are tracking X and Y manipulations. You also indicate that you want to track inertial movement.

_tracker = InteractionTracker.Create(_compositor);
var interactionSource = VisualInteractionSource.Create(viewportVisual);
interactionSource.PositionXSourceMode = InteractionSourceMode.EnabledWithInertia;
interactionSource.PositionYSourceMode = InteractionSourceMode.EnabledWithInertia;
_tracker.InteractionSources.Add(interactionSource);

Hooking the tracker up to an expression animation works basically the same way as hooking up a gear Visual to another gear Visual, as you did earlier. You call the CreateExpressionAnimation factory method on the current Compositor and reference the Position property of the tracker.

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

This code uses the InteractionTracker’s position to produce a smooth animation for the Offset of the Visual. You can also power your Blur and Opacity animations for your other Visuals as well. This will have a result where all three animations work together, with values based on how far the user dragged their finger, to result in an amazingly fluid visual experience. Run the demo and try it for yourself (source code).

Those are the basics of driving any animation from any input. What you do with this amazing new power is entirely up to you.

Wrapping up

Expression animations and Visual Layer Interactions are both topics that can become very deep very fast. To help you through these deeper waters, we highly recommend the following videos and articles:

Sweet UI made possible and easy with Windows.UI and the Windows 10 Creators Update

Since its original debut with the Windows 10 November 2015 update, Windows.UI.Composition has been empowering developers to build fast, beautiful, sweet user interfaces in UWP and has been providing enhancements with every subsequent Windows release. At Build 2017, we revealed what all of this continuous work has been leading up to: The Fluent Design System (aka ‘Project Neon’).

Moving from classic ‘Flat Design’ to Fluent Design requires the visual and performance capabilities that the Composition APIs offers along with the interop features that let you draw on this power from your XAML layer. In case you are not yet familiar with the concepts behind the Composition APIs, here’s a quick refresher on what the Composition APIs are all about.

The Windows.UI.Composition namespace allows Universal Windows Platform (UWP) developers to use a new Visual Layer that will get them closer to the metal, graphically speaking, while still using familiar technologies like XAML and C#. By getting closer to the metal, actually down to the system compositor level, developers are able to get great visual performance and custom UI experiences. By working through the XAML layer, developers get the ease of use they have come to expect out of UWP. This is basically a best of both worlds scenario that puts great responsibility in the developer’s hands. And with great responsibility, as we all know, comes great power.

So why do you need all these graphical and UX superpowers? In addition to giving pizazz to your UWP apps, access to the system compositor level also helps your users to accomplish their tasks faster and more fluidly. For instance, when you use Composition effects to blur a background in response to a click, you are focusing the user’s attention on her current task and removing distractions. This is the sort of subtle UI implementation that actually makes your user’s life easier – and it works best when your user doesn’t even know that you did anything for them. They are just left with the impression that your app is easy to use and feels fast, even if they can’t exactly put their finger on the reason.

The Visual family

To better understand the basic principles of Windows.UI.Composition, it’s important that we also introduce you to the visual family. In order to get fast and fluid effects, you need direct access to something called the system compositor (sometimes also referred to as the DWM). The system compositor is agnostic to the UI thread and doesn’t really care about being on the UI thread or blocking threads. Things happen very quickly at the system compositor level, where everything that is about to be sent to the display screen gets put together. This is also where you get to add additional effects if you want to just before shipping all your visuals to the display.

The visual family lives down at that compositor level where things happen rapidly. The visual family is made up of Visuals, ContainerVisuals and SpriteVisuals. The SpriteVisual class inherits from container visual, and the ContainerVisual class inherits from the base Visual class. There is also a Compositor class which acts as the senior member of the visual family. It quite literally creates visual objects if you need them and also manages the relationship between an application and the system compositor process.

The visual family is a lot of fun. Let’s say your XAML, many levels above, has a Grid object. That Grid will have a member of the visual family assigned to it. In technical parlance, we say that the Grid is backed by a visual. Once you grab hold of this backing visual, you can start to animate it using the composition animation system. If it is a ContainerVisual, then you can add additional visuals to it. Finally, you can also create sprite visuals, using the compositor factory class, in order to add brush effects to your visual using the Windows.UI.Composition effects system.

What’s new for sweet UI in the Windows 10 Creators Update

Several highly requested UI.Composition features have been added in the Creators Update to support fast and fluid UI as well as the Fluent Design System, for instance:

  • SVG support
  • Normal and Virtual Surfaces
  • Hover Interactions
  • Implicit Show and Hide
  • Expression Helpers
  • Offset stomping fix

At first these can seem like small disconnected improvements. Brought together, however, they will make creating beautiful UI both faster and easier.

XAML support for static SVG files

Vector images are often better for icons and logos because they can be resized without losing image quality. Before the Windows 10 Creators Update, however, vector graphics were not supported in XAML and working with iconography in UWP typically involved multiple versions of every image to adapt for multiple DPIs.  Now that that problem is solved, not only does XAML support static SVG files, but they also work with the Composition APIs.

Normal and virtual surfaces

The CompositionDrawingSurface has been a core component of the Composition APIs since the beginning, facilitating interop between XAML and Direct2D or Direct3D. The Creators Update is introducing the CompositionVirtualDrawingSurface for situations where only a portion of the content needs to be shown to the user at any given time. It basically bridges the concepts of graphics culling in video games and the development of infinite lists in desktop enterprise apps.

Independent hover interactions off the UI thread

One of the most powerful things about the Composition APIs is that they allow effects and animations to run independently of your main UI thread at 60 frames per second. With the Creators Update, this feature will also apply to hover animations in order to light up the many pointer activated effects that are a major part of fluent design.

There is also a subtle computer etiquette benefit to this new feature. Have you ever watched a busy animation play while your app’s UI was hanging and tried to move your mouse around in circles to try to make the animation go faster, but it has no effect? That is now a thing of the past.

Implicit show and hide

If you look at the code behind any UWP app, you will likely find that a large portion of UI code is devoted to setting visibility properties on UIElements in order to alternatively hide and show content. With this understanding, the Composition APIs now allow you to associate animations with your visual elements that are implicitly triggered when you hide or show them.

ElementCompositionPreview.SetImplicitShowAnimation(MainContent, mainContentShowAnimations);
ElementCompositionPreview.SetImplicitHideAnimation(MainContent, mainContentExitAnimation);

Implicit hide and show animations allow you to continue using this basic UI metaphor while also making it easier to create elegant visuals around them.

Expression helpers

Expression animations provide a way to create mathematical relationships between composition objects that can then be used to drive animations. The results of applying expression animations can often be breathtaking.

One piece of feedback we received about how we implemented expression animations is that it depends heavily on long strings of text like the following:

rotationAnimation.Expression = "ACos( ( (A.Offset.X * B.Offset.X) + (A.Offset.Y*B.Offset.Y) + (A.Offset.Z * B.Offset.Z) ) / ( Length(A.Offset) *  Length(B.Offset) ) )";
lineVisual.StartAnimation("RotationAngle", rotationAnimation);

The phrase “magic number” may even have been raised with respect to this. Just in time for the Creators Update, the Expression Builder Library is being introduced to provide you with type safety, IntelliSense and autocompletion as you create your own amazing expression animations.

Translation property

In earlier versions of the Composition APIs, there was a complication in the way UIElement properties were shared between the XAML layer and the Visual Layer that could cause the actual position of the visual to be overwritten or “stomped” in response to layout changes. While there was a workaround previously, there is now an actual fix with the new translation property. To prevent offset stomping, you now just need to enable the new Translation property through the ElementCompositionPreview class.

ElementCompositionPreview.SetIsTranslationEnabled(Rectangle1, true);

This is one of those issues that, if you’ve run into it before, you will feel a slight sense of relief. Just add a mental bookmark for yourself about the Translation property until you need to use it.

The sample gallery

The best way to deep dive into Windows.UI.Composition is by pulling down the sample code that the Composition team created and published to Github. The Windows UI Dev Labs samples, as they’re called, are extensive and visually rich. The samples extend from simple photo effects to complex parallax animations on XAML controls.

Don’t hesitate. It’s hard to really grasp the magnitude of the visual capabilities you are getting with Windows.UI.Composition until you see for yourself all that it empowers you to do.

Wrapping up

In addition to diving into the sample gallery on Github, which is highly recommended, you can also learn more about Windows Composition through the following articles, videos and blog posts.

Using color fonts for beautiful text and icons

In this post, we’ll introduce you to a text technology called color fonts. We’ll discuss what color fonts are, when they can be useful and how to use them in your Windows 10 apps.

What are color fonts?

Color fonts, also referred to as “multicolor fonts” or “chromatic fonts,” are a relatively new font technology that allows font designers to use multiple colors within each glyph of the font. Color fonts allow apps and websites to draw multicolored text with less code and more robust operating system support than ad-hoc techniques implemented above the text stack.

Most fonts for reading and writing—the fonts you are probably most familiar with—are not color fonts. These fonts define only the shape of the glyphs they contain, either with vector outlines or monochromatic bitmaps. At draw time, a text renderer fills the glyph shape using a single color (the “font color”) specified by the app or document being rendered.

Color fonts, on the other hand, contain color information in addition to shape information. Some approaches even allow fonts to include multiple color palettes, giving the font artistic flexibility. Color fonts typically include fallback information for platforms that do not support color fonts or for scenarios in which color functionality has been disabled. In those situations, color fonts are rendered as normal monochromatic fonts.

One color font you may be familiar with is Segoe UI Emoji—the default font used in Windows to display emoji. Below, you can see an example of a glyph from Segoe UI Emoji rendered in monochrome (left) and in color (right).

Why use color fonts?

Now that you know what color fonts are, let’s talk about how they can be useful.

Color fonts were originally designed to enable multicolored emoji in text communication scenarios. They excel at that task, but they are useful for other scenarios as well. Color fonts offer a way to implement rich text effects with the simplicity and functionality of regular fonts. To apps and the operating system, text rendered in a color font is the same as any other text: It can be copied and pasted, parsed by accessibility tools and so on.

Color fonts are a better alternative to raster graphics for rich text scenarios like website headers or document section titles. Although raster graphics are commonly used in these scenarios, they do not scale well to all display sizes, nor do they provide the same accessibility features as real text. If you find yourself frequently generating raster images of text from multicolored artwork, consider using a color font instead.

Color fonts can also be used for your app’s iconography. Some app developers prefer using icon fonts to standalone image files, due to the convenience and layout functionality offered by fonts. With color fonts, you can pack rich, scalable, full-color icons into a single icon font.

(Note: Starting in Windows 10 Creators Update, you can also achieve scalable vector iconography by using standalone SVG images directly in your XAML app. For more information, see Vector iconography: Using SVG images in your app.)

What kinds of color fonts does Windows support?

The OpenType specification defines several ways to embed color information in a font. Starting in Windows 10 Anniversary Update, Windows supports all of these approaches. The different approaches are summarized below.

Vector-based color fonts define glyph shapes using mathematical curves and lines. They may use the traditional font outline syntax coupled with color palettes (via OpenType’s ‘COLR’ and ‘CPAL’ tables), or they may use embedded SVG assets (via OpenType’s ‘SVG ’ table). These formats excel at representing most iconography compactly, and as vectors, they offer infinite scalability.

Bitmap-based color fonts define glyph shapes using embedded raster graphics, such as PNG images. They may use OpenType’s ‘CBDT’ and ‘CBLC’ tables, or they may use OpenType’s ‘sbix’ table. This approach makes it straightforward to control every pixel of a glyph’s shape and provide photorealistic content, but designers must provide multiple image sizes to ensure high-quality visual scaling.

Using color fonts

From both the developer’s perspective and the user’s perspective, color fonts are “just fonts.” They can be installed and uninstalled from the system in the same way as monochromatic fonts, they can be included in your app package as a local asset, or they can be used as a web font by your website.

In the XAML and Microsoft Edge frameworks, you can style just about any text with a color font in the same way as a regular font, and by default, your text will be rendered in color. However, if your app operates at a lower level and calls Direct2D APIs (or Win2D APIs) to render its text, then it must explicitly request color font rendering.

Using color fonts in XAML

The XAML platform’s text elements (like TextBlock, TextBox, RichEditBox, and FontIcon) support color fonts by default. Simply style your text with a color font, and the styled text will be rendered in color. The following code example shows how to style a TextBlock with a color font that has been packaged with your app assets. (The same technique applies to regular fonts.)

<TextBlock FontFamily="Assets/MyColorFont.otf#MyFontFamilyName">Here is some text.</TextBlock>

Applying a color font to a XAML TextBlock

The FontFamily property points to the relative location of a font file that has been added to the app package. Since a single font file may include multiple font families, you also need to specify the desired font family using the hash syntax illustrated above.

If you never want your XAML text element to render multicolor text, set its IsColorFontEnabled property to false. For example, you may choose to have your app render monochromatic text when accessibility features are enabled.

Using color fonts in Microsoft Edge

As with XAML, Edge supports rendering color fonts by default in websites and web apps, including the XAML WebView control. Simply use HTML and CSS to style your text with a color font, and the styled text will be rendered in color.

Using color fonts in Direct2D

In contrast to the UI frameworks, the lower-level graphics APIs, such as Direct2D and DirectWrite, do not render color glyphs by default. This is to avoid unexpected behavior changes in text-rendering apps that were designed prior to color font support.

If your app renders text with Direct2D’s DrawText and DrawTextLayout APIs, you must “opt in” to color glyph rendering. To do so, pass the D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT flag to the relevant drawing method. The following code example shows how to call Direct2D’s DrawText method to render a string in a color font:

// 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
); 

Drawing multicolored text with Direct2D’s DrawText method

Using color fonts in Win2D

Like Direct2D, Win2D’s text drawing APIs do not render color glyphs by default.

To opt in to color glyph rendering with Win2D, set the EnableColorFont options flag in the text format object your app passes to the text drawing method. The following code example shows how to render a string in a color font using 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
);

Drawing multicolored text with Win2D’s DrawText method

Building OpenType SVG color fonts

Color fonts are a relatively recent development in font technology, so support among font-building tools is still in its early stages. Not all types of color font are supported by all font tools, but support continues to improve as color fonts gain popularity.

Building a font from scratch is a complex process, and it’s more than we can cover in this blog post. But color fonts aren’t just for professional type designers—if you’re an app or web designer with a monochromatic icon font, and you’d like to upgrade it to a color font, we’ve developed a small tool to help make the process easier: the OpenType SVG Font Editor.

This app lets you take an existing font and add color by embedding your own SVG artwork for each glyph using a simple drag-and-drop interface. SVG is a popular vector art format supported by tools like Adobe Illustrator and Inkscape. On platforms that support OpenType SVG fonts (like Windows apps, Edge and Firefox), the color glyphs are rendered. Other platforms will automatically fall back to the monochromatic glyphs. For more information, please see the OpenType SVG Font Editor’s GitHub page.

The tool was developed by a group of Microsoft interns on the Windows graphics team. We found the tool useful, so we’ve made it available as an open-source project for others to use and improve.

Conclusion

Color fonts are an exciting new technology that unlocks richer text scenarios than were previously possible without sacrificing platform support for accessibility, fallback, scalability, printing and complex font capabilities. For more information, please see the following resources:

Native Ads in Microsoft Advertising SDK

Overview

Native Ads is a component-based ad format that gives publishers the flexibility of placing the individual components of a creative – title, image, logo, description, call to action text – so as to provide the best possible fitment to the look and feel of the rest of the app. This enables the developers to use fonts, colors and animations of their own to stitch unobtrusive user experience in their app while earning high yield from advertising. For advertisers as well, this provides high performing placements since the ads experience is tightly built into the app and users tend to interact a lot more with such sponsored content. According to a report by Mobile Marketing, native in-app ads typically see five times greater engagement than traditional banner ads and, hence, get greater spend from advertisers as well (as per eMarketer and other reports).

Starting now, developers can create Native Ad slots in their apps or games using the latest version of Microsoft Advertising SDK (10.0.4 or later). Microsoft Monetization platform provides developers with the maximum amount of freedom to create their own presentations and is available to a limited set of publishers in a closed pilot. Please contact aiacare@microsoft.com to express your interest to be part of this pilot.

Where Do I Start?

As always, start with downloading the Microsoft Advertising SDK. This provides you the libraries to include Native Ads into your app or game.

Create a “Native” ad unit for your app in ‘Monetize with ads’ section on DevCenter (dev.windows.com). This is the ad unit that you will use in your app when you request for an ad in the code.

How Do I Get Native Ads Integrated into my App?

This section assumes that you are familiar with the Microsoft Advertising SDK for your UWP app or game. If you haven’t played around with this, consider going through the Get Started guide.

To show Native Ads in your app, follow the instructions for project type:

XAML/.NET

HTML/JavaScript

XAML/.NET

This section provides C# examples for your XAML/.NET project. You will need to go through these simple steps to get Native Ads in your code.

Step 1: Setup References

Open your project in Visual Studio. In Reference Manager, expand Universal Windows, click Extensions and then select the check box next to Microsoft Advertising SDK for XAML.

In appropriate code file in your app (for example, in MainPage.xaml.cs), add the following namespace reference.

using Microsoft.Advertising.WinRT.UI;

Step 2: Setting up Native Ads Manager

In an appropriate location in your app (for example in MainPage or some other page), declare a NativeAdsManager object and string fields that represent the application ID and ad unit ID for your Native Ad. The following code example assigns the myAppId and myAdUnitId fields to the test values for Native Ads provided in Test Mode values. These values are only used for testing; you must replace them with live values from Windows DevCenter before you publish your app.

NativeAdsManager nativeAdsManager = null;
string appId = "d25517cb-12d4-4699-8bdc-52040c712cab";
string adUnitId = "test";

In code that runs on startup, instantiate the NativeAdsManager.

// Ad Events
nativeAdsManager = new NativeAdsManager(appId, adUnitId);

Step 3: Request for an Ad

When you want to show an ad, request for one using the NativeAdsManager and wire up the events.

nativeAdsManager.RequestAd();
nativeAdsManager.AdReady += NativeAd_OnAdReady;
nativeAdsManager.ErrorOccurred += NativeAd_ErrorOccurred;

Step 4: Using components of the Ad to stitch up the experience

Assume you have a XAML page which has various placeholders for Title, Description, Sponsored By, Call To Action of an Ad and a container which contains all these elements. Sample StackPanel containing all the elements.

<StackPanel x:Name="NativeAdContainer" BorderThickness="2" BorderBrush="Azure">
<StackPanel x:Name="IconImageContainer" BorderThickness="2" BorderBrush="Azure" Visibility="Collapsed" >
<Image x:Name="IconImage" />
</StackPanel>   
<TextBox x:Name="TitleBox" Text="The title will go here" Margin="78,0,-78,0"/>
<TextBox x:Name="DescriptionBox" Text="The Description will go here" Visibility="Collapsed" />
<TextBox x:Name="SponsoredBy" Text="The SponsoredBy will go here" Visibility="Collapsed" />
<StackPanel x:Name="MainImageContainer" BorderThickness="2" BorderBrush="Azure" Visibility="Collapsed">
<Image x:Name="MainImage" Margin="0,8,0,4" />
</StackPanel>
<Button x:Name="CallToAction" Margin="0,8,0,4" Visibility="Collapsed" />
</StackPanel>

Based on components of the creative that you want to stitch up in your app, your code may differ. Here is a sample OnAdReady event listener where Title, Description, CallToAction and Image is being used.

void NativeAd_OnAdReady(object sender, object e)
{
NativeAd nativeAd = (NativeAd)e;
TitleBox.Text = nativeAd.Title;
//if description is not null show description textbox
var description = nativeAd.Description;
if (!string.IsNullOrEmpty(description))
{
DescriptionBox.Text = nativeAd.Description;
DescriptionBox.Visibility = Visibility.Visible;
}
//if sponsoredBy is not null show sponsoredBy textbox
var sponsoredBy = nativeAd.SponsoredBy;
if (!string.IsNullOrEmpty(sponsoredBy))
{
SponsoredBy.Text = sponsoredBy;
SponsoredBy.Visibility = Visibility.Visible;
}
//if CallToAction is not null update Button
var callToAction = nativeAd.CallToAction;
if (!string.IsNullOrEmpty(callToAction))
{
CallToAction.Content = callToAction;
CallToAction.Visibility = Visibility.Visible;
}
// Assets consists further information about Ad
var assets = nativeAd.AdditionalAssets;
// Loading images
var icon = nativeAd.IconImage;
if (icon != null)
{
var bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri(nativeAd.IconImage.Url);
IconImage.Source = bitmapImage;
// Best view when using the Height and Width of the image given
IconImage.Height = nativeAd.IconImage.Height;
IconImage.Width = nativeAd.IconImage.Width;
IconImageContainer.Visibility = Visibility.Visible;
}
// There might be multiple main images sent by the server
var mainImages = nativeAd.MainImages;
if (mainImages.Count > 0)
{
var mainImage = mainImages[0];
var bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri(mainImage.Url);
MainImage.Source = bitmapImage;
// Best view when using the Height and Width of the image given
MainImage.Height = mainImage.Height;
MainImage.Width = mainImage.Width;
MainImageContainer.Visibility = Visibility.Visible;
}
// It is required to show the AdIcon in your container
NativeAdContainer.Children.Add(nativeAd.AdIcon);
// Register any xaml framework element for clicks/impressions
nativeAd.RegisterAdContainer(NativeAdContainer);

P.S: The developer is required to “Register” the XAML ad container (any framework Element) with the Native Ads object. This is required for handling impressions and click tracking and is critical for ad earnings. Failure to do so may result in ad-units and advertising payouts being blocked by Microsoft.

HTML/JavaScript

More details on the HTML feature will be coming soon! Please reach out to us (aiacare@microsoft.com) if your apps are in HTML/JS and you need this feature.

Guidelines

Even though the developer has complete control over how to create the ad experience and which components of the creative is displayed to the user, the advertiser’s creative should get its due message out to the user. There is a fine balance that needs to be achieved to reap maximum value from the Native Ad.

Here are some guidelines to ensure the balance.

Required to Show

There are two advertiser assets that must always be shown to the user in your Native Ad design. Failing to include any of these could result in low performance of your ad unit and eventual low (or no) yield. These assets are:

  • Ad Title
  • Either Distinguishable ad icon (This Ad Icon is sent as part of NativeAd object – property named AdIcon) or Sponsored By or texts such as ‘Sponsored’, ‘Promoted’, ‘Recommended’

Not following these guidelines may result in the removal of the adUnits from the advertising system.

Ad Experience

Your Native Ad should be clearly delineated from the rest of your content and have space around it to prevent accidental clicks. Use border, background or some other treatment to separate the ad content. Always remember, getting user to accidentally click on the ad is not beneficial in the longer term for your ads based revenue and for end user experience.

You should always show the distinguishable “Ad” icon in the ad view. Whenever possible, show the “Sponsored By” field to clearly call out that the content is an ad and provided by an advertiser.

Text Display Requirements

Native Ads should always have the Title displayed. Provide enough space to display at least 25 characters of the title. If the title is longer, ensure to replace the additional text with an ellipsis.

Ensure that the Call-to-Action (CTA) is separated out from the rest of the promotional text from the advertiser.

If you choose the rest of the promotional text (Description) from the ad response, provide space to display at least 75 characters of the same. It’s best to use animations to show the full content of the ad description.

Call-to-Action

Native Ads should always have the CTA displayed to the user as something clickable like a button or hyperlink.

CTA string should always be displayed in its entirety as it is a critical component of the advertiser’s creative.

Learn and Optimize

It is recommended that different ad units are created and used for each different placement of Native Ads in the app. This enables reporting and learning for each placement which then can be used for optimizing each placement separately till optimal performance is achieved.

In case of any further queries, please reach out to aiacare@microsoft.com and we’ll be glad to help you out.

Introducing XAML Standard and .NET Standard 2.0

XAML Standard

We are pleased to announce XAML Standard, which is a standards-based effort to unify XAML dialects across XAML based technologies such as UWP and Xamarin.Forms.

XAML Standard is a specification that defines a standard XAML vocabulary. With that vocabulary, frameworks that support XAML Standard can share common XAML-based UI definitions. The goal is for the first version, XAML Standard 1.0, to be available later this year.

Post-specification plans include support of XAML standard in Xamarin.Forms and UWP. You can continue developing your UWP and Xamarin.Forms apps as you do today. When XAML Standard support is enabled, you will be able to reuse and share between the frameworks and expand into more platforms.

To visualize what this support would look like, here’s a side-by-side comparison between today’s XAML in Xamarin.Forms and in UWP:

In the above example – once XAML Standard is supported by Xamarin.Forms, you can use <TextBlock /> and have it supported in a Xamarin.Forms app targeting iOS and Android instead of needing to know and use <Label /> as shown above. In addition to a TextBlock, here are some of the currently proposed items for standardization.

We are at the beginning of a journey that makes it easy for you to reuse your XAML source files between some simple Xamarin.Forms and UWP views. For example – a Settings.xaml page, where you typically have some text, toggle switches and some buttons. You’d only need to design and create one XAML file to describe this UI and that can be used everywhere.

Nothing changes for existing developers – you can continue to use the same APIs you have always used in both frameworks. XAML Standard will help you reuse/share any common UI code that you wish to share between end points.

The XAML Standard v1 draft spec is being defined in the open, we encourage you to start a discussion or give us direct feedback in the GitHub repo here.

.NET Standard 2.0

We are also happy to announce .NET Standard 2.0! .NET Standard is the set of APIs which work in all .NET implementations. A good way to think about it is how HTML5 is today. There are many different browsers which implement HTML parsing and rendering, but the HTML standard is the common glue that holds the web together and allows for interoperability.

.NET Standard was introduced in June of 2016 to bring consistency to the .NET ecosystem. With the .NET Framework, Xamarin & Mono, .NET Core and then UWP, there were many different implementations of .NET and it was very difficult to write code or a library that could work across all of them. Using .NET Standard, and the tooling in Visual Studio, makes it possible to build libraries and NuGet packages that work literally everywhere .NET runs.

The feedback we received on after .NET Standard’s introduction last year was generally phrased as “We like the direction you’re going in, but the set of APIs isn’t large enough to be useful.” The goal with .NET Standard 2.0 is to respond to that feedback and add a large set of .NET’s “greatest hits” into .NET Standard. To do this, we looked at the intersection of APIs between the .NET Framework and Mono. This lead to the 2.0 definition including over 20,000 new APIs and those APIs enable the top 70% of existing NuGet packages to work.

With the addition of .NET Standard 2.0 support for UWP with the Fall Creators Update, .NET developers will be able to share code across all Windows 10 devices, in the cloud and through the rest of the .NET ecosystem. This will also make it easier to reuse existing WinForms and WPF code as many of the most frequently used APIs like DataSet/DataTable, and popularly requested APIs like SqlClient, are now part of .NET Standard 2.0.

You can learn more about .NET Standard here.

Forming the shape of the future

We invite you, the .NET community, to join the discussion and help shape the future of XAML Standard and .NET Standard. You can provide your feedback, both suggestions and issues, at the following locations; .NET Standard on Github and XAML Standard on Github.

Resources:

Windows is home for developers with Windows 10 Fall Creators Update

It was an amazing day today at Build 2017. With the Windows 10 Fall Creators Update, we continue to grow the Windows platform so that Windows is home for all developers. As I reflect on the day, I want to highlight how Windows and VS are creating the best end-to-end development process and enabling developers not only to maximize their code reuse, but also to create experiences that are engaging, powered by intelligence and connected across devices.

.NET Development Improvements

With today’s announcement that .NET Standard 2.0 for UWP and XAML Standard will be coming later this year, .NET is now the most complete cross-platform development framework.  This combination, along with Visual Studio, makes it easier than ever before to write fully native and full-featured apps for all your target platforms in C#, including Windows, iOS, Android, Linux and, of course, the cloud!

.NET Standard 2.0 and XAML Standard

.NET Standard 2.0 is expanding the UWP surface by over 20,000 APIs to make sure your code is more interoperable than ever. We also know that about 70% of NuGet packages are API compatible with .NET Standard 2.0. Your most requested APIs for UWP, such as Reflection and SqlClient, will be fully accessible to you from the Windows 10 Fall Creators Update. In addition, XAML Standard allows you to keep much of your UI code common and still maintain a native look and feel across Windows, iOS, and Android. Your experience on Windows will automatically provide Fluent UI and all input interaction models for free.  Our goal is to unify our XAML dialects across UWP XAML and Xamarin Forms, making cross platform development easier than ever. We encourage you to give us direct feedback in the GitHub repo – http://aka.ms/xamlstandard.

Microsoft Graph and Creating Connected Experiences

We are connecting Windows to the Microsoft Graph, enabling amazing new Windows shell features such as Timeline, Cloud Clipboard, and Pick up Where I Left Off (PWILO). And you can use the same APIs to enhance your own applications too.

Devices in the Microsoft Graph

Using the Microsoft Graph API, you can now access your all of your users’ devices, enabling you to break down boundaries between devices. You can call apps and app services on each device, allowing for cross-device coordination of experiences.

Activities in the Microsoft Graph

Starting with the Windows Fall Creators Update, we are releasing the UserActivity APIs, enabling you to drive engagement in your apps, across devices and platforms. A UserActivity is the unit of user engagement in Windows, and consists of three components: a deep-link, visuals, and metadata. When a UserActivity session is created by an application, it accrues engagement records as users interact with the application.

You can download the ‘Project Rome’ SDK for Android and iOS over at GitHub.

Adaptive Cards

Activities in the Microsoft Graph provide a great way to store and track your activity across all your devices. Being able to visualize those activities is a critical part of the experience your customers will expect. Adaptive cards provide developers a visualization, using an open format, that works across multiple applications and experiences. The visualization for all the activities in the Timeline is provided by attaching an adaptive card to the activity using the Project Rome APIs. Adaptive cards are based on a JSON schema that enables app/content providers to have a rich visualization surface that can be represented in numerous experiences. The experience that hosts the card has control over exactly how the card is represented so that the card feels like a natural extension of the UI of the host app.

You can find all the latest info on adaptive cards at http://adaptivecards.io

Microsoft Fluent Design System

With the Fluent design system, we are taking a significant step forward in re-envisioning the way we develop the next generation of apps and experiences that translate seamlessly and naturally across devices. Our world is increasingly being driven by multiple devices – phones, tablets, PCs, game consoles, mixed reality headsets, etc. We don’t use just one device, we use many, and we’re constantly expressing ourselves by creating and consuming content across them. Each of these devices behaves differently and fulfills different needs. Some rely on touch and ink, some read our voices and gestures. It’s because of this world we live in today that Microsoft is making a big investment in our design system.

Fluent Design enables the creation of more expressive and engaging experiences that work continuously across devices—from large screens, to small screens, to no screen—all in a way that will drive higher engagement and love for your apps.  There are 5 fundamentals to Fluid design system – light, depth, motion, materials and scale. All of these join together in concert to give us the capabilities to build immersive, rich apps that scale continuously across the device ecosystem:

  • Light – Light helps enable the ability to draw someone’s attention, or more clearly guide them through their navigations
  • Depth – Depth helps us understand how things relate to each other when they’re within a more layered, physical environment
  • Motion – Motion is a powerful way to establish context and imply relationships between content in natural, subtle and delightful ways
  • Material – Material can help take full advantage of the available screen space to celebrate content. It can also bring a sense of lightweight, ephemeral user experience
  • Scale – Scale allows us expand our toolbox for more dimensions, inviting innovation across new device form factors

You can learn and get more familiar with Fluent at http://dev.windows.com/design.

Test, Deploy and Manage More Quickly

Testing and a secure deployment system is critical, so I’m particularly excited by Visual Studio Mobile Center, which allows you to have a CI/CD pipeline for UWP (in addition to iOS and Android) and integrates with our Store to make publication and distribution of your apps a breeze! We are also adding Windows devices to our test cloud, to enable developers to see how the app will look on the various devices and to help find issues before publishing.

Windows is the ultimate dev box

Our ambition is to make Windows the best dev box – for any dev, writing any app, targeting any platform.

Last year at build, I announced that bash was coming to Windows through the Windows Subsystem for Linux. We heard your feedback that deployment was a bit challenging, so we are streamlining deployment to come directly from the Windows store. In addition, we are working with Suse and Fedora Linux to enable multiple Linux distributions to run simultaneously. On top of these additional distros, there are loads of improvements under the hood, such as USB device communications support (e.g. deploy your Raspberry Pi bits via USB from Bash), USB drive mounting (for FAT32/exFAT/NTFS formatted USB drives), network share mounting, improved network configuration sync between Windows and Linux, and deeper syscalls to improve the breadth and depth of WSL’s compatibility with Linux apps.

In addition, there’s now the Xamarin Live Player which allows you to deploy, run, test and debug iOS apps directly from a Windows PC. Never before have you been able to build for so many platforms on one dev box!

Getting started now

Finally, I love seeing what our developer community can create, and the amazing experiences you are bringing to Windows. Just a couple of days ago I had the opportunity to celebrate with some of you our first windows developer awards:

Thank you, and I look forward to trying your applications soon.

Windows 10 SDK Preview Build 16190 Released

Today, we released a new Windows 10 Preview Build of the SDK to be used in conjunction with Windows 10 Insider Preview (Build 16190 or greater). The Preview SDK Build 16190 contains bug fixes and under development changes to the API surface area.

The Preview SDK can be downloaded from developer section on Windows Insider.

For feedback and updates to the known issues, please see the developer forum. For new feature requests, head over to our Windows Platform UserVoice.

Things to note:

  • This build works in conjunction with previously released SDKs and Visual Studio 2017. You can install this SDK and still also continue to submit your apps that target Windows 10 Creators build or earlier to the store.
  • The Windows SDK will now formally only be supported by Visual Studio 2017 and greater. You can download the Visual Studio 2017 here.

What’s New

This release of the Windows 10 SDK Preview Build, we have introduced the following new controls: NavigationView, TreeView, RatingsControl, ColorPicker, ParallaxView and PersonPicture to the Windows.UI.XAML.Controls namespace. It also adds brushes for Acrylic and Reveal, part of the Fluent Design System. See also the new XAML Controls Gallery in the Windows Universal Samples collection.

See API Updates and Additions for additional APIs.

Known Issue

  • Failed to compile WRL projects due to missing WindowsContracts.h

When building WRL projects, your code may fail to compile due to a missing file: WindowsContracts.h. This will be addressed in the next update. To work around this, create an empty header file: WindowsContracts.H and include it in your include Search path.

Breaking Changes

  • WinRT type header generation moving from MIDL to MIDLRT

Header generation for WinRT types is moving from being generated by the MIDL tool to the MIDLRT tool. This change will enable significant performance enhancements and will also enable a number of new features.

The most common issue developers are likely to encounter is the addition of deprecation support to the generated WinRT headers. With this change, if you consume a deprecated API, the C++ compiler will now generate a warning indicating that your code is accessing a deprecated type.

Consider the following when evaluating how your code will be impacted:

  1. The WinMDIDL tool used to emit cpp_quote directives to work around a MIDL header generation limitation. Those cpp_quote directives are incompatible with the new header generation logic and need to be removed (or the IDL file needs to be regenerated).
  2. WinRT types that are marked as [deprecated] are now also marked as [[deprecated]] in the generated C++ headers. This means that you may encounter C4996 warnings indicating that you are accessing a deprecated type. To resolve this issue, you can define DISABLE_WINRT_DEPRECATION in the preprocessor definitions for your project to ignore the deprecations.
  • Windows Runtime enumeration definitions are now compliant with C++ standard

To further align Visual C++ with the ISO standard for C++, enumerations for Windows Runtime types are now standards-compliant. If you develop software with the Windows 10 SDK, this change might affect you.

Specifically, variables in operations with enumerations that are marked as flags must be cast as unsigned integers. An operation that uses a signed integer with an enumeration constant will result in a compiler error, because enumeration constants are now unsigned integers. The affected enumerations are flags enumerations supplied by the SDK and enumerations that you cast with the [flags] attribute.

GamePadReading-&amp;gt;get_Buttons(&amp;amp;NewButtonMask);
for(int index=0;index&amp;lt;32;index++)
{
int bit = 1 &amp;lt;&amp;lt; index;
if( ((NewButtonMask &amp;amp; bit) == bit) &amp;amp;&amp;amp; ((CurrentButtonMask &amp;amp; bit) != bit))
{
JustPressedButtonMask |= (GamepadButtons)bit;

However, because this code relies on GamepadButtons, which has the attribute System.FlagsAttribute, bit must instead be cast as unsigned:

unsigned int bit = 1 &amp;lt;&amp;lt; index;

API Updates and Additions

When targeting new APIs, consider writing your app to be adaptive in order to run correctly on the widest number of Windows 10 devices. Please see Dynamically detecting features with API contracts (10 by 10) for more information.

namespace Windows.ApplicationModel.Activation {
public enum ActivationKind {
Console = 1019,
PrintWorkflowForegroundTask = 1018,
}
public sealed class ConsoleActivatedEventArgs : IActivatedEventArgs, IConsoleActivatedEventArgs
public interface IConsoleActivatedEventArgs : IActivatedEventArgs
}
namespace Windows.ApplicationModel.Cards {
public static class CardBuilder
public interface ICardBuilderStatics
public interface ICardElement
}
namespace Windows.ApplicationModel.Core {
public static class CoreApplication {
public static IAsyncOperation&amp;lt;RestartResult&amp;gt; RequestRestartAsync(string launchArguments);
public static IAsyncOperation&amp;lt;RestartResult&amp;gt; RequestRestartForUserAsync(User user, string launchArguments);
}
public sealed class CoreApplicationView {
DispatcherQueue DispatcherQueue { get; }
}
public enum RestartResult
}
namespace Windows.ApplicationModel.DataTransfer {
public sealed class DataTransferManager {
public static void ShowShareUI(ShareUIOptions shareOptions);
}
public interface IDataTransferManagerStatics3
public sealed class ShareUIOptions
public enum ShareUITheme
}
namespace Windows.ApplicationModel.DataTransfer.ShareTarget {
public sealed class ShareOperation {
IVectorView&amp;lt;Contact&amp;gt; Contacts { get; }
}
}
namespace Windows.ApplicationModel.Payments {
public sealed class PaymentMediator {
IAsyncOperation&amp;lt;bool&amp;gt; CanMakePaymentAsync(PaymentRequest paymentRequest);
}
}
namespace Windows.ApplicationModel.UserActivities {
public sealed class UserActivity
public sealed class UserActivityChannel
public sealed class UserActivitySession : IClosable
public enum UserActivityState
public sealed class UserActivityVisualElements
}
namespace Windows.ApplicationModel.UserActivities.Core {
public static class CoreUserActivityManager
}
namespace Windows.Devices.Bluetooth {
public sealed class BluetoothDevice : IClosable {
BluetoothDeviceId BluetoothDeviceId { get; }
}
public sealed class BluetoothDeviceId {
public static BluetoothDeviceId FromId(string deviceId);
}
public sealed class BluetoothLEDevice : IClosable {
BluetoothDeviceId BluetoothDeviceId { get; }
}
}
namespace Windows.Devices.Bluetooth.GenericAttributeProfile {
public sealed class GattClientNotificationResult {
ushort BytesSent { get; }
}
}
namespace Windows.Graphics.Printing.PrintTicket {
public sealed class PrintTicketCapabilities
public sealed class PrintTicketFeature
public enum PrintTicketFeatureSelectionType
public sealed class PrintTicketOption
public enum PrintTicketParameterDataType
public sealed class PrintTicketParameterDefinition
public sealed class PrintTicketParameterInitializer
public sealed class PrintTicketValue
public enum PrintTicketValueType
public sealed class WorkflowPrintTicket
public sealed class WorkflowPrintTicketValidationResult
}
namespace Windows.Graphics.Printing.Workflow {
public sealed class PrintWorkflowBackgroundSession
public sealed class PrintWorkflowBackgroundSetupRequestedEventArgs
public sealed class PrintWorkflowConfiguration
public sealed class PrintWorkflowForegroundSession
public sealed class PrintWorkflowForegroundSetupRequestedEventArgs
public sealed class PrintWorkflowObjectModelSourceFileContent
public sealed class PrintWorkflowObjectModelTargetPackage
public enum PrintWorkflowSessionStatus
public sealed class PrintWorkflowSourceContent
public sealed class PrintWorkflowSpoolStreamContent
public sealed class PrintWorkflowStreamTarget
public sealed class PrintWorkflowSubmittedEventArgs
public sealed class PrintWorkflowSubmittedOperation
public enum PrintWorkflowSubmittedStatus
public sealed class PrintWorkflowTarget
public sealed class PrintWorkflowTriggerDetails
public sealed class PrintWorkflowUIActivatedEventArgs : IActivatedEventArgs, IActivatedEventArgsWithUser
public sealed class PrintWorkflowXpsDataAvailableEventArgs
}
namespace Windows.Media.Core {
public sealed class MediaStreamSource : IMediaSource {
bool IsLive { get; set; }
}
public sealed class MseStreamSource : IMediaSource {
IReference&amp;lt;MseTimeRange&amp;gt; LiveSeekableRange { get; set; }
}
}
namespace Windows.Media.Playback {
public sealed class MediaPlaybackSessionBufferingStartedEventArgs
public sealed class MediaPlayer : IClosable {
event TypedEventHandler&amp;lt;MediaPlayer, object&amp;gt; SubtitleFrameChanged;
bool RenderSubtitlesToSurface(IDirect3DSurface destination);
bool RenderSubtitlesToSurface(IDirect3DSurface destination, Rect targetRectangle);
}
}
namespace Windows.Media.Protection.PlayReady {
public enum PlayReadyEncryptionAlgorithm {
Aes128Cbc = 5,
Unspecified = 65535,
}
public enum PlayReadyHardwareDRMFeatures {
Aes128Cbc = 3,
}
}
namespace Windows.Media.SpeechRecognition {
public sealed class SpeechRecognizer : IClosable {
public static IAsyncOperation&amp;lt;bool&amp;gt; TrySetSystemSpeechLanguageAsync(Language speechLanguage);
}
}
namespace Windows.Media.Streaming.Adaptive {
public sealed class AdaptiveMediaSourceDiagnosticAvailableEventArgs {
HResult ExtendedError { get; }
}
public enum AdaptiveMediaSourceDiagnosticType {
FatalMediaSourceError = 8,
}
}
namespace Windows.Security.Authentication.Web.Provider {
public static class WebAccountManager {
public static IAsyncAction InvalidateAppCacheAsync();
public static IAsyncAction InvalidateAppCacheAsync(WebAccount webAccount);
}
}
namespace Windows.Storage {
public sealed class StorageLibrary {
IAsyncOperation&amp;lt;bool&amp;gt; AreFolderSuggestionsAvailableAsync();
}
}
namespace Windows.Storage.CloudStorage {
public sealed class CloudDataChangedEventArgs
public sealed class CloudDataManager
public enum CloudDataSerializationFormat
public sealed class CloudDataSnapshot
public sealed class CloudDataStore
public sealed class CloudDataTypeSchema
}
namespace Windows.Storage.Provider {
public struct CustomStateDefinition
public enum HydrationPolicy
public enum NavPaneLocation
public enum PopulationPolicy
public enum ProtectionMode
public sealed class SyncRootInformation
public sealed class SyncRootManager
}
namespace Windows.System {
public sealed class AppDiagnosticInfo {
ResourceGroupInfoWatcher CreateResourceGroupWatcher();
public static AppDiagnosticInfoWatcher CreateWatcher();
IVector&amp;lt;ResourceGroupInfo&amp;gt; GetResourceGroups();
public static IAsyncOperation&amp;lt;IVector&amp;lt;AppDiagnosticInfo&amp;gt;&amp;gt; RequestInfoForAppAsync(string aumid);
public static IAsyncOperation&amp;lt;IVector&amp;lt;AppDiagnosticInfo&amp;gt;&amp;gt; RequestInfoForPackageAsync(string packageFamilyName);
public static IAsyncOperation&amp;lt;DiagnosticPermission&amp;gt; RequestPermissionAsync();
}
public sealed class AppDiagnosticInfoWatcher
public sealed class AppDiagnosticInfoWatcherEventArgs
public enum AppDiagnosticInfoWatcherStatus
public sealed class BackgroundTaskReport
public enum DiagnosticPermission
public sealed class DispatcherQueue
public sealed class DispatcherQueueController
public delegate void DispatcherQueueHandler();
public enum DispatcherQueuePriority
public sealed class DispatcherQueueTimer
public enum EnergyQuotaState
public enum ExecutionState
public sealed class MemoryReport
public sealed class ResourceGroupInfo
public sealed class ResourceGroupInfoWatcher
public sealed class ResourceGroupInfoWatcherEventArgs
public sealed class ResourceGroupInfoWatcherExecutionStateChangedEventArgs
public enum ResourceGroupInfoWatcherStatus
public sealed class StateReport
}
namespace Windows.System.Diagnostics {
public sealed class ProcessDiagnosticInfo {
bool IsPackaged { get; }
IVector&amp;lt;AppDiagnosticInfo&amp;gt; TryGetAppDiagnosticInfo();
public static ProcessDiagnosticInfo TryGetForProcessId(uint processId);
}
}
namespace Windows.System.UserProfile {
public static class GlobalizationPreferences {
public static bool TrySetHomeGeographicRegion(string region);
public static bool TrySetLanguages(IIterable&amp;lt;string&amp;gt; languageTags);
}
}
namespace Windows.UI.Composition {
public sealed class AmbientLight : CompositionLight {
float Intensity { get; set; }
}
public sealed class CompositionAnchor : CompositionObject
public class CompositionAnimation : CompositionObject, ICompositionAnimationBase {
ExpressionProperties ExpressionProperties { get; }
}
public enum CompositionDropShadowSourcePolicy
public class CompositionIsland : CompositionObject
public sealed class CompositionIslandEventArgs
public enum CompositionIslandVisibilityHints
public class CompositionLight : CompositionObject {
VisualUnorderedCollection Exclusions { get; }
}
public sealed class Compositor : IClosable {
VisualIslandSite CreateVisualIslandSite();
VisualTreeIsland CreateVisualTreeIsland();
}
public sealed class DistantLight : CompositionLight {
float Intensity { get; set; }
}
public sealed class DropShadow : CompositionShadow {
CompositionDropShadowSourcePolicy SourcePolicy { get; set; }
}
public sealed class ExpressionProperties : CompositionObject, IIterable&amp;lt;IKeyValuePair&amp;lt;string, string&amp;gt;&amp;gt;, IMap&amp;lt;string, string&amp;gt;
public sealed class FramedIslandSite : CompositionObject, ICompositionIslandSite
public sealed class HwndIslandSite : CompositionObject, ICompositionIslandSite
public interface ICompositionIslandSite
public interface IVisual3
public sealed class PointLight : CompositionLight {
float Intensity { get; set; }
}
public sealed class PopupIslandSite : CompositionObject, ICompositionIslandSite
public sealed class SpotLight : CompositionLight {
float InnerConeIntensity { get; set; }
float OuterConeIntensity { get; set; }
}
public class Visual : CompositionObject, IVisual3 {
CompositionAnchor CreateAnchor();
}
public sealed class VisualIslandSite : CompositionObject, ICompositionIslandSite
public sealed class VisualIslandSiteEventArgs
public sealed class VisualTreeIsland : CompositionIsland
}
namespace Windows.UI.Composition.Effects {
public sealed class SceneLightingEffect : IGraphicsEffect, IGraphicsEffectSource {
SceneLightingEffectBrdfType BrdfType { get; set; }
}
public enum SceneLightingEffectBrdfType
}
namespace Windows.UI.Core {
public sealed class CoreWindow : ICorePointerRedirector, ICoreWindow {
DispatcherQueue DispatcherQueue { get; }
}
}
namespace Windows.UI.Input.Spatial {
public sealed class SpatialInteractionSource {
SpatialInteractionSourceHandedness Handedness { get; }
}
public enum SpatialInteractionSourceHandedness
}
namespace Windows.UI.Text.Core {
public enum CoreTextInputScope {
Digits = 28,
PinAlphanumeric = 65,
PinNumeric = 64,
}
}
namespace Windows.UI.ViewManagement {
public sealed class CoreInputView
public sealed class CoreInputViewFrameworkOccludingInputViewsChangedEventArgs
public sealed class CoreInputViewOccludingInputViewsChangedEventArgs
public struct CoreOccludingInputView
public sealed class CoreOccludingInputViews : IIterable&amp;lt;CoreOccludingInputView&amp;gt;
public enum CoreOccludingInputViewType
public sealed class ViewModePreferences {
Size CustomMaxSize { get; set; }
Size CustomMinSize { get; set; }
}
}
namespace Windows.UI.WebUI {
public sealed class WebUIConsoleActivatedEventArgs : IActivatedEventArgs, IActivatedEventArgsDeferral, IConsoleActivatedEventArgs
}
namespace Windows.UI.Xaml {
public class UIElement : DependencyObject {
public static RoutedEvent PreviewKeyDownEvent { get; }
public static RoutedEvent PreviewKeyUpEvent { get; }
event KeyEventHandler PreviewKeyDown;
event KeyEventHandler PreviewKeyUp;
}
}
namespace Windows.UI.Xaml.Controls {
public sealed class ColorChangedEventArgs
public enum ColorChannel
public class ColorPicker : Control
public class ColorPickerSlider : Slider
public sealed class ColorPickerSliderAutomationPeer : SliderAutomationPeer
public class ColorSpectrum : Control
public sealed class ColorSpectrumAutomationPeer : FrameworkElementAutomationPeer
public enum ColorSpectrumComponents
public enum ColorSpectrumShape
public class Control : FrameworkElement {
virtual void OnPreviewKeyDown(KeyRoutedEventArgs e);
virtual void OnPreviewKeyUp(KeyRoutedEventArgs e);
}
public sealed class DisplayModeChangedEventArgs
public struct HsvColor
public interface IRefreshInfoProvider
public class NavigationMenuItem : NavigationMenuItemBase
public sealed class NavigationMenuItemAutomationPeer : FrameworkElementAutomationPeer
public class NavigationMenuItemBase : Control
public sealed class NavigationMenuItemBaseObservableCollection : IIterable&amp;lt;NavigationMenuItemBase&amp;gt;, IObservableVector&amp;lt;NavigationMenuItemBase&amp;gt;, IVector&amp;lt;NavigationMenuItemBase&amp;gt;
public class NavigationMenuItemSeparator : NavigationMenuItemBase
public class NavigationView : ContentControl
public enum NavigationViewDisplayMode
public enum ParallaxSourceOffsetKind
public class ParallaxView : FrameworkElement
public class PersonPicture : Control
public sealed class PersonPictureAutomationPeer : FrameworkElementAutomationPeer
public class RatingsControl : Control
public sealed class RatingsControlAutomationPeer : FrameworkElementAutomationPeer
public class RefreshContainer : ContentControl
public sealed class RefreshInteractionRatioChangedEventArgs
public sealed class RefreshRequestedEventArgs
public sealed class RefreshStatusChangedEventArgs
public class RefreshVisualizer : Control
public enum RefreshVisualizerOrientation
public enum RefreshVisualizerStatus
public class RevealListViewItemPresenter : ListViewItemPresenter
public enum Symbol {
GlobalNavButton = 59136,
Print = 59209,
Share = 59181,
XboxOneConsole = 59792,
}
public class TreeView : Control
public sealed class TreeViewExpandingEventArgs
public class TreeViewItem : ListViewItem
public sealed class TreeViewItemAutomationPeer : ListViewItemAutomationPeer
public sealed class TreeViewItemClickEventArgs
public class TreeViewList : ListView
public sealed class TreeViewListAutomationPeer : SelectorAutomationPeer
public class TreeViewNode : DependencyObject, IBindableIterable, IBindableObservableVector, IBindableVector
public sealed class XamlBooleanToVisibilityConverter : IValueConverter
public sealed class XamlIntegerToIndentationConverter : IValueConverter
}
namespace Windows.UI.Xaml.Data {
public enum UpdateSourceTrigger {
LostFocus = 3,
}
}
namespace Windows.UI.Xaml.Documents {
public sealed class Hyperlink : Span {
bool IsTabStop { get; set; }
public static DependencyProperty IsTabStopProperty { get; }
int TabIndex { get; set; }
public static DependencyProperty TabIndexProperty { get; }
}
}
namespace Windows.UI.Xaml.Media {
public enum AcrylicBackgroundSource
public class AcrylicBrush : XamlCompositionBrushBase
public class RevealBackgroundBrush : RevealBrush
public class RevealBorderBrush : RevealBrush
public class RevealBrush : XamlCompositionBrushBase
public static class RevealBrushHelper
public enum RevealBrushHelperState
public class XamlAmbientLight : XamlLight
}
namespace Windows.Graphics.Printing3D {
public sealed class Printing3D3MFPackage {
Printing3DPackageCompression Compression { get; set; }
}
public enum Printing3DPackageCompression
}

Announcing UWP Community Toolkit 1.4

The UWP Community Toolkit is on its fourth release today. The previous version was packed with new controls, so we decided to focus on stabilizations and improvements on existing controls and services in version 1.4.

Among the improvements: better accessibility for all controls according to our contribution rules. Now every control can be used with keyboard, mouse and touch inputs. We also ensured that the controls provide enough information for Narrator to make them compatible with screen readers.

We also introduced a new project (and a new NuGet package) called Microsoft.Toolkit.Uwp.DeveloperTools. The goal of this project is to provide support tools for developers. For this first version of the project we started with two controls:

  • FocusTracker: Can be used in your application to display information about the current focused control (name, type, etc.). This is extremely useful when you want to ensure that your application is accessible.
  • AlignmentGrid: Can be used to display a grid, helping you align controls on your pages.

Developer tools are not meant to be deployed with your app, but rather used during development to help improve the overall quality of your app.

Along with the above improvements and stabilizations, we also added new features to this release. Here are a few of the main additions:

  1. Carousel: A new control that presents items in a list, where the selected item is always in the center and other items are flowing ­around it. This reacts not only to the content but also to layout changes, so it can adapt to different form factors automatically. The carousel can be horizontal or vertical.
  2. ViewExtensions: ApplicationViewExtensions, StatusBarExtensions & TitleBarExtensions provide a declarative way of setting AppView, StatusBar & TitleBar properties from XAML.
  3. NetworkHelper: Provides functionality to monitor changes in network connection, and allows users to query for network information without additional lookups.
  4. Saturation: Provides a behavior to selectively saturate a XAML element. We also introduced the CompositionBehaviorBase to ease creation of new composition-based behaviors (Blur now uses this).
  5. Twitter streaming API support: Twitter Service was missing support for Twitter’s streaming service; we added support for live tweets and events.
  6. Search box for Sample App: The new Sample App allows you to search for a sample directly from the main menu.

This is only a partial list of the changes in UWP Community Toolkit 1.4. For a complete overview of what’s new in version 1.4, please read our release note on GitHub.

You can get started by following this tutorial, or preview the latest features by installing the UWP Community Toolkit Sample App from the Windows Store.

As a reminder, the toolkit can be used in any app (across PC, Xbox One, mobile, HoloLens and Surface Hub devices) targeting Windows 10 November Update (10.0.10586) or above. The few features that rely on newer OS updates are clearly marked in the documentation and in the Sample App.

If you would like to contribute, please join us on GitHub!