| Comments

Silverlight 5 is finally released!  Congratulations to the team for getting through some of the toughest parts of finishing a product and validating with customers.  It’s been a pretty crazy year for the Silverlight team and this is a really good release for the product bringing some solid features to the platform for folks to leverage in building their apps.

In addition to the platform having a release, I was really pleased to see an update to the Silverlight Toolkit, which has been one of the most popular things almost every Silverlight developer/application uses.  If you didn’t know where to get things, here’s some links for you:

Rather than enumerate all the good features that were finished from the RC/Beta, you should head on over to listen/watch Pete Brown’s presentation on the Silverlight 5 release overview.  He also has a post about the release enumerating in short form (with links to tutorials for some of the key features) on his blog.

What I think is really cool is also the amount of effort put into the Silverlight Toolkit for this release.  The one large thing of note is the extensions to enhance your 3D development experience in Silverlight 5.  David Catuhe has a post outlining in great detail some of the 3D extensions included in the toolkit.  You should really go check out his post.  Scrolling to the bottom I was really surprised/impressed to see a set of 3D samples included to help you understand how to use this feature:

  • Bloom – uses the Content Pipeline and post-processing effects
  • CustomModelEffect
  • Generated geometry – how 3D models generated by code
  • Particles – c’mon, who doesn’t like a particle generator!
  • Platformer - while not 3D it appears, it is a complete game with levels
  • 3D Animation
  • Skinning – shows skinning a character using the content pipeline

I mean, wow, great stuff David! 

I hope you all enjoy the release of Silverlight 5 and kudos to the team for getting it out the door. Go download the bits and start building awesome stuff.

| Comments

It looks like the MSDN team has arranged some deep dives into Windows Phone development across the country.  I am sure that for Microsoft developers Windows Phone 7 represents a new opportunity to get out in the marketplace with your XAML skills and get recognized (paid) for your work!  It has been exciting to see a lot of interest from Silverlight developers in Windows Phone 7.

Windows Phone 7

If you are one that hasn’t had the time to soak in the platform or simply haven’t been paying attention, you are in luck.  There are a series of launch events happening across the country, most of which involve a 2-day training (free) for Windows Phone 7.  Here’s what I could gather for the basic agenda for these 2-day workshops:

  • Day 1: Intro, sensors, application lifecycle, tiles, application bar, connecting to services, recording audio, capturing pictures, design guidelines, game development with Silverlight/XNA, etc. – all the fundamentals to get started
  • Day 2: turn your vision into an app, learn about (and submit your app) the Marketplace…or continue learning using a bunch of hands-on labs and the tools to write applications in Silverlight and XNA

It seems like a pretty good deal and you should check them out.  Bringing your own laptop is encouraged and the tools are free!  Check out these opportunities in a city near you – aside form the 2-day events there also looks to be some 1-day sessions as well in some areas.  Check out all the details at http://www.msdnevents.com/wp7 and register for a location near you!

| Comments

I was spelunking around playing with Silverlight in Windows Phone 7 and specifically the CameraCaptureTask.  The “tasks” are APIs that allow you to interact with phone-specific functionality like the camera, picture picker, phone dialer, etc.  A whole list of the available tasks in the Microsoft.Phone.Tasks namespace can be found in the developer documentation.

I was basically creating a simple application that would allow you to choose (PhotoChooserTask) or take a picture (CameraCaptureTask) and then display the picture (and later post it online or something).  Here was my basic XAML structure:

   1: <Grid x:Name="LayoutRoot" Background="Transparent">
   2:     <Grid.RowDefinitions>
   3:         <RowDefinition Height="Auto"/>
   4:         <RowDefinition Height="*"/>
   5:     </Grid.RowDefinitions>
   6:  
   7:     <!--TitlePanel contains the name of the application and page title-->
   8:     <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
   9:         <TextBlock x:Name="ApplicationTitle" Text="PICTURE POSTER" Style="{StaticResource PhoneTextNormalStyle}"/>
  10:         <TextBlock x:Name="PageTitle" Text="take and post" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  11:     </StackPanel>
  12:  
  13:     <!--ContentPanel - place additional content here-->
  14:     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  15:         <Image Margin="8,8,8,159" x:Name="ChosenPicture" />
  16:         <Button Click="OnPostClicked" x:Name="PostPic" Content="POST" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,8,47" Width="199"/>
  17:         <TextBlock x:Name="PostedUri" TextWrapping="Wrap" VerticalAlignment="Bottom" Margin="8,0,8,20"/></Grid>
  18: </Grid>
  19:  
  20: <!--Sample code showing usage of ApplicationBar-->
  21: <phone:PhoneApplicationPage.ApplicationBar>
  22:     <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
  23:         <shell:ApplicationBar.MenuItems>
  24:             <shell:ApplicationBarMenuItem Text="take picture" Click="OnMenuTakeClicked"/>
  25:             <shell:ApplicationBarMenuItem Text="choose picture" Click="OnMenuChooseClicked"/>
  26:             <shell:ApplicationBarMenuItem Text="save picture" Click="OnSavePictureClicked" />
  27:         </shell:ApplicationBar.MenuItems>
  28:     </shell:ApplicationBar>
  29: </phone:PhoneApplicationPage.ApplicationBar>

And the initial code to trigger the task from a MenuItem:

   1: private void OnMenuTakeClicked(object sender, EventArgs e)
   2: {
   3:     CameraCaptureTask cam = new CameraCaptureTask();
   4:     cam.Completed += new EventHandler<PhotoResult>(OnCameraCaptureCompleted);
   5:     cam.Show();
   6: }
   7:  
   8: private void OnMenuChooseClicked(object sender, EventArgs e)
   9: {
  10:     PhotoChooserTask pix = new PhotoChooserTask();
  11:     pix.Completed += new EventHandler<PhotoResult>(OnCameraCaptureCompleted);
  12:     pix.ShowCamera = true;
  13:     pix.Show();
  14: }

As you can see it is pretty simple and brings up the OS-standard camera and/or photo chooser. 

NOTE: if you use the PhotoChooserTask you can also initiate taking a new picture from that task as well.

After the picture is chosen (from a new pic or from a picker) I put the item in the Image control in my XAML:

   1: void OnCameraCaptureCompleted(object sender, PhotoResult e)
   2: {
   3:     capturedImage = e.ChosenPhoto; // this is a member variable to store the last chosen pic
   4:  
   5:     BitmapImage bmp = new BitmapImage();
   6:     bmp.SetSource(e.ChosenPhoto);
   7:  
   8:     ChosenPicture.Source = bmp;
   9: }

During this, however, I found that no matter how I held the phone when I took the picture (portrait or landscape), the API always assumed landscape.  I tried looking at some of the device orientation data, but it wasn’t providing the right information at the time I needed it.  It turns out after some internal discussions that others were seeing this as well.  On the device I have (Samsung) the picture snapshot button is in a natural place if you were to hold it landscape.  However, in my current experience with my mobile devices (Android and iPhone) I actually take more pictures in portrait mode.

After some discussion with folks internally, one of our test leads for WP7 reminded everyone that the phone does provide the EXIF information for each picture taken.  One of the attributes of EXIF is orientation (or rotation).  Now all we needed was a method to read the EXIF data in .NET…enter ExifLib.  This is a cool Code Project article and source code download that does a great job providing a simple EXIF reading experience.

The ExifLib as it stood wouldn’t work with the Stream that is provided as a result of the CameraCaptureTask, so a slight modification (or in my case I just created an override) to the function was needed for the library.  Here’s the additional override I added:

   1: public static JpegInfo ReadJpeg(Stream FileStream, string FileName)
   2: {
   3:     DateTime now = DateTime.Now;
   4:     ExifReader reader = new ExifReader(FileStream);
   5:     reader.info.FileSize = (int)FileStream.Length;
   6:     reader.info.FileName = string.Format("{0}.jpg", FileName);
   7:     reader.info.LoadTime = (TimeSpan)(DateTime.Now - now);
   8:     return reader.info;
   9: }

Now with that in place, I could accomplish taking my picture and read the EXIF data and apply the appropriate transform based on the orientation data.  The first thing I had to do was to create a RotateTransform on my Image element as well as set the RenderTransformOrigin on the Image element:

   1: <Image Margin="8,8,8,159" x:Name="ChosenPicture" RenderTransformOrigin="0.5,0.5">
   2:     <Image.RenderTransform>
   3:         <RotateTransform x:Name="ImageRotate" />
   4:     </Image.RenderTransform>
   5: </Image>

Now in code in my completed handler for the task I modified it to look at the EXIF orientation data and apply the correct rotation to show the image:

   1: void OnCameraCaptureCompleted(object sender, PhotoResult e)
   2: {
   3:     capturedImage = e.ChosenPhoto;
   4:  
   5:     BitmapImage bmp = new BitmapImage();
   6:     bmp.SetSource(e.ChosenPhoto);
   7:  
   8:     ChosenPicture.Source = bmp;
   9:  
  10:     // figure out the orientation from EXIF data
  11:     e.ChosenPhoto.Position = 0;
  12:     JpegInfo info = ExifReader.ReadJpeg(e.ChosenPhoto, e.OriginalFileName);
  13:     PostedUri.Text = info.Orientation.ToString();
  14:  
  15:     switch (info.Orientation)
  16:     {
  17:         case ExifOrientation.TopLeft:
  18:         case ExifOrientation.Undefined:
  19:             ImageRotate.Angle = 0d;
  20:             break;
  21:         case ExifOrientation.TopRight:
  22:             ImageRotate.Angle = 90d;
  23:             break;
  24:         case ExifOrientation.BottomRight:
  25:             ImageRotate.Angle = 180d;
  26:             break;
  27:         case ExifOrientation.BottomLeft:
  28:             ImageRotate.Angle = 270d;
  29:             break;
  30:     }
  31: }

Now I’ve got my flexibility in my application and don’t have to worry about the orientation. 

Now of course this only helps for the display of the information.  If you were to use the libraries to save the image you’d still have the issue of an incorrect orientation on the picture.  Again, iterating with our test team internally (thanks Stefan!!!) here’s a modified view of the world.

First, instead of rotating the Image element, let’s just rotate the actual Pixels themselves:

   1: void OnCameraCaptureCompleted(object sender, PhotoResult e)
   2: {
   3:     // figure out the orientation from EXIF data
   4:     e.ChosenPhoto.Position = 0;
   5:     JpegInfo info = ExifReader.ReadJpeg(e.ChosenPhoto, e.OriginalFileName);
   6:  
   7:     _width = info.Width;
   8:     _height = info.Height;
   9:     _orientation = info.Orientation;
  10:  
  11:     PostedUri.Text = info.Orientation.ToString();
  12:  
  13:     switch (info.Orientation)
  14:     {
  15:         case ExifOrientation.TopLeft:
  16:         case ExifOrientation.Undefined:
  17:             _angle = 0;
  18:             break;
  19:         case ExifOrientation.TopRight:
  20:             _angle = 90;
  21:             break;
  22:         case ExifOrientation.BottomRight:
  23:             _angle = 180;
  24:             break;
  25:         case ExifOrientation.BottomLeft:
  26:             _angle = 270;
  27:             break;
  28:     }
  29:  
  30:     if (_angle > 0d)
  31:     {
  32:         capturedImage = RotateStream(e.ChosenPhoto, _angle);
  33:     }
  34:     else
  35:     {
  36:         capturedImage = e.ChosenPhoto;
  37:     }
  38:  
  39:     BitmapImage bmp = new BitmapImage();
  40:     bmp.SetSource(capturedImage);
  41:  
  42:     ChosenPicture.Source = bmp;           
  43: }
  44:  
  45: private Stream RotateStream(Stream stream, int angle)
  46: {
  47:     stream.Position = 0;
  48:     if (angle % 90 != 0 || angle < 0) throw new ArgumentException();
  49:     if (angle % 360 == 0) return stream;
  50:  
  51:     BitmapImage bitmap = new BitmapImage();
  52:     bitmap.SetSource(stream);
  53:     WriteableBitmap wbSource = new WriteableBitmap(bitmap);
  54:  
  55:     WriteableBitmap wbTarget = null;
  56:     if (angle % 180 == 0)
  57:     {
  58:         wbTarget = new WriteableBitmap(wbSource.PixelWidth, wbSource.PixelHeight);
  59:     }
  60:     else
  61:     {
  62:         wbTarget = new WriteableBitmap(wbSource.PixelHeight, wbSource.PixelWidth);
  63:     }
  64:  
  65:     for (int x = 0; x < wbSource.PixelWidth; x++)
  66:     {
  67:         for (int y = 0; y < wbSource.PixelHeight; y++)
  68:         {
  69:             switch (angle % 360)
  70:             {
  71:                 case 90:
  72:                     wbTarget.Pixels[(wbSource.PixelHeight - y - 1) + x * wbTarget.PixelWidth] = wbSource.Pixels[x + y * wbSource.PixelWidth];
  73:                     break;
  74:                 case 180:
  75:                     wbTarget.Pixels[(wbSource.PixelWidth - x - 1) + (wbSource.PixelHeight - y - 1) * wbSource.PixelWidth] = wbSource.Pixels[x + y * wbSource.PixelWidth];
  76:                     break;
  77:                 case 270:
  78:                     wbTarget.Pixels[y + (wbSource.PixelWidth - x - 1) * wbTarget.PixelWidth] = wbSource.Pixels[x + y * wbSource.PixelWidth];
  79:                     break;
  80:             }
  81:         }
  82:     }
  83:     MemoryStream targetStream = new MemoryStream();
  84:     wbTarget.SaveJpeg(targetStream, wbTarget.PixelWidth, wbTarget.PixelHeight, 0, 100);
  85:     return targetStream;
  86: }

Notice here that OnCameraCaptureCompleted is different in that we first check the orientation and if needed rotate the pixels using the newly introduced RotateStream method.  The resulting stream is what we actually set on our Image element and no need for RotateTransform at this point.  I can then even have a menu item save the picture to the media library on the device:

   1: private void OnSavePictureClicked(object sender, EventArgs e)
   2: {
   3:     if (capturedImage != null)
   4:     {
   5:         capturedImage.Seek(0, 0); // necessary to initiate the stream correctly before save
   6:  
   7:         MediaLibrary ml = new MediaLibrary();
   8:         try
   9:         {
  10:             Picture p = ml.SavePicture(Guid.NewGuid().ToString(), capturedImage);
  11:             PostedUri.Text += ":" + p.Name;
  12:         }
  13:         catch (Exception ex)
  14:         {
  15:             PostedUri.Text = ex.Message;
  16:         }
  17:     }
  18: }

The MediaLibrary is a part of Microsoft.Xna.Framework.Media and provides the easy functionality of saving to the device.  And upon sync (or sharing) my image is what I expected when I took the picture using the CameraCaptureTask.

Here is my final project sample (lots of debug code in there, but you should get the point): WindowsPhoneApplication63.zip (requires the Windows Phone Developer Tools)

Hope this helps!

| Comments

As most of you know at MIX10, we released the first version of the Windows Phone 7 developer tools (which are free) targeting Silverlight and XNA development to the world.  This was a community technology preview (CTP) release and targeted Visual Studio 2010 RC at the time (which was the publically available version).  Since MIX10, Visual Studio 2010 has released in final form and the phone developer tools team has been working to get a working version finalized.

Windows Phone 7 Associated Press applicationToday is that day – we’ve just made available the Windows Phone Developer Tools CTP (April 2010 Refresh) (direct link download).  This is the installer that will install directly on your machine.  If you don’t have any version of the tools installed, this will install the Visual Studio express edition for Windows Phone 7 (free).  If you already have any released version of Visual Studio 2010, this will install the tools on top (integrated) into those.

This April refresh is still a CTP-quality and as such there are a few known issues with this latest release.  Our goal was at least to get a set of tools that would be available to enable people to move to Visual Studio 2010 release.  The known issues are documented in the release notes for the April 2010 refresh.  Specifically the first item as a known issue in the release notes:

Authenticode signed assemblies fail to load. When including Authenticode signed assemblies in your project, the application XAP will fail to deploy and run. This includes the use of Microsoft client libraries such as WCF Data Services, the Silverlight Toolkit, and 3rd party managed libraries. This issue will be resolved in a future release to permit the inclusion of Authenticode signed assemblies.

This might be annoying for some.  We will eventually get this fixed in a future release and understand this is annoying to some.  We apologize for this.  We do have a workaround for you in the manner of a PowerShell script (note: PowerShell is included in Windows 7, otherwise download a version here).  Here is the workaround (also noted on Charlie’s blog).

You will know if you hit this issue if your app deploys to the emulator but fails to actually run with a System.IO.FileLoadException then you are likely hitting this issue.

The PowerShell Script

Attached here is the PowerShell Script – right-click and save this somewhere known.

Download: wp7ctpfix.ps1

Using the script

Here’s the steps to using the script on the assemblies that will cause you issue (those signed assemblies).

  1. Copy the script to the folder containing the signed assemblies
  2. Open an elevated command prompt (this must be done in elevated mode) and enter powershell (type: powershell) – alternatively you could start powershell itself
  3. Run “.\wp7ctpfix.ps1 <your-signed-assembly-fully-qualified-path>” in the PowerShell window
  4. The script should show ‘operation succeeded’ if successful.
  5. A *new* assembly prefixed with “WP7_CTP_Fix_<signed-assembly>” in that directory

NOTE: If you get a warning that the script couldn’t be run, in PowerShell first run set-executionpolicy Unrestricted and then proceed (and reset back to Restricted if desired).

You’ll need to do this on all assemblies you reference that might be impacted.  NOTE: This does not alter the existing assembly, but rather creates a NEW COPY for you to use temporarily.

Using the fixed assemblies

Once you’ve completed the step above, you’ll have to change your project refrences:

  1. Expand the References section of your project and remove any of the problematic references
  2. Add a reference pointing to the newly created copies done in the step above

Using these fixed assemblies will only work in the emulator.  Since right now there is no means of application distribution for the masses, this isn’t an issue.  Again, we will be fixing this issue and it is only temporary – we have no announcements yet, however, on when the next update of the tools will be.  As noted in Charlie’s blog because this is a little bit of a ‘brute force’ technique, Microsoft is giving permission to do this with this fine print:

So as to enable you to load your applications on the pre-release version of the Windows Phone 7 operating system that is included with this April 2010 CTP of the Windows Phone Developer Tools, you may temporarily remove the signatures from any Microsoft-owned assemblies that you would otherwise be licensed to include in your programs, solely for the limited purpose of evaluating this CTP.  Upon the next pre-release of these Developer Tools or July 31, 2010, whichever is earlier, you must replace such signature-stripped assemblies with assemblies from which the signatures have not been removed.  Nothing in this statement should be interpreted as permission on behalf of owners of non-Microsoft assemblies.

What’s New in April refresh?

There are some new items in this refresh that we’ve changed/added which are noted in the What’s New topic in MSDN.  Here are some highlights:

And a few others – be sure to review the topic link above on MSDN.

What about Expression Blend?

Expression Blend 4 had a plugin that enabled Windows Phone 7 development as well.  This plugin has also been updated for this April 2010 refresh.  You must have the Expression Blend 4 RC installed first.

You can get the updated Blend plugin here:

Summary

Please read the release notes before installing the tools.  If you think any of the known issues will impact you significantly, please do  what you think is right (if that means sticking with the March CTP build on Visual Studio RC).  The bug above was discovered late in our plans.  We had to make a decision whether to hold up another potentially ‘weeks’ or release what we had in another CTP form.  In this case we chose the to release what we had to provide something that customers have been asking for. 

There are a few other known issues of this refresh that you should review, but also some new items as indicated above.

Other useful resources:

Hope this helps!


This work is licensed under a Creative Commons Attribution By license.

| Comments

I recently got an inquiry to my Microsoft Translator sample on if this would work with the Silverlight in the Windows Phone 7 SDK.  I hadn’t tried it before, so I created a sample Windows Phone 7 application and copied the code over.  I used a basic UI to mock up the similarities:

Translator phone sample screenshot

And then clicked the button.  The text translated fine, but no audio.  I didn’t get any warnings that the WaveMSS code sample I was using wouldn’t work.  Then I remembered about XNA.

NOTE: I actually think this is a bug in PCM audio and MediaStreamSource and have been having a dialog with the team about it.

In Windows Phone 7 your Silverlight applications can use some XNA Game Framework APIs.  A big component of games is audio!  Enter SoundEffect.  I added a reference to Microsoft.Xna.Frameowkr and changed my OnSpeakCompleted from:

   1: void OnSpeakCompleted(object sender, TimHeuer.Silverlight.SpeakCompletedEventArgs e)
   2: {
   3:     WaveMSS.WaveMediaStreamSource mss = new WaveMSS.WaveMediaStreamSource(e.AudioTranslation);
   4:     PlayMe.SetSource(mss);
   5: }

to:

   1: void OnSpeakCompleted(object sender, TimHeuer.Silverlight.SpeakCompletedEventArgs e)
   2: {
   3:     SoundEffect se = SoundEffect.FromStream(e.AudioTranslation);
   4:     se.Play();
   5: }

Notice it is still 2 lines of code :-).  I don’t need a MediaElement for the audio palyback because I can use the same libraries that XNA uses for audio (and in some instances this will be better for you for looping audio, etc.).

Very cool that Silverlight and XNA can share some libraries in a single application!