Share an Image With Windows Store Apps Using C#

Today I introduce a new feature in Windows Store; a sharing application. In this article we learn another most common kind of content that a user might want to share with other people. Images and photos are the most common data format that people like to share. In my previous articles I showed you all the other data formats the user can share thourgh Windows Store Apps. You can find it on http://www.c-sharpcorner.com

In today's article we learn how to share an image with other people from the Windows Store Application. I will show you how to share an image from the app using XAML/C#. Here we use FileOpenPicker to enable the selection of an image and to share it over the internet.

Let's start to create an application step-by-step to share an image.

Step 1

Create a new Windows Store Application using C#.

Step 2

Here I design my MainPage.xaml with buttons and an image control.

<Page

x:Class="SharingContent.ShareImage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:SharingContent"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Grid>

<Grid.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="Black"/>

<GradientStop Color="White" Offset="1"/>

</LinearGradientBrush>

</Grid.Background>

<Grid Margin="0,100">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>

<RowDefinition Height="auto"/>

</Grid.RowDefinitions>

<StackPanel Orientation="Horizontal" Grid.Row="2" Margin="0,30" HorizontalAlignment="Center">

<Button x:Name="ShowUIButton" Content="Share" Click="ShowUIButton_Click" Width="121" />

</StackPanel>

<Button x:Name="SelectImageButton" Content="Select image" Grid.Row="0" Margin="0,30" HorizontalAlignment="Center" Click="SelectImageButton_Click" />

<Image x:Name="ImageHolder" Height="300" Width="709" Stretch="None" Grid.Row="1" HorizontalAlignment="Center" />

</Grid>

</Grid>

</Page>

Step 3

You need to add the right namespaces to your app so you can create and process the objects related to sharing.

using Windows.Storage;

using Windows.Storage.Pickers;

using Windows.Storage.Streams;
using Windows.ApplicationModel.DataTransfer;
using Windows.UI.Xaml.Media.Imaging;

Step 4

Create the starting point for any sharing operation by getting the object of the DataTransferManager Class.

DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();

Step 5

In this step I create an event handler that handles the Share Charm of the application.

dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager,
DataRequestedEventArgs>(this.ShareTextHandler);

Step 6

Here is the code for the event handler. Set some essential properties of the DataRequest object. This object contains the content that the user wants to share.

DataRequest requestData = e.Request;

requestData.Data.Properties.Title = "Share image Example";

requestData.Data.Properties.Description = "A demonstration that shows how to share text.";

Step 7

Now to add the main content to be shared. To add the image as a bitmap, use the SetBitmap method.

requestData.Data .SetStorageItems(imageItems);

RandomAccessStreamReference imageStreamRef = RandomAccessStreamReference.CreateFromFile(this.imageFile);

requestData.Data.Properties.Thumbnail = imageStreamRef;

requestData.Data.SetBitmap(imageStreamRef);

Note: It's recommended to use both SetBitmap and SetStorageItems for sharing a single image since the target app may only support one or the other.

Here is the full code that sets an image for a user to share:

using System;
using Windows.ApplicationModel.DataTransfer;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.Storage;

using Windows.Storage.Pickers;

using Windows.Storage.Streams;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

namespace SharingContent

{

public sealed partial class ShareImage : Page

{

public ShareImage()

{

this.InitializeComponent();

}

private StorageFile imageFile;

protected override void OnNavigatedTo(NavigationEventArgs e)

{

DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();

dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager,

DataRequestedEventArgs>(this.ShareTextHandler);

}

private void ShareTextHandler(DataTransferManager sender, DataRequestedEventArgs e)

{

if (this.imageFile != null)

{

DataRequest requestData = e.Request;

requestData.Data.Properties.Title = "Share image Example";

requestData.Data.Properties.Description = "A demonstration that shows how to share text.";

List<IStorageItem> imageItems = new List<IStorageItem>();

imageItems.Add(this.imageFile);

requestData.Data.SetStorageItems(imageItems);

RandomAccessStreamReference imageStreamRef = RandomAccessStreamReference.CreateFromFile(this.imageFile);

requestData.Data.Properties.Thumbnail = imageStreamRef;

requestData.Data.SetBitmap(imageStreamRef);

}

}

private async void SelectImageButton_Click(object sender, RoutedEventArgs e)

{

FileOpenPicker imagePicker = new FileOpenPicker

{

ViewMode = PickerViewMode.Thumbnail,

SuggestedStartLocation = PickerLocationId.PicturesLibrary,

FileTypeFilter = { ".jpg", ".png", ".bmp", ".gif", ".tif" }

};

StorageFile pickedImage = await imagePicker.PickSingleFileAsync();

if (pickedImage != null)

{

this.imageFile = pickedImage;

// Display the image in the UI.

IRandomAccessStream displayStream = await pickedImage.OpenAsync(FileAccessMode.Read);

BitmapImage bitmapImage = new BitmapImage();

bitmapImage.SetSource(displayStream);

ImageHolder.Source = bitmapImage;

}

}

private void ShowUIButton_Click(object sender, RoutedEventArgs e)

{

DataTransferManager.ShowShareUI();

}

}

}

Step 8

Now your app is ready to share an image. Run it and select an image you want to share.



Step 9

Click on the share button to activate the Share Charm.




Step 10

Enter the Email-Id of the recipients and click on the send button.