Tag Archives: UWP apps

Calling WinRT Components from a Win32 process via the Desktop Bridge

In today’s post, we are covering another step you can take on your journey across the Desktop Bridge: specifically migrating business logic to Windows Runtime Components, aka WinRT Components. Previously, Windows only supported calling OS provided WinRT components from Win32 applications. Any attempt to call user-defined (aka 3rd party) WinRT components would fail because the Win32 application did not have package identity, and thus there was no way to register the component with the system at installation time, nor any way for the system to find the component at runtime.

This limitation is solved because Win32 applications on the Desktop Bridge now have identity and are registered with the OS, including any Windows Runtime Components that are part of the package. In the Windows 10 Fall Creators Update, the Desktop Bridge supports this functionality, including support for both In-Process Servers and Out-Of-Process Servers.

Code sharing – Why WinRT Components vs other options

There are many different ways to share code in your application, so what you choose depends upon your scenarios. At a high level, here are a few ways as they relate to UWP and the Desktop Bridge:

  • DLLs – for scenarios that require in-proc code performance and do not need cross-language interoperability
  • WinRT Components – for cross-language interoperability, or support out-of-process activation for reliability
  • .Net library – for scenarios that work in-proc and all clients are managed developers, including PCLs or .Net Standard libraries

Authoring new code or moving code into a Windows Runtime Component allows code reuse between the AppContainer and Win32 processes in the same package. While you can reuse existing DLLs in your AppContainer process by calling LoadPackageLibrary by moving to a Windows Runtime Component, you gain greater reusability because of better language interoperability (Native C/C++, managed code with C# & VB and Javascript) and Visual Studio integration across all your projects. Additionally, WinRT components support an out-of-process activation model that enables greater robustness for your app.

How does it work?

Because applications on the Desktop Bridge have a manifest, the registration entries for the WinRT Component are the same as you would use for a UWP application – by using the InProcessServer and OutOfProcessServer extensions. These extensions register the ActivatableClassId and its implementation binary with your package, so when your application attempts to activate the class, the system can find it.

In-Process Servers

This feature now allows developers to easily share code between Win32 apps and UWP apps running in AppContainer that can be loaded In-Proc. The component is built the same, e.g. Create a new WinRT Component project in VS, and the registration in the manifest is exactly the same as for UWP in-process servers. Because there is no manifest schema change required, developers can use existing toolsets in VS2015 or VS2017 to build In-Proc servers, but these solutions can only deploy to a machine running the latest flights of the Fall Creators Update.

Below is an example of an in-proc registration for a C++ WinRT Component, where CPPSimpleMathWinRT.dll is a native implementation of the SimpleMath class.


    <Extension Category="windows.activatableClass.inProcessServer">
      <InProcessServer>
        <Path>CPPSimpleMathWinRT.dll</Path>
        <ActivatableClass ActivatableClassId="SimpleMathWinRT.SimpleMath" ThreadingModel="both" />
      </InProcessServer>
    </Extension>

Below, you’ll see a simple Winforms Calculator sample that leverages a C++ WinRT Component for its math engine.

And this is what it looks like at runtime:

Sample with a C++/CX WinRT Component: https://github.com/Microsoft/DesktopBridgeToUWP-Samples/tree/master/Samples/WinFormsWinRTComponent

Sample with a C# WinRT Component: https://github.com/Microsoft/DesktopBridgeToUWP-Samples/tree/master/Samples/WinformsManagedWinRTComponent

Out-Of-Process servers

The registration of an OOP server for an application using the Desktop Bridge extensions is very familiar to developers who have registered servers before in UWP. However, there are details to clarify and limitations to be aware of. While OOP servers allow you to share code between your Win32 and AppContainer processes, there are limitations on sharing data between clients — that is reflected in the instancing model of the server. It all depends on your application’s needs as to which instancing model you should leverage.

The instancing behavior of a server is determined by the claims on the process token, specifically whether or not a call to NTCompareToken() for the calling process and a running instance of the server returns true. If they match, then existing instance of the server is used. If they are different, then a new instance of the server is started.

One of the key claims is the app identity. Apps in UWP are defined in the manifest and in most UWP applications submitted to the Store, there is only one App. But on the Desktop Bridge you can have more than one. Another key claim is the trust level of the calling process. On the Desktop Bridge, the package itself is declared with the runFullTrust capability, <rescap:Capability Name=”runFullTrust” />, which allows one or apps to be declared with the FullTrust entrypoint, EntryPoint=”Windows.FullTrustApplication”. Apps using the FullTrust entrypoint can call any API they want. Usually this is your main Win32/.Net executable. I’ll refer to these applications as FullTrust apps.

If you do not have this entrypoint, then the application is running in a lower trust level, called Base Trust, and has additional restrictions in a sandboxed environment called AppContainer, which is typical for an app when you create a UWP app in Visual Studio. These different trust levels result in different claims on the process tokens, and the result is a different instance of the server.  This model is called ActivateAsActivator, or AAA. An example of this registration is provided below, and you’ll note that it is the exactly same as what you’d provide for a UWP application; there is nothing new here for using this instancing model to access the server from your Win32 code:


    &amp;lt;Extension Category=&amp;quot;windows.activatableClass.outOfProcessServer&amp;quot;&amp;gt;
      &amp;lt;OutOfProcessServer ServerName=&amp;quot;Microsoft.SDKSamples.Kitchen.OvenServer&amp;quot; &amp;gt;
        &amp;lt;Path&amp;gt;Microsoft.SDKSamples.Kitchen.exe&amp;lt;/Path&amp;gt;
        &amp;lt;Instancing&amp;gt;singleInstance&amp;lt;/Instancing&amp;gt;
        &amp;lt;ActivatableClass ActivatableClassId=&amp;quot;Microsoft.SDKSamples.Kitchen.Oven&amp;quot; /&amp;gt;
      &amp;lt;/OutOfProcessServer&amp;gt;
    &amp;lt;/Extension&amp;gt;

While the ActivateAsActivator model allows you to share code, creating a separate instance of the server per client can be heavy weight. To mitigate this, UWP introduced a concept called ActivateAsPackage (AAP), which provides a single instancing behavior for servers in the package. This is reflected in the new attribute IdentityType=”activateAsPackage” on the <OutOfProcessServer> element.

There is a limitation in the AAP model however, as you must specify which trust boundary you want the server to run in. The server must be registered for use by the AppContainer processes, or for use by the FullTrust processes. If you want to use the server in both the FullTrust and AppContainer processes, you’ll need to build and register two servers with separate server names and class names, as those names need to be unique per package. To register the server for use by your FullTrust process, a new attribute RunFullTrust=”true” has been added. If you want the server to be used by your AppContainer processes, leave the attribute out.

Both new attributes are under the xmlns:uap5=”http://schemas.microsoft.com/appx/manifest/uap/windows10/5” namespace. An example registration is provided below showing both Win32 and UWP server registrations:

AAP Registration of server for use by Win32, aka FullTrust, processes:


    &amp;lt;Extension Category=&amp;quot;windows.activatableClass.outOfProcessServer&amp;quot;&amp;gt;
      &amp;lt;OutOfProcessServer ServerName=&amp;quot;Microsoft.SDKSamples.Kitchen.OvenServer&amp;quot; uap5:IdentityType=&amp;quot;activateAsPackage&amp;quot; uap5:RunFullTrust=&amp;quot;true&amp;quot;&amp;gt;
        &amp;lt;Path&amp;gt;Microsoft.SDKSamples.Kitchen.exe&amp;lt;/Path&amp;gt;
        &amp;lt;Instancing&amp;gt;singleInstance&amp;lt;/Instancing&amp;gt;
        &amp;lt;ActivatableClass ActivatableClassId=&amp;quot;Microsoft.SDKSamples.Kitchen.Oven&amp;quot; /&amp;gt;
      &amp;lt;/OutOfProcessServer&amp;gt;
    &amp;lt;/Extension&amp;gt;

AAP registration of server for use by UWP processes:


    &amp;lt;Extension Category=&amp;quot;windows.activatableClass.outOfProcessServer&amp;quot;&amp;gt;
      &amp;lt;OutOfProcessServer ServerName=&amp;quot;Microsoft.SDKSamples.Kitchen.OvenServerUWP&amp;quot; uap5:IdentityType=&amp;quot;activateAsPackage&amp;quot;&amp;gt;
        &amp;lt;Path&amp;gt;Microsoft.SDKSamples.KitchenUWP.exe&amp;lt;/Path&amp;gt;
        &amp;lt;Instancing&amp;gt;singleInstance&amp;lt;/Instancing&amp;gt;
        &amp;lt;ActivatableClass ActivatableClassId=&amp;quot;Microsoft.SDKSamples.Kitchen.OvenUWP&amp;quot; /&amp;gt;
      &amp;lt;/OutOfProcessServer&amp;gt;
    &amp;lt;/Extension&amp;gt;

The sample uses the AAP scenario and shows two C# Winforms apps using a OOP WinRT Component, resulting in only one instance of the server executable. The WinRT Component is a modified version of the WRLOutOfProcessWinRTComponent sample from the Universal Windows Samples on github. In this example, both client call the server and call the BakeBread() method. You’ll see from the TaskManager that there is only one instance of the Server.

GitHub link: https://github.com/Microsoft/DesktopBridgeToUWP-Samples/tree/master/Samples/WinformsOutOfProcessWinRTComponent

Visual Studio Support

It’s worth calling out a couple details and workarounds in projects created for this solution. First of all, Visual Studio currently does not allow you to add project references from a WinRT Component project to a Win32/.Net project.  You can work around this by unloading the Win32/.Net project and adding the project reference to the project file directly, e.g.:


  &amp;lt;ItemGroup&amp;gt;
    &amp;lt;ProjectReference Include=&amp;quot;..ServerWRLOutOfProcessWinRTComponent_server.vcxproj&amp;quot; /&amp;gt;
  &amp;lt;/ItemGroup&amp;gt;

While this adds the reference, you will see a warning in Visual Studio, as this was not previously supported by the OS. We are working with Visual Studio to improve this in a future release, but for now you can ignore the warning.

Second, the samples are using a UWP JavaScript project to handle the app packaging. This technique is noted in the Desktop Bridge Packaging with Visual Studio documentation, and works as a reasonable solution until Visual Studio adds future support. The benefit of this approach is that you can add a reference from your WinRT component to the JavaScript project, and then the Visual Studio build system adds appropriate registrations for package dependencies, including VCLibs and .NetNative, as well as the <InProcessServer> extensions. Visual Studio does not support adding registrations for <OutOfProcessServer> registrations, so you’ll need to add those manually to the manifest

Metadata Based Marshaling – No more Proxy/Stub DLLs!

Finally, in the <OutOfProcessServer> example, we take advantage of the Metadata Based Marshalling feature (MBM) that was introduced in the Windows 10 Anniversary Update (Windows 10 version 1607). This feature has not gotten much attention, but it means that WinRT Component developers do not need to author a proxy/stub class, saving them time and tedious work. This is possible because the WinMD is deployed with the application, and thus the system can identify and marshal the types cross-process for the developer. You will notice that the server code in this example does not include the proxy project nor binaries.

Conclusion

With Windows Runtime Components and the Desktop Bridge, developers can take another step on their journey to migrate business logic to UWP. Windows Runtime Components provide code re-use that can work with either FullTrust processes or UWP processes, and they allow greater interop cross language.

For more information on the Desktop Bridge, please visit the Windows Dev Center.

Ready to submit your app to the Windows Store? Let us know!

Earn more money by moving to the latest advertising libraries

Make sure your apps are updated to use the latest versions of the Microsoft Advertising SDK.

The latest advertising SDK versions, which are MRAID 1.0 compliant, support richer creatives experiences. These SDK versions can also send user signals such as advertiser ID, age, gender, geo and other behavioral signals to advertisers (subject to user’s privacy preferences). This enables advertisers to identify the same user across different apps and websites, and as a result can target them better.

Advertisers today seek these capabilities and are willing to spend more money on ad inventory that supports them, so this will translate into higher revenue for you.

The latest Advertising SDK versions for UWP apps also support new ad formats like Interstitial Banner, Native Ads and Playable Ads, which deliver higher eCPMs and can drive up your revenue even further!

Also, Microsoft recently removed support for older advertising SDK releases that do not support a minimum set of capabilities, including the ability to serve HTML5 rich media via the Mobile Rich-media Ad Interface Definitions (MRAID) 1.0 specification from the Interactive Advertising Bureau (IAB).

For more information on how to upgrade your apps to the latest advertising libraries, please refer to this article.

Announcing Windows Template Studio

Today, we are pleased to announce the next evolution in your File New Universal Windows Platform app in Visual Studio – Windows Template Studio. Windows Template Studio addresses a top community ask in our developer survey to make it easier and provide guidance to create new projects that target the Universal Windows Platform. In this post, we’d like to spend a few minutes introducing Windows Template Studio and show you how it works.

Windows Template Studio uses a dev-friendly wizard to get your UWP apps to F5 in no time, bringing together the pages, frameworks and features that you want. Our wizard walks developers through four steps to quickly scaffold a new UWP app:

  1. Project Type: Select between standard layouts and predefined controls.
  2. Framework selection: Select the structure of your UWP app with in-house and third-party support.
  3. App pages: Select which pages that make sense for the app, that you are trying to create.
  4. App features: Easily add features such as background tasks with one click.

Furthermore, we’re open-sourcing Windows Template Studio, welcoming UWP devs to take the generation engine further – adding additional capabilities and app pages, improving the implemented best practices and patterns – and encouraging UWP devs to make the engine their own – tailoring it to their company’s specific needs.

Windows Template Studio is the evolution of Windows App Studio. App Studio was a free, online app creation tool that allowed developers and enthusiasts to quickly build Windows Universal Apps. We are taking our learnings from the code generation engine and the existing wizard to provide a strong foundation for our code generation and developer experience in Windows Template Studio.

A Lap Around Windows Template Studio

We kick off Windows Template Studio by creating a new UWP app project. In the Visual Studio 2017 ‘New Project’ dialog, select the Visual C# Windows Universal node.

Here you’ll see the Windows Template Studio project. Select the project type, enter in your new UWP app’s name and click ‘OK’. Windows Template Studio will now fire up and walk you through the UWP app creation wizard, step by step.

Step 1: Project Type

You begin by selecting a project type. We’ve started you with the most common types such as: blank, navigation pane and pivot and tabs.

Step 2: Framework

Once you have selected a project type, you need to select a framework. You can select from Code behind, MVVM Basic or the very popular MVVM Light.

Step 3: Pages and app lifecycle features

Once you have selected a project and framework, then it is time to add in pages and features. We’ve already added the most common pages such as Master/Detail, Settings and Web view. You can also easily add in Application Lifecycle features such as Suspend and Resume as well as Background Work and User Interaction.

Best practices and patterns

To wrap all of this up, with a couple of simple clicks, you can wire up an app that uses the Navigation Pane, MVVM Light framework, a Master Detail page and a couple of features such as suspend and resume and Azure hub notifications. You save time, your app is adhering to our design guidance and industry standard patterns and practices come free.

Below is an example of an app generated with Windows Template Studio. Again, we provide the foundation of a great UWP app and get you to F5 in a couple of clicks.

Get Started Today

Windows Template Studio v1.0 is available now and you can expect updates every 6 weeks. We have extremely easy to use instructions for installing the VS extension on our GitHub page as well. A public roadmap is currently available and we’d encourage you to check out The Tips and Tricks for UWP Developer session that was shown at Build to learn more. You can get started creating your own app in three simple steps:

  1. Download Visual Studio 2017 and select Universal Windows Platform development under Workloads.
  2. Install the Visual Studio Extension for Windows Template Studio by downloading the VSIX from the Visual Studio Gallery.
  3. Once installed, open Visual Studio 2017 and select FileNew Project→ C# → Windows Universal and you should see the new template that was just added.

And Best of All…Windows Template Studio is Open Source

Windows Template Studio is completely open-source and available now on GitHub. This project is community led and we’re very excited to already have contributions from the following community members: Matt Lacey and James Croft. We would love for you to contribute to the project and would encourage you to read our contribution guidelines for next steps.

In the spirit of being transparent, the roadmap for the next release is always available. If you have a bug that you would like to report or share a feature request, then please add it to our issue tracker.

We would love to hear how your experiences are using it and the helpfulness of the project. You can reach Clint at @clintrutkas and Michael at @mbcrump.  What are you waiting for? Go and try it out for yourself now!

Windows Store: more options to manage, monetize and promote apps

At Build 2017 last week, the Windows Store announced new capabilities to reach more customers, improve your productivity and promote and monetize your apps and games, including:

  • Offering your games to Xbox One users
  • Updating your Store listings faster via import/export
  • Releasing new games or apps using private beta, targeting a limited audience
  • Navigating Dev Center faster through an updated dashboard experience
  • Enabling more users to acquire apps via one-click download with no Microsoft account login
  • Offering more engaging Store listings with video trailers
  • Monetizing via recurring billing using in-app purchase subscriptions
  • Offering discounts only to some user segments, or only to users of your other apps or games
  • Analyzing your app performance more effectively, through funnel analysis and crash analytics
  • Earning more revenue from ads through more advertising formats

To learn more, I recommend viewing the Build session Windows Store: manage and promote apps your way (B8098), and reading this blog post.

More opportunity for your apps and games

Your UWP apps and games can run on any Windows 10 device, so you can reach out to hundreds of millions of users with a single app. The Store helps you grow that opportunity, reach more customers, acquire new users and increase the revenue for those users with several new capabilities. View the Build 2017 session Tips and Tricks for Successful Store Apps (B8102) to learn how to best use these new capabilities.

Increase your revenue through in-app advertising (New). Advertising is one of the primary monetization models for many publishers, and the Store now offers several new ad experiences that bring better yield and higher fill rates for ads in UWP apps: interstitial banner ads, playable ads and native ads (beta), in addition to the existing banner and video ads. To learn more, view Build session A quick lap around Microsoft Monetization Platform (P4112).

Example of a playable ad running in a UWP game

Promote your apps, and drive re-engagement using ad campaigns (New). Dev Center offers the ability to acquire new users in several ways: promotional codes, targeted offers and ad campaigns. Creating an ad campaign requires few clicks, and now supports interstitial banner, native and playable ads (beta). These ad campaigns are shown to users on other apps, as well as on Microsoft properties such as MSN.com, Skype and Outlook. To learn more, view the Build session User acquisition through Ads (session P4154).

Acquire more customers through one-click download, and buy Xbox games on PC (New). The Store has enabled faster and simpler app acquisition by letting customers acquire free apps or games (with age rating 13-year old or lower) with one click, without requiring the user to sign in with their Microsoft account. In addition to this change, customers can now purchase Xbox games directly from the PC Store. These new options help grow the number of users that download your app or game.

Distribute UWP games on Xbox One, engaging with hundreds of millions of Xbox One users and more than 50 million Xbox Live accounts (Coming soon). Dev Center already allows any developer to publish apps not categorized as games to Xbox One. Developers can now join the new Xbox Live Creators Program to submit games to Xbox One, with fast certification, no cost and no friction. You can start developing and testing your Xbox Live enabled games today, and you’ll be able to publish games for Xbox One in summer. View the Xbox Live Creators Program build session (P4159) to learn more.

Offer in-app purchase subscriptions (Coming soon). Apps can be configured to include in-app subscriptions, i.e. selling services in-app that charge periodically (1/3/6/12/24-month renewal periods), with or without a free trial. In-app subscription capability is currently in preview, being tested by a few publishers and will be available to all developers this summer. Follow the Building apps for Windows blog for more announcements.

In addition to these features, remember that you can offer your app or game to businesses or education institutions through the Microsoft Store for Business that offers a redesigned private Store experience for companies. You can also take your existing Win32 app or game and offer it through the Windows Store using the Desktop Bridge.

Dev Center experience redesign

More modern and efficient dashboard experience (Dev Center Insiders). The Dev Center dashboard has been redesigned based on your feedback to help you be more productive. The new dashboard integrates with Office, Cortana and Groove programs. It has a clean new interface, beautiful analytics, new account-level pages, integrated app picker and streamlined program switching.  These are a few of the things that make the new dashboard more useful, particularly for accounts with multiple apps, games or programs. Try it out today by joining the Dev Center Insider Program.

Startup guide for the new dashboard experience

Invite users outside of your organization to collaborate on your apps and games (New). We now support inviting users outside your company to contribute to the projects in your account. This makes collaboration and partnerships across companies and users easier than ever. Your account users are governed by the same roles and permissions that you apply to users in your AAD tenant, ensuring that you remain in full control.


Reaching more customers

To help customers find your app or game, and then increase the probability they will download it, the Store has added new search filters, and ways to make your store listing more engaging, and ways to update your Store listings in bulk, streamlining the update in multiple languages.

Help customers find your apps or games with new search capabilities (Rollout starting). Starting today, we’re rolling out the option to indicate if your app uses Cortana, Ink or Continuum, or if your games offer mixed reality, 4K, HDR, multi-player, co-op, or shared split screen. Indicate in the Properties page of your submission if it supports these capabilities, and this summer customers will be able to filter their searches to show only apps or games that support the capabilities they are looking for.

Search filters that will show up in the Store later in the summer

Create more engaging Store listings with video trailers (Rollout starting). Many of you have told us that video trailers are one of the best ways to attract customers. After piloting the feature earlier this year, today we’re beginning to roll out the ability to upload trailers to use in your Store listing, and all accounts should have access within a few months. We’ve made a few other updates to the types of images you can provide for a great Store listing, including 4K high-resolution assets.

Create and update Store listings faster with Import/Export (Coming soon). Creating and updating Store listings takes many clicks per language and can take hours for a submission with listings in many languages. Dev Center allows you to import and export your listings, so you can make changes offline in bulk and then upload all your listing details at once, rather than having to manually input each string and image for each language. We’ll be rolling this feature out to all accounts over the next few months.

Submission page showing progress using import/export Store listings

Planning your release

Once you have created your app submission and designed an engaging Store listing, you’ll have to plan the release. The Store supports several visibility options, including a release only accessible through promotional codes, a public but not searchable release (hidden), public release or flighting different packages of your published app to specific groups of people. Flighting is widely used, with more than 30,000 package flights created so far. We’re adding additional options to let you release private betas, and to schedule a release very precisely.

Release a submission at a precise date and time (Rollout starting). Dev Center previously let you define when a submission would start to be published, but didn’t let you know exactly when the submission would be live. You can now specific a precise date and time, in UTC or local time, during your submission. We are beginning to roll out the new Schedule options today, and all accounts should have access within a few months.

Offer a private beta (Coming soon). Soon you’ll be able to publish a new app or game that is only visible to people in a specific group that you define; anyone who’s not in your beta group won’t be able to see the Store listing page or download the product. This feature is being used by selected preview apps, and we will be releasing this feature to all developers within the next few months.

Remember that you can also use the Store service APIs to streamline your app management. There are APIs to submit and release apps, games and add-ons, manage package flights, access analytics information, read and respond to reviews and run ad campaigns.

Optimizing pricing and configuring deals and sales

Once your apps and games are published to the Store, you may want to adjust your app or add-on price, grow your customer engagement or offer sales to attract more customers.

Create new types of customer segments (New). Several features in Dev Center support segments, including sales, targeted offers, notifications and analytics. You can now create segments by market breakdown, purchase amount and if a user has rated the app or not. Coming soon, you’ll be able to use a predictive churn model to create segments of users who are predicted to stop using your app (churn), so you can take a preventive approach.

Show content or pricing targeted to a specific segment (New). The new targeted offers feature lets you target specific segments of your customers with attractive, personalized content inside the app to increase engagement, retention and monetization. An example is discounting certain in-app products for customers who are first time payers. For more info and a demo of how to use this feature, view the Build session Maximizing user engagement with customized app content (P4116), or read more.

Control your price more precisely and schedule changes (Rollout starting). You can precisely schedule price changes for customers on Windows 10 over time, using the currency that makes sense to you, to occur globally or for specific markets. Rollout of this feature starts today and will finish within a few months.

Increase customer acquisition and engagement with more flexible sale pricing (Rollout starting). We’ve added more options to sale pricing to let you configure discounts by percentage (e.g. 40% off), offer discounts to customers that own one of your other apps (such as “50% off if you own this other game”), target a discount to a segment of users (e.g. offer discount to users that have not rated the game) and even use a new segment of customers that have never purchased anything in the Store. When a customer makes their first purchase, we’ve found that they typically continue to purchase more items in that initial app or game, as well as in other products in the Store. Rollout of advanced sale pricing starts today, and all accounts should have access to these features by summer. Note that when you offer a discount to a segment of your customers, you can also use our targeted notifications feature to alert those customers about the discount. Watch the Build 2017 session Maximizing revenue through advanced pricing, sales and scheduling (P4116) to learn more.

Dev Center configuration 

How sale pricing appears in the Store

View all possible price tiers in Excel (Rollout starting). While adjusting prices, many of you have asked to be able to have an easier way to view the price tiers in all the currencies. The Pricing and availability page now offers the option to download the price table in .csv (editable in Excel). Rollout starts today, and all accounts should have access to download the price table in a few months.

Improving analysis

Once your app is published and live, you’ll want to analyze its performance, to help adjust your listing or app to improve acquisitions, satisfaction or engagement. Our new analytics capabilities let you analyze multiple apps more effectively, identify areas of improvement in the conversion funnel, improve debugging and in general find patterns and trends to improve your app.

View analytics for multiple apps, using a modern design (Dev Center Insiders). Along with the release of the new dashboard experience, we have refreshed and enhanced our analytics features to bring you better insights. The new Analytics Overview quickly summarizes key reports like Acquisitions, Usage, Installs and Health, and you can select up to 5 apps to view at one time. You can get an early look at this new design by joining the Dev Center Insider Program.

Analyze your customer conversion funnel (Dev Center Insiders). The acquisition funnel shows the total number of customers that complete each stage of the funnel—from viewing the Store page to using the app, along with conversion rate. You can filter by customer demographics and custom campaigns to compare campaign effectiveness. The report is for Windows 10 customers over the last 90 days, and Page views also includes views from people who are not signed in with a Microsoft account. Try it out now by joining the Dev Center Insider Program.

Automatically receive alerts when there are anomalies in acquisition trends (Dev Center Insiders). It’s often easy to miss significant changes. To help you monitor data changes, you’ll get an email alerting you when we detect a significant trend change with your acquisitions. We’ll also include your app’s average rating for the last 10 days so you can see if they’ve been impacted. You can then use the Health and other reports to identify urgent fixes to address, or you can respond to reviews to help drive your ratings back up. To receive these emails now, join the Dev Center Insider Program.

Debug your apps more effectively Analyzing crashes and debugging apps is critical for improving the performance and quality of your apps and games. Today, the Health report lets you pinpoint which OS and app version configurations generate the most crashes, and link to failure details with individual stack traces.  This summer we’ll roll out the ability to download CAB files for crashes that occur on devices that participate in the Windows Insider program.

Understand usage and analyze by cohorts (Coming soon). The Usage report helps you understand how often and how long users are using an app, and measures interactive engagement time across active users and active devices, using industry-standard DAU/MAU metrics and retention. The report will soon include cohort analytics to help you understand usage drop-off over time. Join the Dev Center Insider program to be ready to use this analysis when it rolls out to all accounts within the next few months.

What comes next?

We hope you’ll take advantage of these resources and learn more about the capabilities described in this blog by doing the following:

Keep giving us feedback to help us prioritize features and updates. Use the feedback link in Dev Center, which you’ll now find in the upper right of the dashboard (if you’re using the new dashboard experience as part of the Dev Center Insider Program).

Master the Master-Detail Pattern

In the world of information consumption in applications, it’s crucial to have a clear and easy way to navigate and inspect that information. The master-detail design pattern has become one of the most popular approaches in applications today. In this post, we’ll discuss what this is, determine if it’s appropriate for your application and show how you can use it!

What is a master-detail?

The answer to this will depend on what kind of information your application is trying to show, but at a high level, the “master” is an area in the UI where you have a list of something and the “detail” is the area that shows the relevant information of a selection in the master.

You can find a great example of the master-detail pattern in the Windows 10 email app, “Mail.”  The master is the list of emails and the details is the selected email.

The master-detail pattern is easy to understand and doesn’t need a lot of explanation to the user. When the user selects something in the master, they see the information and any actions relevant to that detail item. For example, selecting an email shows the body of the email as well as the buttons for: reply, reply-all and delete.

The pattern works well for these types of application scenarios:

  • You have a list where it makes sense to show details (e.g. list of contacts, products, etc.)
  • You have a large list that has items that need to be prioritized (e.g. RSS readers)
  • You need to switch between items frequently but want to stay in the same context (e.g. email)

Let’s use the Microsoft RSS Reader UWP example app to illustrate the master-detail pattern’s features.

If you want to follow along or see the code first-hand, find the RSS Sample’s source code here on GitHub.

Master-detail modes

The master-detail pattern works well on a wide range of device types and display sizes. However, you should consider how you want to use the pattern on different display sizes.

There are two popular modes that will help with this:

  • Side-by-side
  • Stacked

The determination between which approach to take comes down to how much horizontal room your app has. Here’s a table of typical effective pixels available per “size class” (if you’re not familiar with Effect Pixels (epx) see this one minute video).

Size class small medium large
Typical screen size (diagonal) 4″ to 6″ 7″ to 12″, or TVs 13″ and larger
Typical devices Phones Phablets, tablets, TVs PCs, laptops, Surface Hubs
Common window sizes in effective pixels 320×569, 360×640, 480×854 960×540, 1024×640 1366×768, 1920×1080
Window width breakpoints in effective pixels 640px or less 641px to 1007px 1008px or greater

Side by side

There many scenarios in which your application will have plenty of horizontal space to stretch.  The recommended guidelines for this mode is when your application has 720 epx or more available; this puts us in to the “Medium” and “Large” size classes seen above.

A few of these are:

  • Devices that let you size the app window larger (PC, HoloLens, Surface Hub)
  • Windows 10 Mobile running Continuum
  • Windows 10 Mobile (landscape orientation)

In the side-by-side approach, you can have both the master view and the detail view showing simultaneously. Using our RSS example, here’s the side-by-side approach:

Stacked

If your application is running in between 320 to 719 epx, you can’t comfortably fit the master and details next to each other, so we’ll need another way to display the master and detail.

A few examples of this scenario are:

  • Any device that lets you resize the app window (e.g. PC, HoloLens)
  • Windows 10 Mobile (portrait orientation)

For this case, you can use the stacked approach. In stacked, the master view gets the full screen space, then, when a selection is made, the detail view gets the full screen space.

With this approach, we’re “stacking” the pages in a single area and navigating between them. For example, the user selects an item in the master, the app will navigate to the Details View. When they want to see another item, they’ll navigate back to the master and select another item.

The stacked approach can be implemented with page navigation within a Frame element. In the diagram below, the “page control” you see is where the navigation occurs between the master view and the detail view.

Using our RSS sample app, here are a couple screenshots of the master and detail in stacked mode. Note that the app is running on a desktop PC, but with the window sized small, you’ll see the same appearance as it were on a mobile device. What matters is not the device, but the available screen space!

The “Breaking Point”

You’ll notice that we have this point where we need to change between the two different modes, depending on the current app width. For our master-detail, we’ve decided to do this at 720 epx. This means that once the application window gets resized to above or below 720 epx, we should be switching between side-by-side or stacked mode.

The Universal Windows Platform has a great feature to help with changing modes: the AdaptiveTrigger. Using an AdaptiveTrigger in your view’s VisualStates, you can adapt the UI when the application’s window size reaches that “breaking point.”  In the RSS sample, you can see how this is done on the MasterDetailPage.xaml.

First, let’s look at the master-detail layout; there’s a Frame element for the master content (ListView of feeds and articles) and a WebView for the detail content (the selected article). Notice the default width of the MasterColumn is set to 360.


    &lt;Grid.ColumnDefinitions&gt;
        &lt;ColumnDefinition x:Name=&quot;MasterColumn&quot;
                          Width=&quot;360&quot; /&gt;
        &lt;ColumnDefinition x:Name=&quot;DetailColumn&quot;
                          Width=&quot;*&quot; /&gt;
    &lt;/Grid.ColumnDefinitions&gt;

    &lt;Frame x:Name=&quot;MasterFrame&quot; /&gt;

    &lt;WebView x:Name=&quot;ArticleWebView&quot;
             Grid.Column=&quot;1&quot;
             Visibility=&quot;Collapsed&quot; /&gt;
&lt;/Grid&gt;

Now, let’s look at line 49 in the VisualStateGroups. You’ll see the VisualState named “NarrowState.” In this visual state, the MasterColumn.Width changes to * (star, which means “take all the available space”) and the DetailColumn.Width changes to 0.

Because the AdaptiveTrigger is set to 720, anything between 0 and 719 will use the NarrowState and anything 720 or larger will use the DefaultState.


&lt;VisualStateManager.VisualStateGroups&gt;
    &lt;VisualStateGroup&gt;
        &lt;VisualState x:Name=&quot;DefaultState&quot;&gt;
            &lt;VisualState.StateTriggers&gt;
                &lt;AdaptiveTrigger MinWindowWidth=&quot;720&quot; /&gt;
            &lt;/VisualState.StateTriggers&gt;
        &lt;/VisualState&gt;
        &lt;VisualState x:Name=&quot;NarrowState&quot;&gt;
            &lt;VisualState.StateTriggers&gt;
                &lt;AdaptiveTrigger MinWindowWidth=&quot;0&quot; /&gt;
            &lt;/VisualState.StateTriggers&gt;
            &lt;VisualState.Setters&gt;
                &lt;Setter Target=&quot;MasterColumn.Width&quot; Value=&quot;*&quot; /&gt;
                &lt;Setter Target=&quot;DetailColumn.Width&quot; Value=&quot;0&quot; /&gt;
            &lt;/VisualState.Setters&gt;
        &lt;/VisualState&gt;
    &lt;/VisualStateGroup&gt;
&lt;/VisualStateManager.VisualStateGroups&gt;

To see this in action, run the RSS reader example and resize the window from big to small and back. You’ll see the visual states change and switch between the side-by-side and stacked modes.

Additional Detail Functionality

In the beginning of this article, we briefly touched on how you can have context-aware functionality when using a master-detail. The example was having a “reply” button for an email app. However, you can go much further with it. Here are some more examples of functionality you can put into the detail view:

  • Product list: Order, track, add to wish list
  • Contact list detail options: Call, email, drive to
  • Inventory list detail: Reorder, mark damaged, ship

Another takeaway is that you can share the same controls (e.g. Buttons) for frequently used functionality and that functionality would intuitively be for that selected item in the detail view.

UWP Community Toolkit

If you’re building an application that could benefit from a master-detail implementation, you can skip a lot of the work by using the MasterDetailView control in the UWP Community Toolkit. With as little as a few lines of code and a couple DataTemplates (one for the master’s items and the one for the detail view), you can be up and running quickly.

Here’s the example from the UWP Community Toolkit demo app:


&lt;controls:MasterDetailsView
          ItemsSource=&quot;{Binding Items}&quot;
          ItemTemplate=&quot;{StaticResource ListTemplate}&quot;
          DetailsTemplate=&quot;{StaticResource DetailsTemplate}&quot;&gt;
&lt;/controls:MasterDetailsView&gt;

Resources

ICYMI – Your weekly TL;DR

Spring is here and so is another weekend! Check out what you might have missed this week before diving into weekend projects.

Microsoft Store Services SDK launches support for interstitial banner ads

This week we announced the launch of interstitial banner ads support in the Microsoft Store Services SDK! Read more to learn how to add them to your apps.

Simplify payments in UWP Apps with the Payment Request API from Microsoft

The Windows 10 team wants to help you take advantage of new simplified payment options for Windows 10 UWP apps. Click through right here to find out how you can add these options into your apps.

New MapControl features in Windows 10 Creators Update

We have updated the Maps platform for the Windows 10 Creators Update to give our maps a cleaner, more beautiful and realistic look so that it’s consistent between web and UWP apps.

Download Visual Studio to get started.

The Windows team would love to hear your feedback. Please keep the feedback coming using our Windows Developer UserVoice site. If you have a direct bug, please use the Windows Feedback tool built directly into Windows 10.

New MapControl features in Windows 10 Creators Update

We have updated the Maps platform for the Windows 10 Creators Update to give our maps a cleaner, more beautiful and realistic look so that it’s consistent between web and UWP apps. We are also making Road view look more authentic by adding layers of terrain, where previously the Road view appeared flat. In addition to an updated 3D engine, we have delivered added features that our users requested for certain areas of visual improvements, like styling, offline capabilities, routing and others.

Just a quick note regarding the improvements to the engine: even though we go through many compatibility tests and make our best effort to minimize impact to third-party apps, it is always possible that something might have slipped through. This would be a good time to review your apps and confirm that the updated Maps platform is working as expected for your scenarios.

With that out of the way, please see the highlights below around some of the top asked-for features.

Map Styling APIs

We are happy to announce a set of Map Styling APIs for Windows 10 Map Control. The styling APIs will allow you to customize the look and feel of the map canvas on the fly. As a developer you will be able to control the map rendering by dynamically disabling or changing the styling characteristics of a layer or to emphasize certain aspects of the map canvas.

Map customization features are supported for regions where Windows 10 Map Control performs vector rendering, which includes all markets except for China, Japan and South Korea. Since vector mode supports offline storage for all layers, the maps customization feature is available for both online and offline modes.

Customizing the map

You can customize the look and feel of the map by using the new MapStyleSheet and setting the StyleSheet property of the MapControl. Think of a map stylesheet as a set of custom rules defined in JSON markup which can be combined to override our styling defaults. It allows you to customize colors, fonts and visibility status of various map elements, such as roads, areas (e.g. building structures, parks, water) and political features (e.g. city titles).

Here are some great examples of re-styling layers or specific primitives within a layer in the Windows 10 Map Control:

Spooky Map

Some of you might remember the Spooky Map that we released over a year ago in Bing to celebrate one of our favorite holidays. Back then we had just revamped our styling system and our team had a lot of fun coming up with this Halloween theme.

The Spooky road map style is rendered by Windows 10 Map Control through changing the land color, the color for the neighborhood labels and the fill color for areas such as airports, cemeteries and education structures.

Winter Map

The Winter road map style is rendered by Windows 10 Map Control through changing the land color, the color for neighborhood labels and the fill color for the areas such as cemeteries, education structures and military bases.

Gray Map

The Gray road map style is rendered by Windows 10 Map Control through changing the land and water color, the color for all labels and the fill color for all areas and map elements such as roads, railways, runways, transportation network lines and structures.

3D Map Engine

The map engine that is shipping with Windows RS2 update is a 3D map viewer.  It displays objects on top of the terrain and uses globe or web Mercator projection model for vector rendering and map interactions. Vectors are full 3D objects in a 3D scene. To place 3D objects correctly, the engine uses elevation data on the vertices of the vector geometry. If you don’t supply the altitude values to render points and polylines, they will simply be draped over the terrain surface.

Here are some of the major changes to keep in mind.

3D Scenes

Both Road and Aerial maps now support 3D views and elevation data. As you might remember, a 3D perspective of the map can be specified by using MapScene. While the map scene represents the 3D view that appears in the map, the MapCamera represents the position of the camera that would display such a view.

Labels created by the 3D map engine are placed laying down or standing up in the 3D scene to improve readability and visual quality. They also use a distance-fade occlusion rule with other 3D geometry indicative of their actual position in the scene. Because the map view can show both oblique and nadir views, as well as 3D topology, it is important to carefully set your view so that the obstacles, (such as mountains) do not get in your way. To help with this, the control supports the concept of scenes as a primary tool for establishing the best views. Via TrySetSceneAsync methods, you can establish different perspectives and the map will automatically choose the best camera for that perspective based on the environmental factors—including the user’s current view within the map.

Las Vegas Strip, oblique view from the east

For more details, see Display Maps with 2D, 3D and Streetside Views.

Displaying points of interest (POI) on the map

Typically, with marking points of interest (POI) on a map the first thing you consider is using pushpins, images, shapes and/or XAML UI elements. However, one of the main things to consider when adding points of interest to a 3D map should also be altitude and the AltitudeReferenceSystem to be used.

You’ll need an altitude reference system to indicate what the altitude value is relative to. If you specify Terrain, the altitude value will be relative to the terrain and will not include surface objects like trees or buildings. Ellipsoid altitude value will be relative to WGS84 ellipsoid, while Surface altitude value will be relative to the surface and will include objects such as trees and buildings that are on top of the terrain. Geoid altitude values are currently not supported by the Maps API.

Cattedrale di Santa Maria del Fiore, pushpin using zero surface altitude

Using different map projections

The map engine supports both a standard Web Mercator projection and a 3D globe projection now. The developer specifies the map projection of the MapControl that you want to use through the new MapProjection property.

MapBillboard

Along with the 3D enhancements to the existing MapElements, we added a new MapElement called MapBillboard. This new API can be used to display images or signage on the 3D map. Similar to the MapIcon API, MapBillboard displays an Image at a specific location on the map. However, it behaves differently in that it acts as if it was part of the 3D scene: the image scales with the rest of the 3D scene as the camera zooms and pans.

Offline Maps

In the past developers had to direct users to the Settings app for users to download Offline Maps. To streamline these scenarios, we added the OfflineMapPackage API which allows you to find downloaded packages in a given area (Geopoint, GeoboundingBox, etc). You can check and listen for downloaded status on these packages as well as trigger a download without the user having to leave your app.

https://github.com/Microsoft/Windows-universal-samples/tree/dev/Samples/MapControl

Other changes

Area

Description

3D textured landmarks 3D textured buildings are missing with this update, but we are working on getting these back.

API Updates and Additions

For a list of the APIs added since Windows 10 Anniversary Update, please see here the following resources:

For more details on all new APIs go to MSDN.

Simplify payments in UWP apps with the Payment Request API from Microsoft

The Windows 10 team wants to help you take advantage of new simplified payment options for Windows 10 UWP apps. A not-so-appealing part of the ecommerce shopping experience to this day is the checkout process. The average documented shopping cart abandonment rate is 68.81 percent, and 27 percent of U.S. online shoppers have abandoned an order in the past quarter due to a “too long /complicated checkout process [source].”

Over 90% of paid App Developer revenue has been coming from In-App Purhcases (IAP), now app developers can add a new business model and revenue stream by taking advantage of the new Payment Request API to sell physical goods and services or conduct other commerce not supported natively in the Windows and Xbox stores. This API provides an integrated for Universal Windows Platform (UWP) Apps to bypass the complicated process of requiring a user to input payment information and select shipping methods.

After a simple implementation, described below, the millions of customers who already have a payment option saved with Microsoft will be able to check out more seamlessly in your app. This gives customers a faster and more convenient way to pay because they do no need to enter their payment information every time they want to purchase a product in your app.

What the Payment Request API for UWP Apps Enables

The Payment Request API for UWP apps, based on the W3C Payment Request API spec, gives app developers the ability to streamline the checkout process in their UWP Apps. It does so by allowing users to speed through the checkout process, by using payment options and shipping address, already saved with their Microsoft account. You can increase conversion and reduce your risk of data breaches because the payment information is tokenized. With the Windows 10 Creators Update, users can pay with their saved payment options freely throughout experiences in Windows including in UWP apps or on the web via the Microsoft Edge browser.

We are excited to announce the availability of the Payment Request API for UWP app developers today – starting with the OS Build and SDK version 15003.

With this release, we expand on the capabilities already announced for web developers, in the Microsoft Edge Team blog post, which walks you through how to call the Payment Request API from within the Microsoft Edge browser.

Figure 1. Process flow diagram of the Payment Request API

How to use the API

1. Start by creating a set of all the payment options that you accept. You can decide to create a request and resubmit the same one each time. Or create a new request on each button click.


// Enumerate all the payment methods our store accepts.
var data = new
            {
                supportedNetworks = new[] { &quot;visa&quot;, &quot;mastercard&quot; },
                supportedTypes = new[] { &quot;credit&quot; },
                mode = &quot;TEST&quot;
            };

var acceptedPaymentMethodsAll = new[]
            {
                new PaymentMethodData(new[] { &quot;https://pay.microsoft.com/microsoftpay&quot; },                     
                JsonConvert.SerializeObject(data))
            };
	 

2. Pull together the payment details. These details will be shown to the user in the payment app. Please note that the API will not add up the items or calculate the sales tax for you. It’s up to you to provide the required information correctly.


// Aggregate all the prepared payment details.
var details = new PaymentDetails()
  {
       DisplayItems = displayItems,
       Total = totalItem,
       ShippingOptions = new List&lt;PaymentShippingOption&gt;
       {
           new PaymentShippingOption(&quot;Standard (3-5 business days)&quot;, new PaymentCurrencyAmount(&quot;0.00&quot;,            
               &quot;USD&quot;)),
           new PaymentShippingOption(&quot;Express (2-3 business days)&quot;, new PaymentCurrencyAmount(&quot;4.99&quot;, 
               &quot;USD&quot;)),
           new PaymentShippingOption(&quot;Overnight (1 business day)&quot;, new PaymentCurrencyAmount(&quot;11.99&quot;, 
               &quot;USD&quot;)),
        },
        Modifiers = new[]
        {
            new PaymentDetailsModifier(new[] { &quot;contoso/credit&quot; }, totalItemForContosoCard, 
                displayItemsForContosoCard)
         },
   };

3. You can put all the assembled payment details together in one payment request.


// Create a new payment request and associated internal state describing this proposed transaction.
    var state = new PaymentRequestState();
    var request = new PaymentRequest(details, acceptedPaymentMethods, merchantInfo, options);
	 

Submitting the Payment Request (shows the UI

1. Call the SubmitPaymentRequestAsync method to submit your payment request. This will bring up the payment app showing the available payment options.


// Submit the payment request for mediation and (possibly) user review.
state.SubmissionRequestOperation = paymentMediator.SubmitPaymentRequestAsync(request, async (sender, args) =&gt;
     {
       args.Acknowledge(await HandlePaymentRequestChangedAsync(request, args, state));
     });
	 

Processing payment request updates

1. The total price to a user might change depending on the shipping address and preferred shipping option the user selects. The following code creates the available shipping options based on the shipping address provided by the user.


private static async Task&lt;IReadOnlyList&lt;PaymentShippingOption&gt;&gt; GetShippingOptionsForAddressAsync(PaymentAddress address)
{
   // Compose a list of available shipping methods for this address.
    var methods = (address.Country.Equals(&quot;USA&quot;))
        ? ShippingMethodsDomestic
        : ShippingMethodsInternational;

    // Calculate the shipping cost for each available shipping method based on this address.
     return await Task.WhenAll(
         methods.Select(async (method) =&gt; new PaymentShippingOption(method, await 
                        GetShippingCostAsync(method, address))));
}
	 

Processing the payment response

Process the payment token returned in the payment response as part of the submissionResult.Response.PaymentToken object.


var tokenProcessingResult = PaymentRequestCompletionStatus.Failed;
    // TODO: Process payment token from submissionResult.Response.PaymentToken
    // If processing succeeded, set tokenProcessingResult to PaymentRequestCompletionStatus.Succeeded
	 

Completing the Payment Request

Send the payment mediator the updated tokenProcessingResult. If the returned status is “Succeeded,” the payment app will indicate success and will then return focus back to your app. If “Failed” is returned, the  payment app UI will indicate payment failure to the user.


// Notify payment app of processing result.
            submissionResult.Response.Complete(tokenProcessingResult); 
// Payment application will now disappear from UI. Transaction complete.
	 

Feature detect (check universal API contract version)

1. The minimum OS version that the Payment Request API will be supported on is the Windows 10 Anniversary Update. You can use the following code to check if the Payment Request API is supported on the user’s device/build. If the API is not supported, you can then direct users to use other means to complete the purchase in your app.


var isPaymentApiSupported = ApiInformation.IsTypePresent(Windows.ApplicationModel.Payments.PaymentMediator);
if (isPaymentApiSupported)
  {
        // Payment API is supported, continue with payment request creation.
  }
	 

Availability and Documentation

The Payment Request API will be available for testing as part of the SDK included with Build 15003 on phone and desktop. Developer documentation for the API is available here on MSDN.

Onboarding Requirements

For UWP applications, we support tokenized payment method(s) via integration with payment service providers. The response from a payment request will contain a microsoftpay token inside of which will be a single use token from your payment service provider. Microsoft requires authorization from you to request payment service provider tokens on your behalf. Therefore, before you can get started, we need you to follow a few steps to register for a seller account and provide the necessary authorization. To get started, visit Microsoft Seller Center to register, accept the terms and provide us access to request tokens on your behalf. Once you have done this, copy the resulting Merchant ID from the dashboard into your application when constructing a payment request. Then, when your application submits a payment request, you will receive a payment token from your processor which you will need to submit for payment.

Geos and Localization

Initially, this payment API can only be used by US based businesses to process US-region transactions. The user experience will support over 100 languages. Support for payments outside of the US will be added later at which time we will post an update to the developer community.

To Sum Up

Digital payments are on the rise and our team at Windows wants to help you take advantage of this trend. We’ve created an API that you can harness to improve in-app checkout experiences and enable increased purchase activity.

Windows users can expect a polished and trusted checkout experience that removes the need to reach for their credit card every time they want to make a purchase. We are excited to make this announcement and cannot wait for you to try out the API and provide us with your feedback.

How the UWP Community Toolkit helps Windows developers easily create well-designed and user-friendly apps

In August 2016, we introduced the open-source UWP Community Toolkit. It simplifies app development and enables developers to collaborate and contribute new capabilities on top of the Windows SDK for Windows 10. Developers can leverage the UWP Community Toolkit to build UWP apps for any Windows 10 device, including PC, mobile, Xbox, the Internet of Things and Hololens.

We recently caught up with two developers who have used the toolkit to help create their apps. Hermit Dave developed the Daily Mail Online app for Windows. It’s the official Windows app for the Daily Mail, a British newspaper. David Bottiau is a member of the Github organization, UWP Squad. He developed a Windows 10 app for TVShow Time, a site that helps you track your favorite TV shows.

We asked them how the UWP Community Toolkit helped them. Here’s what they had to say:

Tell us about the app you built with the help of the UWP toolkit.

Hermit Dave: I joined MailOnline in November 2015 to expand their mobile offering to Windows. After initial talks on Phone + Xbox offering, I suggested the UWP as a means to target all the platforms. After the initial release, Windows was deemed a suitable platform to try out UI + UX tweaks and the current version of the app kicked off in April 2016.

David Bottiau: I really needed a service that offers me a way to track my favorite TV series and animated shows, and I recently discovered the TVShow Time service. I use the beautiful TVShow Time web app really often and I wanted access to the information even faster and closer. So, I decided to bring the service to Windows 10 and Windows 10 Mobile using the existing API provided by TVShow Time team.

Why did you use the UWP Toolkit to help you create your app?

HD: Offline reading and availability is a major requirement for news apps and MailOnline strives to be among the best in news applications. News content often contains images and the toolkit’s ImageEx control proved itself very handy. In addition to offline images, the ability to control cache size is important. I previously created an offline image control and a cache mechanism and the toolkit provided a simple yet very elegant solution for both.

In addition to ImageEx and ImageCache, I have used the toolkit’s CacheBase to create VideoCache (offline animated previews) and ConfigurationCache to ensure they are kept up to date. The toolkit also contains helpers like HttpHelper which makes it easy to talk to Http data sources. I use this to make API calls as needed.

 DB: I started to use it to have access to a larger list of UI controls. Moreover, by simplifying/removing code for repetitive tasks, it helps me focus on the main part of app development. Either it is C# or XAML, I can work quickly and add new features faster.

Was the UWP Toolkit simple to use?

HD: Yes — image control can be replaced by ImageEx and can provide offline capability in one line of XAML code. Others, like creating custom cache helpers, reduces the effort to create similar functionality by a very huge margin.

DB: The UWP Toolkit is really simple to use because the different items (Controls, Helpers) are really well written. Moreover, the documentation goes straight to the point: You can read the markdown files (in GitHub) or as a website (http://docs.uwpcommunitytoolkit.com/).

And if it isn’t clear enough, you can try the sample app that gives a visual of what you can achieve with the code, a simple example that you can copy/paste in your app and a view of the documentation in case you want more explanation and you do not want to switch between the app and the website.

How was the UWP Toolkit helpful to you?

HD: The toolkit helped me to create offline images, custom cache, images, videos, configuration and trending data. Also, HttpHelper to make API calls. In one instance, I needed a card layout with drop shadow, and there’s a control for that, too.

DB: The UWP Toolkit gives me the ability to create beautiful apps in a short period of time and with the minimum effort (minimum code). The HamburgerMenu control allowed me to create the entry point of my application where users can navigate easily between the different pages. The AdaptativeGridView control is perfect for displaying a collection of items, like the collection of TV shows I am currently watching. The control is also useful because the item’s size will be adapted to the screen size; it has never been easier to create an app that looks great on a mobile, a tablet, a PC or even a TV.

The DropShadowPanel control can add some effects to the page/items of the page. I used it to highlight important elements like my TV show collection. Another effect is Blur; to make the app even more beautiful, I added a Blur background image for each show episode so users can get visuals along with the description of the episode. And the Helpers can reduce the amount of code needed to read/save data in the application, to register background tasks or even to push notifications.

To simplify, it is the combination of the current Windows 10 SDK and the added elements in UWP Community Toolkit that helped me to achieved a really beautiful app with the least effort.

Did you run into any glitches or issues in creating your app? If so, what were they?

HD: There are always glitches in code. I often refer to them as features. I contributed to the toolkit in places I thought it could do better.

Hermit Dave 

DB: I remember that there was a bug with the HamburgerMenu in v1.1. The property SelectedIndex could not be changed in code-behind. I really wanted to the ability to change the value and I did not understand why it wasn’t possible. So, I checked in the GitHub repository to see if they can fix that. The fact is that it was already fixed, and the update HamburgerMenu was then published in v1.2.

Did the UWP Toolkit make it easier for you to develop your apps and push them onto the app store? Why or why not?

HD: If I was hand-crafting the functionality in the toolkit — the bits I use — my effort would have increased significantly. The toolkit helps by offering building blocks that help you go from 0 to 60 in seconds.

DB: Whatever Windows 10 application you are doing, you’ll find at least one great thing in the toolkit. It could be a UI control, an animation/effect behavior, a simple method to access the LocalStorage, or a rich structure to create notifications.

Dave Bottiau

Do you have any suggestions on how the Toolkit could be improved?

HD: It’s a community toolkit. If there are things you think it can do better, do not hesitate to say so. Raise an issue, push a PR to make it better. Raise user voice for items you think the toolkit should add.

DB: I think developers still have go through a lot of effort to understand and create great animations. The Composition API is a really nice improvement to the Windows SDK and it will continue to grow and offer more features — but it should be also simple to make animations. The Toolkit added some great stuff like the Blur effect and the reorder grid animation. These are good enhancement but at the same time can be better. I heard that the Windows/XAML team is working on the simplification of the animation system and I am happy to hear it. I hope the Toolkit will be improved as well with this future evolution.

What advice would you give to other developers who want to develop UWP apps?

HD: The UWP SDK, the toolkit and Visual Studio make app development a joy. The toolkit allows you to re-use helpers, converters, extension methods, and components not in the SDK.

DB: If you want to develop a great UWP app and need some inspiration for User Interface, you can download the sample app of the UWP Community Toolkit and check UI Controls and Animations. Let the magic happen!

Are there any tips about the UWP toolkit that you can share with other devs? If so, what are they?

HD: The toolkit is much more than controls. There are tons of services, helpers, converters, extensions. There’s a library just for animations, which simplifies the use of Composition API.

DB: I’ll give only one tip: Please visit the GitHub repository and share with the other contributors.

Complete Anatomy: Award-Winning App Comes to Windows Store

3D4Medical has just completed the port of its award-winning flagship product Complete Anatomy to Windows Store using the Windows Bridge for iOS. The Windows Bridge is an open-source environment for Objective-C that provides support for third party APIs. The Windows Bridge was a very important component in 3D4Medical’s development team, bringing the high-resolution 3D models and smooth touch interface that its users were already familiar with to the world of Windows PC and Surface users.

3D4Medical created a Universal Windows Platform (UWP) app in response to the huge demand from its core audience of medical students and clinical professionals, many of whom use Windows devices. The app supports multiple Windows form-factors and device configurations. The interface can be manipulated with either a mouse or touch gestures. The experience particularly shines on Surfaces and other pen capable devices, where you can take advantage of Windows Ink support for smooth drawing and annotation.

Smooth interactions

As you can see in the example below, the UWP version of Complete Anatomy provides a rich user experience with smooth transitions and an elegant menu system that provides access to updatable quizzes and anatomy tutorials that are shared across iOS and Windows devices. With your finger, a Windows Pen or a mouse, you can quickly rotate skeletons to view points of interest from multiple perspectives. The high-definition models also scale smoothly as you zoom and pan over points of articulation and various anatomical systems.

Muscular, arterial, lymphatic, nervous, respiratory and digestive systems can be toggled on and off, annotated, labeled, drawn on and even saved for later reference. The app currently leverages Windows Ink for convenient pen interactions.

Wrapping Up

In porting Complete Anatomy to the Windows Store, 3D4Medical demonstrates that the Windows Bridge can help developers bring feature-rich, award-winning design to PCs and Surfaces in a short time span. This app shines on all Surface devices, whether it’s the Surface Pro line, the Surface Book or even an 84″ Surface Hub. Complete Anatomy brings over not only all the high-fidelity models and natural interactions already developed, but also extends the product with Windows capabilities like Windows Ink.

To learn more about cross-platform development, please refer to the documentation and articles linked below: