Sharing Rich Content in Windows 8 Apps

From the book

Building Windows 8 Apps with C# and XAML

Learn More Buy

From the book

From the book 

Building Windows 8 Apps with C# and XAML

Learn More Buy

Sharing content is now more popular than ever in today’s Internet-connected social media landscape. In previous versions of Windows, the primary way to share data between applications was by using the Windows Clipboard. If you wanted to build an application that could post content to the Internet, you had to build the process yourself by creating a user interface for sharing content and building the right code to interact with the various APIs exposed by different social media providers. Windows 8 changed the game by providing a standard API for sharing different types of data that may range from lightweight text to bitmap images and even file system objects.

The Share contract enables applications to share data in a standard way without having to know the details of what other applications are installed on the system or how they might handle shared data. Your application can act as a Share Source by providing content the user may want to share. It may also act as a Share Target that consumes content. Share interactions are facilitated through the DataTransferManager WinRT component that exists in the Windows.ApplicationModel.DataTransfer namespace. Full documentation for this namespace is available online at http://msdn.microsoft.com/en-us/library/windows/apps/windows.applicationmodel.datatransfer.aspx.

Sourcing Content for Sharing

The Wintellog3 application acts as a Share Source and can share details about blogs, posts, and images. Before you can successfully share, you will need appropriate applications installed that can receive the content. The ImageHelper2 application from Chapter 3, Extensible Application Markup Language (XAML) can receive images; the Mail client can receive links and text. I recommend you download, build, and deploy the Windows 8 Sample SDK application called “Sharing content target app sample” available online at http://code.msdn.microsoft.com/windowsapps/Sharing-Content-Target-App-e2689782/.

This application is specifically designed to receive all shared content types and is a great way to see how the process works. When the user chooses the Share charm, the DataRequested event is fired on the DataTransferManager component. The App class provides a method to register for this event:

public void RegisterForShare()
{
    var dataManager = DataTransferManager.GetForCurrentView();
    dataManager.DataRequested += DataManager_DataRequested;
}

The event is fired with a reference to the DataTransferManger and a parameter of type DataRequestedEventArgs. The parameter exposes a Request property of type DataRequest that in turn exposes a DataPackage object. This object is used to wrap any data you wish to share with other applications. Table 1 lists the types of data you can associate with the package.

Table 1: Data Types Supported by the DataPackage Class

The data package also provides support for asynchronous requests by setting a data provider. The provider indicates the type of information to provide along with a callback that is invoked when the target application is ready for the data. This approach is used when the data you have to share requires significant processing time to package and deliver.

Along with the actual data content, you may also provide a thumbnail image that represents the data, a title, and a description. To actually implement the sharing, a property is exposed on the main App class to allow each individual page to supply a handler for sharing so that the proper context can be provided:

public Action<DataTransferManager, DataRequestedEventArgs> 
    Share { get; set; }

Pages that don’t provide any sharing functionally will set this to null when they are navigated to like the main GroupedItemsPage:

protected override void LoadState(Object navigationParameter, 
    Dictionary<String, Object> pageState)
{
    App.Instance.Share = null;
    DefaultViewModel["Groups"] = App.Instance.DataSource.GroupList;
    groupGridView.ItemsSource = 
        groupedItemsViewSource.View.CollectionGroups;
}

The handler itself checks to see if a callback is registered, like this:

void DataManager_DataRequested(DataTransferManager sender, 
    DataRequestedEventArgs args)
{
    if (Share != null)
    {
        Share(sender, args);
    }
}

If no data is supplied, a message will be provided to the user indicating there is nothing to share. You can provide additional information if necessary to indicate why the share operation failed. The following code is added after the check to see if a callback exists:

else
{
    args.Request
        .FailWithDisplayText(
        "Please choose a blog or item to enable sharing.");
}

The result of a share attempt is shown in Figure 1.

Figure 1 A failed share attempt with a custom message.

The pages that allow sharing register a method to handle the callback:

App.Instance.Share = Share;

If the user navigates to a blog entry, the share operation will provide the URL for the blog. First, a “reality check” ensures a current blog exists:

var group = DefaultViewModel["Group"] as BlogGroup;         
if (group == null)
{
    return;
}

Next, a title and description are supplied along with the URL:

dataRequestedEventArgs.Request.Data.Properties.Title = group.Title;
dataRequestedEventArgs.Request.Data.SetUri(group.RssUri);
dataRequestedEventArgs.Request.Data.Properties.Description = 
    "Wintellog RSS feed.";

The ItemDetailPage contains more complex logic for sharing. If the user simply invokes the Share charm without selecting any text, the application will provide a link to the blog post along with the entire contents:

dataRequestedEventArgs.Request.Data.SetText(item.Description);

If an image exists for the blog post, the image itself is packaged as a bitmap:

if (item.DefaultImageUri != null)
{
    dataRequestedEventArgs.Request.Data.SetBitmap(
        RandomAccessStreamReference
            .CreateFromUri(item.DefaultImageUri));
}

The information for the blog post is also packaged using the custom data format.

Custom Data

Custom data enables you to package data based on a well-known schema like one provided at http://schema.org/ or your own. A schema is provided for blog posts at http://schema.org/BlogPosting, so any application that recognizes that schema can parse the information that is shared.

Custom data is typically stored in a JSON format. Due to limitations in the built-in DataContractJsonSerializer class (it does not provide a standardized format and requires attributes to successfully serialize an instance), I chose to use the popular open source Json.NET serializer by James Newton-King. You can read about it at http://james.newtonking.com/projects/json-net.aspx.

The library is packaged using NuGet (http://nuget.org), so installing it is as simple as opening the package manager (Tools[ra]Library Package Manager[ra]Package Manager Console) and typing the following (note the package name is case sensitive):

install-package Newtonsoft.Json

This automatically pulls down all necessary files and inserts a reference into the current project. This has already been done for you in the sample application. With the Json.NET library, I can create an anonymous type to hold the blog information and serialize it to JSON with a single line of code, as shown in Listing 1.

Listing 1: Serializing a Dynamic Type with Json.NET

private static async Task<string> CustomData(BlogItem item)
{
    var schema = new
        {
            type = "http://shema.org/BlogPosting",
            properties = new
                {
                    description = string.Format(
                    "Blog post from {0}.", 
                    item.Group.Title),
                    image = item.DefaultImageUri,
                    name = item.Title,
                    url = item.PageUri,
                    audience = "Windows 8 Developers",
                    datePublished = item.PostDate,
                    headline = item.Title,
                    articleBody = item.Description
                }
        };
    return await JsonConvert.SerializeObjectAsync(schema);
}

To package the custom data, the SetData method is called and passed the schema and the JSON content:

var data = await CustomData(item);
dataRequestedEventArgs.Request.Data.SetData(
    "http://schema.org/BlogPosting", data);

There are hundreds of existing schemas available for sharing rich data and content between applications. If you want to provide your own schema, you simply need to provide a unique URL that describes the schema format and then package the data using that schema. Any application that is aware of your schema can process the data by checking the schema type and handling the resulting data. You will learn how to receive and process shared data later in this chapter.

Text Selection

What if the user only desires to share a small excerpt from the blog post? Text selection is built into the existing text-based XAML controls. The content of the blog posts are hosted in a RichTextBlock control. The control exposes a SelectionChanged event:

<RichTextBlock x:Name="richTextBlock" Width="560" 
    Style="{StaticResource ItemRichTextStyle}"
    SelectionChanged="RichTextBlock_SelectionChanged_1">

Whenever this event fires, the selected text is saved to a local variable:

private void RichTextBlock_SelectionChanged_1(object sender, 
    RoutedEventArgs e)
{
    var richTextControl = sender as RichTextBlock;
    _selection = richTextControl != null ? 
        richTextControl.SelectedText : string.Empty;
}

When the Share charm is invoked and a selection exists, it is provided like this:

dataRequestedEventArgs.Request.Data.Properties.Title = 
    string.Format("Excerpt from {0}", item.Title);
dataRequestedEventArgs.Request.Data.Properties.Description =
    string.Format("An excerpt from the {0} blog at {1}.", 
    item.Group.Title, item.PageUri);
dataRequestedEventArgs.Request.Data.SetText(
    string.Format("{0}\r\n\r\n{1}", _selection, item.Group.RssUri));

Figure 2 shows the result of selecting a single sentence from a blog post then sharing it to the sample application referred to earlier in this chapter.

Figure 2 Sharing a simple excerpt

The decision to include the URL of the original post in the text instead of the package itself is an example of targeting the share for a specific purpose. It is the excerpt that is the focus when text is selected, not the source page. Sharing the source URL in the main package may cause other applications to pull the full page and lose the intent of simply sharing an excerpt. Therefore, the only content provided is in the text portion of the data package.