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:
![User interface design User interface design](https://4.bp.blogspot.com/-1SrZGUb3EyY/WHxqLnKUBsI/AAAAAAAACZ4/ktS7n_GY7hIBBGHfFYFzv93n8CnkL-dBwCLcB/s1600/design-wpf.png)
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 WPF Image result](https://1.bp.blogspot.com/-VDKB7r1lUT8/WHxr5BavlXI/AAAAAAAACaE/HAmd4h_HdDYpqlFa6rFnSyVMBVlc0rREgCLcB/s1600/image-result.png)
Hope this simple tutorial helps you. See you on my next tutorial.
Cover Photo by Farzad Nazifi on Unsplash.