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.