Tag Archives: Fluent Design

Community Standup with Kevin Gallo

Kevin Gallo will be live on Channel 9 with Seth Juarez on July 26th, 2017 at 9:30am PST. Kevin will be providing updates to the state of the Windows SDK inside Windows 10 Falls Creators Update since everyone last chatted with him at Microsoft Build 2017. As always, we’ll be answering live questions afterwards.

A few of the topics Kevin and Seth will be discussing are the Windows 10 Fall Creators Update SDK, .NET Standard 2.0, Fluent Design, Microsoft Graph with the Activity API and more.

Over time, we’ll hold more frequent community standups to provide additional transparency on what we are building out, and clarity on why we are building them. The community standups will not only be with just Kevin, but the entire Windows development team as well. We’ll be testing different streaming technologies and interaction models to see what works best. We would love feedback on this as well.

Once again, we can’t wait to see you at 9:30am PST on July 26th, 2017 over at https://channel9.msdn.com.

Windows Template Studio 1.2 released!

We’re extremely excited to announce the Windows Template Studio 1.2. What makes this release even more special is we’ve been accepted into the .NET Foundation! We are thrilled to be accepted in.

In this release, our major new feature is adding content into an existing application with Right-click add. We’ve grown up past only File->New 🙂

What’s new:

Full list of adjustments in the 1.2 release, head over to WTS’s Github.

Improvements to the Wizard:

  • Add new content to existing WTS generated projects in your solution window via right-click
    • We will be working toward seeing how we can enable this for non-WTS generated projects
  • Adjusted ordering of templates based on popularity and logical groupings
  • Under the hood, we’ve done a lot of work toward localization and started some accessibility improvements
  • Simplified descriptions
  • Logo adjustment to help at smaller icon sizes

Feature updates:

  • First-time load prompt
  • What’s New prompt

Template improvements:

Process improvements:

  • Added in pull request template
  • Added in Issue template

How to get the update:

There are two paths to update to the newest build:

  • Already installed: Visual Studio should auto update the extension. To force an update, Go to Tools->Extensions and Updates. Then go to Update expander on the left and you should see Windows Template Studio in there and click “Update”
  • Not installed: Head to https://aka.ms/wtsinstall, click “download” and double click the VSIX installer.

What else is cooking for next versions?

We love all the community support and participation. In addition, here are just a few of the things we are currently building out that will in future builds:

  • Fluent design in the templates
  • Project Rome features as options for your project
  • Ink templates
  • Improved Right-click->add support for existing projects
  • Localization in the wizard
  • Full accessibility supported in both wizard and in the templates
  • Visual Basic support

With partnership with the community, we’ve will continue cranking out and iterating new features and functionality.  We’re always looking for additional people to help out and if you’re interested, please head to our GitHub at https://aka.ms/wts. If you have an idea or feature request, please make the request!

.NET Foundation:

We are happy to say that we’ve been accepted into the .NET Foundation. Such great open source projects like .NET Core, Roslyn and UWP Community Toolkit are just a few of the projects there, and now Windows Template Studio will be there as well!

Windows Template Studio 1.2 released!

We’re extremely excited to announce the Windows Template Studio 1.2. What makes this release even more special is we’ve been accepted into the .NET Foundation! We are thrilled to be accepted in.

What’s new:

For the full list of adjustments in the 1.2 release, head over to WTS’s Github.

Improvements to the Wizard:

  • Add new content to existing WTS generated projects in your solution window via right-click
    • We will be working toward seeing how we can enable this for non-WTS generated projects
  • Adjusted ordering of templates based on popularity and logical groupings
  • Under the hood, we’ve done a lot of work toward localization and started some accessibility improvements
  • Simplified descriptions
  • Logo adjustment to help at smaller icon sizes

Feature updates:

  • First-time load prompt
  • What’s New prompt

Template improvements:

Process improvements:

  • Added in pull request template
  • Added in Issue template

How to get the update:

There are two paths to update to the newest build.

  • Already installed: Visual Studio should auto update the extension. To force an update, Go to Tools->Extensions and Updates. Then go to Update expander on the left and you should see Windows Template Studio in there and click “Update.”
  • Not installed: Head to https://aka.ms/wtsinstall, click “download” and double click the VSIX installer.

What else is cooking for next versions?

We love all the community support and participation. In addition, here are just a few of the things we are currently building out that will in future builds:

  • Fluent design in the templates
  • Project Rome features as options for your project
  • Ink templates
  • Improved Right-click->add support for existing projects
  • Localization in the wizard
  • Full accessibility supported in both Wizard and in the templates
  • Visual Basic support

In partnership with the community, we will continue cranking out and iterating new features and functionality.  We’re always looking for additional people to help out and if you’re interested, please head to our GitHub at https://aka.ms/wts. If you have an idea or feature request, please make the request!

In this release, our major new feature is adding content into an existing application with Right-click add. We’ve grown up past only File->New 🙂

.NET Foundation:

We are also happy to say that we’ve been accepted into the .NET Foundation. Great open source projects like .NET Core, Roslyn, UWP Community Toolkit–and now Windows Template Studio–will be as well!

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:

Windows Template Studio 1.1 released!

We’re extremely excited to announce the Windows Template Studio 1.1. In partnership with the community, we’ve been cranking out and iterating new features and functionality. We’re always looking for additional people to help out and if you’re interested, please head to our GitHub at https://aka.ms/wts.

How to get the update:

There are two paths to update to the newest build.

  • Already installed: Visual Studio should auto update the extension. To force an update, Go to Tools->Extensions and Updates.  Then go to Update expander on the left and you should see Windows Template Studio in there and click “Update.”
  • Not installed: Head to https://aka.ms/wtsinstall, click “download” and double click the VSIX installer.

Improvements to the Wizard:

  • Page Reordering
  • The first page doesn’t have to be the Blank page
  • Renaming of pages and background tasks
  • Offline improvements
  • Initial work for supporting localization
  • Code analysis was added

Page updates:

  • Grid page added
  • Chart page added
  • Media/Video page added
  • Web View page has been enhanced

Feature updates:

  • Store SDK Notifications added
  • SettingStorage now has a binary save option (not just string based)

Template improvements:

  • Navigation panel moved to UWP Community Toolkit
  • Styling adjustments
  • ResourceLoader performance improvement

For a full list of issues fixed in the 1.1 release, head over to Github.

 What else is cooking for next versions?

We love all the community support and participation. We’re partnering with additional framework Caliburn.Micro and have a branch currently under development with Nigel Sampson. We’re talking with Prism and Template 10 to see how those frameworks can also be added in. In addition, here are just a few of the things we are currently building out:

  • Fluent design in the templates
  • Project Rome features as options for your project
  • Right-click->add support for existing projects
  • Localization in the wizard
  • Accessibility supported in both wizard and in the templates

If you want to help out, please head over to https://aka.ms/wts.

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.