Skip to main content

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


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.
Labels:

Comments

Post a Comment

Popular posts from this blog

C# Snippet - Shuffling a Dictionary [Beginner]

Randomizing something can be a daunting task, especially with all the algorithms out there. However, sometimes you just need to shuffle things up, in a simple, yet effective manner. Today we are going to take a quick look at an easy and simple way to randomize a dictionary, which is most likely something that you may be using in a complex application. The tricky thing about ordering dictionaries is that...well they are not ordered to begin with. Typically they are a chaotic collection of key/value pairs. There is no first element or last element, just elements. This is why it is a little tricky to randomize them. Before we get started, we need to build a quick dictionary. For this tutorial, we will be doing an extremely simple string/int dictionary, but rest assured the steps we take can be used for any kind of dictionary you can come up with, no matter what object types you use. Dictionary < String , int > origin = new Dictionary < string , int >(); ...
1 comment
Read more

C# WPF Printing Part 2 - Pagination [Intermediate]

About two weeks ago, we had a tutorial here at SOTC on the basics of printing in WPF . It covered the standard stuff, like popping the print dialog, and what you needed to do to print visuals (both created in XAML and on the fly). But really, that's barely scratching the surface - any decent printing system in pretty much any application needs to be able to do a lot more than that. So today, we are going to take one more baby step forward into the world of printing - we are going to take a look at pagination. The main class that we will need to do pagination is the DocumentPaginator . I mentioned this class very briefly in the previous tutorial, but only in the context of the printing methods on PrintDialog , PrintVisual (which we focused on last time) and PrintDocument (which we will be focusing on today). This PrintDocument function takes a DocumentPaginator to print - and this is why we need to create one. Unfortunately, making a DocumentPaginator is not as easy as...
Post a Comment
Read more

C# WPF Tutorial - Implementing IScrollInfo [Advanced]

The ScrollViewer in WPF is pretty handy (and quite flexible) - especially when compared to what you had to work with in WinForms ( ScrollableControl ). 98% of the time, I can make the ScrollViewer do what I need it to for the given situation. Those other 2 percent, though, can get kind of hairy. Fortunately, WPF provides the IScrollInfo interface - which is what we will be talking about today. So what is IScrollInfo ? Well, it is a way to take over the logic behind scrolling, while still maintaining the look and feel of the standard ScrollViewer . Now, first off, why in the world would we want to do that? To answer that question, I'm going to take a an example from a tutorial that is over a year old now - Creating a Custom Panel Control . In that tutorial, we created our own custom WPF panel (that animated!). One of the issues with that panel though (and the WPF WrapPanel in general) is that you have to disable the horizontal scrollbar if you put the panel in a ScrollV...
Post a Comment
Read more