Loading and displaying an image in Windows Phone 7

Take the following steps to start a project and to add some code that loads and displays an image on Windows Phone 7.

Start Visual Studio .NET 2010 or higher
Choose File->New->Project… from the menu.
In the New Project dialog box, choose either "Visual C# Projects" or "Visual Basic Projects" in the Projects Type List, and choose "Silverlight Phone Application" in the Templates List.
Type the project name as "Load And Display" in the Project Name field, and then choose OK. If desired, type a new location for your project or select a directory using the Browse button, and then choose OK.
In the proceeding dialog, uncheck the "Host the Silverlight application in a new Web site" option.
In the "Solution Explorer" window, right-click on the "References" folder for the Windows Phone 7 project and select "Add Reference…" from the context menu. In the "Add Reference" dialog box, browse to the "<LEADTOOLS_INSTALLDIR>\Bin\SilverlightPhone" folder and select the following DLLs:
- Leadtools.dll
- Leadtools.Codecs.dll
- Leadtools.Windows.Controls.dll
- Leadtools.Codecs.Cmp.dll
- Leadtools.Codecs.Png.dll
- Leadtools.Windows.Media.dll
Click the Select button and then press the OK button to add the above DLLs to the application.

Open the MainPage.xaml file and copy the below xaml code into the editor:

[XAML]


            <phone:PhoneApplicationPage 
                x:Class="LoadingAndDisplayingAnImageWindowsPhone.MainPage"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
                FontFamily="{StaticResource PhoneFontFamilyNormal}"
                FontSize="{StaticResource PhoneFontSizeNormal}"
                Foreground="{StaticResource PhoneForegroundBrush}"
                SupportedOrientations="Portrait" Orientation="Portrait"
                shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:Leadtools.Windows.Controls;assembly=Leadtools.Windows.Controls" Loaded="PhoneApplicationPage_Loaded">
            
                <!--LayoutRoot is the root grid where all page content is placed-->
                <Grid x:Name="LayoutRoot" Background="Transparent">
                  <StackPanel Orientation="Vertical">
                     <my:RasterImageViewer Name="rasterImageViewer" Height="600" Width="480" SizeMode="Fit" InteractiveMode="None"/>
                     <Button Name="_btnLoadFromLibrary" Click="_btnLoadFromLibrary_Click" Content="Load From Library"></Button>
                     <Button Name="_btnLoadFromURL" Click="_btnLoadFromURL_Click" Content="Load From URL"></Button>
                  </StackPanel>
                </Grid>
            </phone:PhoneApplicationPage>

Switch to MainPage.xaml code view (right-click Page.xaml in the solution explorer then select View Code) and add the following lines at the beginning of the file:

[C#]


              
             using System.IO;
             using Leadtools;
             using Leadtools.Codecs;

Add the following class level variable:

[C#]


             RasterCodecs codecs = null;

Add the following class functions:

[C#]


                  private void _btnLoadFromURL_Click(object sender, RoutedEventArgs e)
                  {  
                     codecs.LoadAsync(new Uri("http://demo.leadtools.com/images/cmp/IMAGE1.CMP"), null);
                  }
            
                  private void _btnLoadFromLibrary_Click(object sender, RoutedEventArgs e)
                  {
                     //Load from photo library
                     PhotoChooserTask photoTask = new PhotoChooserTask();
                     photoTask.Completed += new EventHandler<PhotoResult>(photoTask_Completed);
                     photoTask.Show();
                  }
            
                  void photoTask_Completed(object sender, PhotoResult e)
                  {
                     if (e.TaskResult != TaskResult.OK)
                        return;
            
                     //Image has been loaded from the photo library. We now load into into a LEADTOOLS RasterImage
                     codecs.LoadAsync(e.ChosenPhoto, null);
                  }
            
                  private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
                  {
                     codecs = new RasterCodecs();
                     codecs.LoadAsyncCompleted += new EventHandler<CodecsLoadAsyncCompletedEventArgs>(codecs_LoadAsyncCompleted);
                  }
            
                  void codecs_LoadAsyncCompleted(object sender, CodecsLoadAsyncCompletedEventArgs e)
                  {
                     if (e.Error != null || e.Cancelled)
                     {
                        //Load Error
                        Dispatcher.BeginInvoke(() =>
                        {
                           MessageBox.Show(e.Error.Message, "Error loading file", MessageBoxButton.OK);
                        });
                        return;
                     }
            
                     //Image loaded successfully
                     Dispatcher.BeginInvoke(() => { rasterImageViewer.Image = e.Image; });
                  }

Build, and Run the program to test it.

Click the "Load From URL" button to load an image from a URL.

Click the "Load From Library" button to load an image from the Windows Phone photo library.

NOTE: If you encounter and "Invalid File Format" or "Feature Not Supported" exception, please refer to the topic Invalid File Format/Feature Not Supported.