Add Sharing to your UWP App

With Windows 10 the original Charms introduced with Windows 8 have gone. Old Windows 8.x apps will display a window menu with those commands if supported in the app e.g.

You’ll also notice the icon has changed in Windows 10 to a kind of “three person group hug from above” image whereas they had a kind of clockwise movement to them in Windows 8.1. When you take a look around the first-party apps in Windows 10 many make use of the same Share functionality but it is implemented within the app UI, either in an AppBar or somewhere relevant within the body of the app. For example Edge displays the Share button prominently at the top right of the window. The Store app displays a Share link inside the details for a specific app. Once you tap this the share experience is very similar to Windows 8.x.

Windows Phone never supported charms but did provide the same sharing API from 8.1.  My Charming project originally started out by providing these for WP8.0 apps. Apps would have to add a Share button to the AppBar or menu and trigger the full-screen sharing experience. Moving your app to Windows 10 you will want to make use of sharing wherever it is relevant to your app. Taking an approach like Edge would mean adding a TopAppBar. You might use something like the following XAML:-

<Page.TopAppBar>
  <CommandBar>
    <CommandBar.PrimaryCommands>
      <AppBarButton Label="Share" Icon="Share" Click="AppBarButton_Click"/>
    </CommandBar.PrimaryCommands>
  </CommandBar>
</Page.TopAppBar>

Until you realise that there isn’t an Icon called Share. It’s not a member of the Symbol enumeration which defines common symbols taken from the Segoe MDL2 Assets font. Luckily the actual glyph is available and we just need to use slightly longer syntax to specify it using a FontIcon:-

<Page.TopAppBar>
  <CommandBar>
    <CommandBar.PrimaryCommands>
      <AppBarButton Label="Share" Click="AppBarButton_Click">
        <AppBarButton.Icon>
          <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="& #xE72D;"/>
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.TopAppBar>

That defines a visual element to start sharing, there are two tasks to be completed to allow successful sharing:-

The handler for that button click must call the API which displays the Sharing prompt on screen. On Windows PCs this pops out from the right-hand side and on phones it is a full page view. The code can be as simple as this:-

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
   Windows.ApplicationModel.DataTransfer.DataTransferManager.ShowShareUI();
}

The other vital part of the process is to setup an event handler for the DataTransferManager which is called when the Share screen appears and asks your app for available data:-

Windows.ApplicationModel.DataTransfer.DataTransferManager.GetForCurrentView().DataRequested += MainPage_DataRequested;

The handler for this merely checks the presence of some text and if available shares it:-

void MainPage_DataRequested(Windows.ApplicationModel.DataTransfer.DataTransferManager sender, Windows.ApplicationModel.DataTransfer.DataRequestedEventArgs args)
{
   if(!string.IsNullOrEmpty(ContentText.Text))
   {
      args.Request.Data.SetText(ContentText.Text);
      args.Request.Data.Properties.Title = Windows.ApplicationModel.Package.Current.DisplayName;
   }
   else
   {
      args.Request.FailWithDisplayText("Nothing to share");
   }
}

This is only a very basic example. The package title is merely the app name. Imagine you have a news app – you may want to share the article title and a Url to the article on the web. You will probably want to control the availability of the Share button. For example in Edge the button is disabled while a page is loading and enabled once your sat on a finished page.

By adding a Share button to your app you open it up to a variety of targets with very little investment – suddenly you have a mechanism to share your app content across social networks, email and productivity software like OneNote. Unlike Windows 8 you have the power to control the visibility and location of the share command so it fits best with how your app works – but it makes sense to use the same icon as your users will be familiar with this from elsewhere in the system.