ShareMediaTask on Windows Phone 8

By Fons Sonnemans, posted on
2630 Views 9 Comments

The new Windows Phone 8 SDK has a new ShareMediaTask class which can be used to share your pictures from code. I wanted to use this class to share a WriteableBitmap. You can use it to share the picture using NFC (Tap+Send), apps or to social media like Twitter or Facebook. In this post I will explain how to implement this.

Demo App

I have created a demo app in which a Rectangle and a Ellipse are drawn inside the default ContentPanel grid. When you tap the Share button the ContentPanel is used as the input for a WriteableBitmap. This WriteableBitmap is than saved so it can be shared using the ShareMediaTask().

The XAML

The XAML is really basic.

<Grid x:Name="LayoutRoot"
      Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="12,17,0,28">
        <TextBlock Text="SHARE MEDIA DEMO"
                    Style="{StaticResource PhoneTextNormalStyle}"
                    Margin="12,0" />
        <TextBlock Text="mainpage"
                    Margin="9,-7,0,0"
                    Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,0"
          Grid.RowSpan="2">
        <Rectangle Fill="Blue"
                    HorizontalAlignment="Left"
                    Height="253"
                    Margin="101,113,0,0"
                    Stroke="Black"
                    VerticalAlignment="Top"
                    Width="192" />
        <Ellipse Fill="#FF42B51B"
                  HorizontalAlignment="Left"
                  Height="236"
                  Margin="175,237,0,0"
                  Stroke="Black"
                  VerticalAlignment="Top"
                  Width="226" />
    </Grid>
        
    <Button Content="Share"
            VerticalAlignment="Top"
            Grid.Row="2"
            Click="ButtonShare_Click" />

</Grid>

The code

In the ButtonShare_Click() method a screenshot of the ContentPanel is created using a WriteableBitmap. This WriteableBitmap is then saved to the MediaLibrary. The Path of the ShareMediaTask object is set using the GetPath() extension method on the picture class. The Microsoft.Xna.Framework.Media.PhoneExtensions namespace is brought into scope using a 'using' statement in the header of the class. Finally I called the Show() method on the ShareMediaTask object.

using Microsoft.Xna.Framework.Media.PhoneExtensions;

...

private void ButtonShare_Click(object sender, RoutedEventArgs e) {
    var bmp = new WriteableBitmap(this.ContentPanel, null);
    var width = (int)bmp.PixelWidth;
    var height = (int)bmp.PixelHeight;
    using (var ms = new MemoryStream(width * height * 4)) {
        bmp.SaveJpeg(ms, width, height, 0, 100);
        ms.Seek(0, SeekOrigin.Begin);
        var lib = new MediaLibrary();
        var picture = lib.SavePicture(string.Format("test.jpg"), ms);

        var task = new ShareMediaTask();

        task.FilePath = picture.GetPath();

        task.Show();
    }
}

I have also tried to save the WriteableBitmap to the IsolatedStorage. But the ShareMediaTask couldn't cope with that (bummer). I hope Microsoft will fix that in a future version of the SDK.

I really want to thank Clemens Schotte for solving this part of the puzzle.

Closure and download

I hope you like my solution. You can download my code here.

Cheers,

Fons

All postings/content on this blog are provided "AS IS" with no warranties, and confer no rights. All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors. The content on this site is licensed under a Creative Commons Attribution By license.

Leave a comment

Blog comments

Apoorv Kumar Upadhyay

04-Feb-2013 10:51
I implemented this in one of my image editing applications . I wish to ask does the same code helps on sharing on social networks connected to the phone?

sonali

30-Jul-2013 7:57
I have used the same code but I am getting unauthorised access exeption on the line: var picture = lib.SavePicture(string.Format("test.jpg"), ms);

sonali

30-Jul-2013 8:04
this exception occurs on the line:var picture = lib.SavePicture(string.Format("test.jpg"), ms); An exception of type 'System.UnauthorizedAccessException' occurred in Microsoft.Xna.Framework.ni.dll but was not handled in user code.

sonali

30-Jul-2013 8:37
I got my mistake.i did not add ID_CAP_MEDIALIB_PHOTO capability

sonali

30-Jul-2013 8:41
thanx this really helped

donfitz

16-Jan-2014 7:01
Thanks for writing this. It worked flawlessly. You are a gentleman and a scholar.

Kasper Mathiesen

01-Feb-2014 10:33
Thanks for this, was the best written guide I found...

Perihan

15-May-2014 1:34
Thank you so much. It is very useful!

Mudassir

20-Jun-2014 9:43
picture.GetPath(); is not working for me please help