Load External Image into WPF using OpenFileDialog

A simple WPF control implementation to browse and load an image into the app.

good read
A simple WPF control implementation to browse and load an image into the app.
Load External Image into WPF using OpenFileDialog

This is my first time I made a tutorial about WPF. I don’t think it’s a new technique, but I just want to share what I learned at home. I assume that you understand WPF a little bit. In this tutorial I’d like to show you how to load external image into WPF using OpenFileDialog.

Step 1

Create a new WPF Project, FileNewProject... and chose WPF Application (by the way, I’m using Visual Studio 2008 in this tutorial). You’ll see an empty window called Window1.xaml.

Step 2

Modify your window just like the picture below:

WPF Window
User interface design.

Just kidding, you don't have to design it yourself, just copy the XAML code below and paste it inside your Window1.xaml

<Window x:Class="WpfSavePhotoToOracle.Window1"
  xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
  Title="Window1" Height="324" Width="343">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="30*" />
      <ColumnDefinition Width="349*" />
      <ColumnDefinition Width="30*" />
    </Grid.ColumnDefinitions>
    <Image Margin="12,12,16,71" Name="imgPhoto" 
        Stretch="Fill" Grid.Column="1" />
    <Button Height="23" HorizontalAlignment="Left" 
        Margin="12,0,0,34" Name="btnLoad" VerticalAlignment="Bottom" 
        Width="75" Grid.Column="1" Click="btnLoad_Click">_Load</Button>
  </Grid>
</Window>

Step 3

Now, let’s get into the logic. Double click on btnLoad and you’ll see private void btnLoad_Click(object sender, RoutedEventArgs e). Add the code below inside that function.

using System;
using System.Windows;
using System.Windows.Media.Imaging;
using Microsoft.Win32;
 
namespace WpfSavePhotoToOracle
{
  /// <summary>
  /// Interaction logic for Window1.xaml
  /// </summary>
  public partial class Window1 : Window
  {
    public Window1()
    {
      InitializeComponent();
    }
 
    private void btnLoad_Click(object sender, RoutedEventArgs e)
    {
      OpenFileDialog op = new OpenFileDialog();
      op.Title = "Select a picture";
      op.Filter = "All supported graphics|*.jpg;*.jpeg;*.png|" +
        "JPEG (*.jpg;*.jpeg)|*.jpg;*.jpeg|" +
        "Portable Network Graphic (*.png)|*.png";
      if (op.ShowDialog() == true)
      {
        imgPhoto.Source = new BitmapImage(new Uri(op.FileName));
      }
      
    }
  }
}

Result

Now, let’s test the project, run the project (press F5 button), click Load button and chose a picture you like. And you’ll see the picture inside your WPF window.

WPF Image result
Displaying selected image.

Hope this simple tutorial helps you. See you on my next tutorial.


Except as otherwise noted, the article of this page is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the MIT License. For details, see our Site Policies.

Subscribe to Junian.Net

Get the latest posts delivered right to your inbox.

Delivered by FeedBurner or subscribe via RSS with Feedly!