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.

This Week on Windows: Spotify in the Windows Store, 360° videos, E3 and more

We hope you enjoyed today’s episode of This Week on Windows! Check out our Windows 10 Tip on how to watch 360° videos with the Windows 10 Creators Update, catch up on all the Xbox news out of our E3 Briefing, learn more about the launch of Surface Laptop and Surface Pro, head over here for six things you need to know about Windows 10 S, or, keep reading for what’s new in the Windows Store.

In case you missed it:

<!–
!function(a,b){“use strict”;function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf(“MSIE 10”),h=!!navigator.userAgent.match(/Trident.*rv:11./),i=b.querySelectorAll(“iframe.wp-embedded-content”);for(c=0;c<i.length;c++){if(d=i[c],!d.getAttribute(“data-secret”))f=Math.random().toString(36).substr(2,10),d.src+=”#?secret=”+f,d.setAttribute(“data-secret”,f);if(g||h)a=d.cloneNode(!0),a.removeAttribute(“security”),d.parentNode.replaceChild(a,d)}}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!/[^a-zA-Z0-9]/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll(‘iframe[data-secret=”‘+d.secret+'”]’),k=b.querySelectorAll(‘blockquote[data-secret=”‘+d.secret+'”]’);for(e=0;e<k.length;e++)k[e].style.display=”none”;for(e=0;e1e3)g=1e3;else if(~~g<!]]>

<!–
!function(a,b){“use strict”;function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf(“MSIE 10”),h=!!navigator.userAgent.match(/Trident.*rv:11./),i=b.querySelectorAll(“iframe.wp-embedded-content”);for(c=0;c<i.length;c++){if(d=i[c],!d.getAttribute(“data-secret”))f=Math.random().toString(36).substr(2,10),d.src+=”#?secret=”+f,d.setAttribute(“data-secret”,f);if(g||h)a=d.cloneNode(!0),a.removeAttribute(“security”),d.parentNode.replaceChild(a,d)}}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!/[^a-zA-Z0-9]/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll(‘iframe[data-secret=”‘+d.secret+'”]’),k=b.querySelectorAll(‘blockquote[data-secret=”‘+d.secret+'”]’);for(e=0;e<k.length;e++)k[e].style.display=”none”;for(e=0;e1e3)g=1e3;else if(~~g<!]]>

There has never been a better time to buy a Surface

Surface Laptop

If you’ve been waiting to purchase your new Surface, there’s never been a better time. We announced last week that at all physical Microsoft Stores in the US or Canada, when you trade in an old device, including an Apple MacBook or iPad, you will receive up to $850 off most Surface devices, including the new Surface Pro and Surface Laptop*.

Microsoft Store associates will help find the right Surface for you with a device fitting, and with the new Surface Migration Assistant app, you can easily transfer all your files, pictures, music and settings to your new Surface device without missing a beat. Come into a Microsoft Store and let us show you how easy it is to make the switch to a Surface.

Here’s what’s new in the Windows Store this week:

djay Pro Sale – Buy for $39.99

djay Pro

Thirty million downloads are powerfully persuasive recommendations – and djay Pro ($39.99, regularly $49.99, June 19-25, 2017) doesn’t disappoint. Now, get all its amazing features and effects – including Surface Dial integration, for scratching – along with the access to millions of tracks that Spotify integration delivers, for 20% off June 19-25.

Sling TV Cloud DVR comes to Windows 10

Sling TV

This week, discover more features and easier, better viewing with Sling TV Cloud DVR – now for Windows 10 (free to download; services start at $20 per month; $5 per month more for 50 hours of DVR storage). Sling TV Cloud DVR gives even more control over how, when, and where you watch. More channels allow you to see more of your favorites. Schedule, manage, and record on most channels with Windows 10.

Want to record content from local FOX channels, Nat Geo, or FX? No problem – they’re part of the new channel lineup. If you have a favorite episode, epic sports play, or another never-forget moment, just choose “Protect” in the Manage DVR section, and it’s saved as long as you subscribe. Signing up is easy – you add Cloud DVR just like any other extra on Sling TV. Just sign in to your account on sling.com and select “Add Cloud DVR.” Change the way you watch – and enjoy – on Sling TV, today!

Spotify

Spotify logo in blue and red

Spotify for Windows 10 is now available to download in the Windows Store. We first announced our partnership with Spotify in early May and are thrilled to bring the Spotify app to Windows 10 and Windows 10 S customers following on the heels of the release of Surface Laptop and Windows 10 S last week. The Spotify app is available today in all 60 countries where Spotify is available. Learn more in this blog post!

Kong: Skull Island – Buy from $14.99

Kong: Skull Island now in the Windows Store

When a group of scientists set out to explore an uncharted island in the South Pacific, they get more than they bargained for when they encounter the island’s extraordinary – and terrifying – wildlife. Kong: Skull Island ($29.99 UHD, $19.99 HD, $14.99 SD) is now available to own in the Movies & TV section of the Windows Store four weeks before Blu-ray.

Have a great weekend!

*Offer valid from June 15, 2017, to July 31, 2017, while supplies last. Available only in Microsoft retail stores in the United States (including Puerto Rico) and Canada. To receive full store credit towards the purchase of a new select Surface device, a customer must trade-in qualifying Surface Pro device subject to these terms. To be eligible for trade-in, you must own the qualifying device, device must power on, battery must hold charge and not be required to be plugged in to operate, and be in fully functional, working condition without broken/missing components, cracked display/housing, liquid damage, modification(s) or have device warranty seal broken to be considered working. Cannot be password protected, and include original chargers/accessories. Must contain a hard drive. Any appraised value will be determined at trade-in and provided as a Microsoft retail store credit. All trade-ins are subject to Microsoft’s discretion and approval. All trade-ins are final. Recycle for Rewards program provided by CExchange, LLC., and other terms and conditions may apply. Not valid on prior orders or purchases; cannot be transferred or otherwise redeemed for cash or gift cards. May be combinable with other offers. Void where prohibited or restricted by law. Microsoft reserves the right to modify or discontinue offers at any time. Other exclusions and limits may apply. See store associate for details.

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 = &amp;quot;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) ) )&amp;quot;;
  lineVisual.StartAnimation(&amp;quot;RotationAngle&amp;quot;, 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.