Share Content of WebView Control in Windows Store Apps Using C#

I will show you how to share the content of a WebView control using share contract.

I have already described in my earlier articles how to use Share Contract in Windows Store apps using C# and also given the details of all the data formats that you can share to others via email by using Share Contract. 

Today I will describe the Share Contract with the WebView control. We can also share the content of a WebView control using Share Contract. WebView may contain either the HTML format data or it may contain the Navigate URL of a website.

Applications that use the WebView can share the contents of the WebView control via the Share contract. To share the content of a WebView control, select some part of the WebView content and share this using Share Contract.

The following are the steps to share the selected content of a WebView control using Share Contract in C#/XAML.

Step 1

Create a new Windows Store Application using C#.

Step 2

Here I design my MainPage.xaml with buttons to share content and an WebView control. I give some URL of that control to show the webpage.

  1. <Page    
  2.     x:Class="ShareContentwithWebViewControl.MainPage"    
  3.  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     
  5.     xmlns:local="using:ShareContentwithWebViewControl"     
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"     
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     
  8.     mc:Ignorable="d">   
  9.     <Grid x:Name="LayoutRoot" Background="Red" HorizontalAlignment="Center" Margin="0,50,0,0" VerticalAlignment="Top">   
  10.         <Grid.RowDefinitions>   
  11.             <RowDefinition Height="800"/>   
  12.             <RowDefinition Height="*"/>   
  13.         </Grid.RowDefinitions>   
  14.         <StackPanel Orientation="Horizontal" Margin="0,10,0,0" Grid.Row="1">   
  15.             <Button x:Name="ShareContent" Content="Share Content" Margin="0,0,10,0" Click="Share_Click"/>  
  16.         </StackPanel>  
  17.         <Border BorderThickness="1" BorderBrush="#FF707070"  Grid.Row="0" Margin="10,0,0,0">  
  18.             <Grid>  
  19.                 <WebView x:Name="WebView7"   Width="1000" Height="800"/>  
  20.             </Grid>  
  21.         </Border>  
  22.     </Grid>  
  23. </Page>   
Step 3

In the .cs file you need to add the neccessary namespaces to your app so you can create and process the objects related to sharing.

  1. using Windows.ApplicationModel.DataTransfer;  
Step 4

Now, we open the view for Share on button click using the GetForCurrentView() method of the DataTransferManager class. 

  1. private void Share_Click(object sender, RoutedEventArgs e)    
  2. {    
  3.     dataTransferManager = DataTransferManager.GetForCurrentView();    
  4.     
  5.     DataTransferManager.ShowShareUI();    
  6. }  
Step 5

Create an Event handler of the DataRequested event in the click event. This event occurs when you share the content.

  1. dataTransferManager.DataRequested += dataTransferManager_DataRequested;  
Step 6

Here is the coding of the DataRequested event that we defined previously.

First I get the DataPackage object from the webview control that contains the the selected contents; see:
  1. DataRequest request = args.Request;  
  2.   
  3. DataPackage p = WebView7.DataTransferPackage;  

Check if any content is selected or not. If selected give it to the DataRequest object to share to other people via email; that is done with:

  1. if (p.GetView().Contains(StandardDataFormats.Text))    
  2. {    
  3.      p.Properties.Title = "WebView Sharing Excerpt";    
  4.     
  5.      p.Properties.Description = "This is a snippet from the content hosted in the WebView control";    
  6.     
  7.      request.Data = p;    
  8.     
  9. }    
  10. else    
  11. {    
  12.     request.FailWithDisplayText("Nothing to share");    
  13.     
  14. }   
Here is the full code

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.IO;  
  4. using System.Linq;  
  5. using Windows.ApplicationModel.DataTransfer;  
  6. using Windows.Foundation;  
  7. using Windows.Foundation.Collections;  
  8. using Windows.UI.Xaml;  
  9. using Windows.UI.Xaml.Controls;  
  10. using Windows.UI.Xaml.Controls.Primitives;  
  11. using Windows.UI.Xaml.Data;  
  12. using Windows.UI.Xaml.Input;  
  13. using Windows.UI.Xaml.Media;  
  14. using Windows.UI.Xaml.Navigation;  
  15. namespace ShareContentwithWebViewControl  
  16. {  
  17.     public sealed partial class MainPage : Page  
  18.     {  
  19.         public MainPage()  
  20.         {  
  21.             this.InitializeComponent();  
  22.         }  
  23.         DataTransferManager dataTransferManager = null;  
  24.         protected override void OnNavigatedTo(NavigationEventArgs e)  
  25.         {  
  26.             WebView7.Navigate(new Uri("http://www.c-sharpcorner.com"));  
  27.         }  
  28.         private void Share_Click(object sender, RoutedEventArgs e)  
  29.         {  
  30.             dataTransferManager = DataTransferManager.GetForCurrentView();  
  31.             dataTransferManager.DataRequested += dataTransferManager_DataRequested;  
  32.             DataTransferManager.ShowShareUI();  
  33.         }  
  34.         void dataTransferManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)  
  35.         {  
  36.             DataRequest request = args.Request;  
  37.             DataPackage p = WebView7.DataTransferPackage;  
  38.             if (p.GetView().Contains(StandardDataFormats.Text))  
  39.             {  
  40.                 p.Properties.Title = "WebView Sharing Excerpt";  
  41.                 p.Properties.Description = "This is a snippet from the content hosted in the WebView control";  
  42.                 request.Data = p;  
  43.             }  
  44.             else  
  45.             {  
  46.                 request.FailWithDisplayText("Nothing to share");  
  47.             }  
  48.         }  
  49.     }  
  50. }    
Step 7

Now my app is ready to share contents of the WebView control through Share Contract. Run the app, select the content from the WebView control and press the button.

Share-Content-of-WebView-In-Windows-Store-Apps.jpg

Give the Email Id and send it.

Share-Contract-With-WebView-Control-In-Windows-Store-Apps.jpg