Load External Image into WPF using OpenFileDialog
A simple WPF control implementation to browse and load an image into the app
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, File → New → Project… 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:
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.
Hope this simple tutorial helps you. See you on my next tutorial.
Cover Photo by Farzad Nazifi on Unsplash.
