DotNetDoc - Daniel Egan

If you have ever tried to debug a windows phone application that uses the Media Library, you have come across the following screen.

This is because the phone will not let you browse to your Media Content while you are connected to Zune……

On the other hand, Visual Studio will not let you debug if you are not connected to Zune….

So what are you supposed to do???

WPConnect.exe will solve your problem.  It is a tool that you can download that will allow you to debug while Zune is NOT running.

To get the tool, go to http://create.msdn.com and click on the Download The Tools link.

IMPORTANT NOTE :  This assumes you have already installed the Windows Phone Developer tools. If you have not, download and install them first.

From here, you can download the October 2010 update to the Windows Phone Developer Tools 

This includes (among other things) the WPConnect tool.  Once this is installed, open up a cmd prompt and navigate to

%ProgramFiles%\Microsoft SDKs\Windows Phone\v7.0\Tools\WPConnect     (for 32 bit os)

or

%ProgramFiles (x86)%\Microsoft SDKs\Windows Phone\v7.0\Tools\WPConnect (for 64 bit os)

Leave the window open, don’t run the WPConnect.exe yet.

Connect your phone to your computer and make sure that Zune launches and sees your phone.

Once Zune is launched and connected,  CLOSE the Zune software

Go to the command prompt and type WPConnect.exe and hit enter

It will read:

       Connecting to Device ‘Your device name here’

       Connection Established

It will now allow you to navigate to your Media so that you can test applications that work with the Media Library.

I hope that helps.

Happy Coding – Daniel Egan – DotNetDoc

Update : My buddy Tim Heuer pointed out that when you are saving an image to the library, you need to make sure that you have the correct orientation.   Instead of repeating the information here, I will instead point you to his great blog post on the subject. GO HERE to check it out.

In the last post, we showed you how to capture a picture in your application when hooking to the ‘extras’ menu on windows phone.  Once you have manipulated the picture you will want to save it in the media library.  In this post we will walk you through the steps to do that.

Once you have made the changes to the picture you captured (Crop, Color, Black and White, whatever), you then want to save your image to IsolatedStorage.

To do this we first need to add a using statement to the top of our class file.

using System.IO.IsolatedStorage;

Remember in our last post we saved the image returned from the camera in a WriteableBitMap.  (see below code above //Save to Global Bitmap)

(This is the code from the last post --  We only added the last line)

MediaLibrary library = new MediaLibrary();
              Picture picture = library.GetPictureFromToken(queryStrings["token"]);

              //Create bitmap
              BitmapImage bitmap = new BitmapImage();
              bitmap.SetSource(picture.GetImage());
              WriteableBitmap picLibaryImage = new WriteableBitmap(bitmap);
              retrievePic.Source = picLibaryImage;
              //Save to Global Bitmap

              App.CapturedImage = picLibaryImage;

We are going to continue this code by first adding it to a Global Variable placed inside App.xaml.cs called Captured Image

//Global variables for the WriteableBitmap objects used throughout the application.
public static WriteableBitmap CapturedImage;

Now that we have that saved globally, we want to first save the picture to IsolatedStorage THEN to the media library.  This would normally be done when an event is fired, like a user clicking a save button.

First save the image to isolated storage

//Create filename for JPEG in isolated storage
           String tempJPEG = "TempJPEG.jpg";

           //Create virtual store and file stream. Check for duplicate tempJPEG files.
           var myStore = IsolatedStorageFile.GetUserStoreForApplication();
           if (myStore.FileExists(tempJPEG))
           {
               myStore.DeleteFile(tempJPEG);
           }
           IsolatedStorageFileStream myFileStream = myStore.CreateFile(tempJPEG);

           //Encode the WriteableBitmap into JPEG stream and place into isolated storage.
           Extensions.SaveJpeg(App.CapturedImage, myFileStream, App.CapturedImage.PixelWidth, App.CapturedImage.PixelHeight, 0, 85);
           myFileStream.Close();

We then use the file we just saved to create a stream so we can save it to the media library

//Create a new file stream.
           myFileStream = myStore.OpenFile(tempJPEG, FileMode.Open, FileAccess.Read);

           //Add the JPEG file to the photos library on the device.
           MediaLibrary library = new MediaLibrary();
           Picture pic = library.SavePicture("SavedPicture.jpg", myFileStream);
           myFileStream.Close();

And that’s all you need to do.

In the next post we will show you how to use the WPConnect.exe tool to Debug your application without using Zune.  This allows you to navigate to the pictures hub while still connected to Visual Studio.

Happy Coding – Daniel Egan – DotNetDoc

In the last episode of the WP7 Minute on The Sociable Geek we showed you how an application can be integrated into the Pictures Hub or the camera using the ‘extras’ menu.  If you want to see the video, then you can check it out on TheSociableGeek.com  here.

In this post we are going to show you the code that allows you to do this.

Since “WHAT” you do with the picture in your application is up to you (i.e.. enhance color, cropping a photo, turning Black and white), we are going to focus on the integration to the ‘extras’ menu only.

The first thing you need to do is add an XML file to your project.  Right click on your project and select Add> New Item.

Select XML File from the menu and name it Extras.xml

Add the following XML to Extras.xml file and save it.  Make sure you spell it correctly.

When WP7 Detects this XML file in you project, it will add your application to the ‘extras’ menu.

This is where it gets specific to your application.  In this sample, we are just showing you how to retrieve the picture that was passed (either from the camera or the pictures hub), and consume it so you can make your changes to it.

On the first page that opens in your application (usually MainPage.xaml.cs) the following using statements to the top of the page.

NOTE: You will have to add a reference to Microsoft.XNA to your project if you do not already have one.

using System.Windows.Media.Imaging;
using Microsoft.Phone;
using System.IO;
using Microsoft.Xna.Framework.Media;
using System.Windows.Navigation;

Next, add an OnNavigated override method to your page right below the constructor (this will run BEFORE your constructor)

protected override void OnNavigatedTo(NavigationEventArgs e)
       {
           base.OnNavigatedTo(e);
           //Get a dictionary of query string keys and values
           IDictionary<string, string> queryStrings = this.NavigationContext.QueryString;

           //Ensure at least one querysting
           if (queryStrings.ContainsKey("token"))
           {
               MediaLibrary library = new MediaLibrary();
               Picture picture = library.GetPictureFromToken(queryStrings["token"]);

               //Create bitmap
               BitmapImage bitmap = new BitmapImage();
               bitmap.SetSource(picture.GetImage());
               WriteableBitmap picLibaryImage = new WriteableBitmap(bitmap);
               retrievePic.Source = picLibaryImage;

               
           }
       }

This section allows you to grab the image that comes in once the use selects your application on the image menu.   The retrievePic variable references an image control that is placed on this page in XAML.

<Image  HorizontalAlignment="Left" Margin="6,18,0,0" Name="retrievePic" Stretch="Uniform" VerticalAlignment="Top" Width="480"/>

What you do with the picture from here is up to you. Color it, Crop it, turn it black and white… whatever you want.

In the next post, we will show you how to save something to the image library from your application.

Happy Coding – Daniel Egan  - DotNetDoc

The Windows Phone 7 Minute is a show to discuss the features of the Windows Phone 7.  In the show we will talk about things that are important to both Consumers and Developers.  From Live Tiles, to Push Notifications, to cut-and paste, we will talk about the things that are important to you.  If you want a particular subject covered, please drop us a line.

Episode I : Hubs and Panoramas

In this episode, we discuss the difference between a hub and a panorama and what the benefits are of each.

Enjoy

There has been a lot noise on twitter in the #wp7 and #wp7dev tags about the push notification app limit (Live Tiles) . If you want to read up on this limitation you can head over to Jamie Rodriguez’s blog here : http://bit.ly/hsl4EF 

In talking to people, I realized that those that did not have the phone yet, had no idea what Live Tiles were or why they should care.  So I created a short video to demonstrate what some of the developers are doing to create unique experiences for their applications on Windows Phone 7.

Enjoy