Send comments on this topic. | Back to Introduction - All Topics | Help Version 16.5.9.25
Loading and displaying an image in Silverlight

Take the following steps to start a project and to add some code that will load and display an image into the LEADTOOLS Silverlight Control.

  1. Start Visual Studio .NET 2008.
  2. Choose File->New->Project… from the menu.
  3. In the New Project dialog box, choose either "Visual C# Projects" or "Visual Basic Projects" in the Projects Type List, select "Silverlight" sub-type, and choose "Silverlight Application" in the Templates List. Note: You may need to select to use the .NET Framework 3.5.
  4. 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.
  5. In the proceeding dialog, choose the "Add a new ASP.NET Web project to the solution to host Silverlight" option and choose "ASP.NET Web application project" as the project type.
  6. In the "Solution Explorer" window, right-click on the "References" folder for the Silverlight project and select "Add Reference…" from the context menu. In the "Add Reference" dialog box, select the ".NET" tab and browse to Leadtools For .NET "\LEAD Technologies\LEADTOOLS 16.5\Bin\DotNet\Win32 " folder and select the following DLLs:
    • Leadtools.Silverlight.Controls.dll
    Click the Select button and then press the OK button to add the above DLLs to the application.
  7. Open the Page.xaml file and copy the below xaml code into the editor:

    [XAML]

    
    <UserControl x:Class="Load_And_Display.Page"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:Leadtools_Silverlight_Controls="clr-namespace:Leadtools.Silverlight.Controls;assembly=Leadtools.Silverlight.Controls"
      Width="800" Height="800">
      <Grid x:Name="LayoutRoot" Background="White">
         <StackPanel Orientation="Vertical" >
             <Leadtools_Silverlight_Controls:ImageViewer x:Name="viewerControl" SizeMode="Normal"  Width="500" Height="500"></Leadtools_Silverlight_Controls:ImageViewer>
             <Button Name="myButton" Content="Load" FontSize="30" Click="Button_Click"></Button>
         </StackPanel>
      </Grid>
    </UserControl>
    
  8. Switch to Page.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:

    [Visual Basic]

    
    Imports System.IO
    Imports System.Windows.Media.Imaging
    

    [C#]

     
    using System.IO;
    using System.Windows.Media.Imaging;
    

  9. Add the following class function:

    [Visual Basic]

    
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
      Try  
         Dim ofd As OpenFileDialog = New OpenFileDialog()
         If ofd.ShowDialog() = True Then
            Dim fileStream As FileStream = ofd.File.OpenRead()
            Dim bi As BitmapImage = New BitmapImage()
            bi.SetSource(fileStream)
            viewerControl.Source = bi
            fileStream.Close()
         End If
      Catch ex As Exception
         MessageBox.Show(ex.Message)
      End Try
    End Sub
    

    [C#]

    
    private void Button_Click(object sender, RoutedEventArgs e)
    {
      try
      {
         OpenFileDialog ofd = new OpenFileDialog();
         if (ofd.ShowDialog() == true)
         {
            FileStream fileStream = ofd.File.OpenRead();
            BitmapImage bi = new BitmapImage();
            bi.SetSource(fileStream);
            viewerControl.Source = bi;
            fileStream.Close();
         }
      }
      catch (Exception ex)
      {
         MessageBox.Show(ex.Message);
      }
    }
    

  10. Build, and Run the program to test it.

    Click the "Load" button, and select a valid JPEG or PNG image.