C# Silverlight - Loading a Client Side Image [Beginner]

on

Since the RTW (release to web) of Silverlight 2 was just the other day, I decided to take a look and see if this problem still existed.

And what do you know! Not only is it possible, it is downright easy. You can load images from any stream, which means it could be a file stream from isolated storage, a file that the user just chose in an Open File Dialog, or even over the web using stuff like OpenReadAsync (on the WebClient class. Below, you can see the small example app that shows this off - you can pick any image file on your computer, and Silverlight can display it right there for you.

[silverlight width="400" height="300" border="true" src="Silverlight2ImageLoading.xap"]
This is going to be a short tutorial, because really there isn't much code behind it. So let's jump straight into the XAML:
<UserControl x:Class="Silverlight2ImageLoading.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" Background="White">
  <Grid x:Name="LayoutRoot" Margin="3" >
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" 
               VerticalAlignment="Center" 
               HorizontalAlignment="Center" 
               x:Name="Message">
      Choose An Image
    </TextBlock>
    <Button Grid.Row="0" Grid.Column="1" 
            Content="Browse..." Click="BrowseClick" />
    <Image Margin="3" x:Name="ImageHolder" 
           Grid.ColumnSpan="2" Grid.Row="1" 
           Grid.Column="0" Stretch="UniformToFill" />
  </Grid>
</UserControl>
 
Nothing terribly special here - just a grid with two rows and two columns. The first row holds a textblock we will use for messages and a button whose click event actually does all the interesting work. The second row holds an image with no source set, so when the app loads initially nothing will be displayed there. It is this image control that will get populated with whatever image the user chooses.

Now for the C# code behind:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;

namespace Silverlight2ImageLoading
{
  public partial class Page : UserControl
  {
    public Page()
    { InitializeComponent(); }

    private void BrowseClick(object sender, RoutedEventArgs e)
    {
      OpenFileDialog ofd = new OpenFileDialog();
      ofd.Multiselect = false;
      bool? result = ofd.ShowDialog();
      if (!result.HasValue || result.Value == false)
        return;

      BitmapImage imageSource = new BitmapImage();
      try
      {
        imageSource.SetSource(ofd.File.OpenRead());
        ImageHolder.Source = imageSource;
        Message.Text = "Showing " + ofd.File.Name;
      }
      catch (Exception)
      {
        Message.Text = "Error Loading File";
      }
    }
  }
}
 
As I mentioned above, the meat of this code is all in the handler for that button - the method BrowseClick. First, we create an OpenFileDialog. This is not your normal OpenFileDialog - this is one specially created for Silverlight that keeps any silverlight applications from doing anything malicious. And unlike the old OpenFileDialog, this one does not return a DialogResult, it just returns a nullable boolean. If the boolean value is true, then the user has selected something and clicked ok in the dialog.

So once the user has selected something, we want to load an image from that file. To do that, we first create a BitmapImage, which will become the source for our image control. Just as a quick note, BitmapImage is in System.Windows.Media.Imaging, which is not one of the default using statement lines, so don't forget to add that in. Once we have created the BitmapImage we call the SetSource method and hand it the stream from whatever file the user selected in the open file dialog. If anything is wrong with the file (i.e, it is not an image, it can't be read, etc..), an exception will be thrown, which is why those couple lines of code are wrapped in a try-catch.

If the SetSource call succeeds, we then set that BitmapImage as the new Source for our image, and we set the text of that message TextBlock to the name of the file. If stuff fails and an exception gets thrown, we just set that TextBlock to an error message.

And that's all folks! As we here play more around with the RTW version of Silverlight 2, we will be posting more tutorials (and hopefully posting new versions of some now old and obsolete Silverlight 1.1 tutorials). As always, questions or comments are welcome.

Comments

Post a Comment