Thursday, July 14, 2011

Load Image from Oracle BLOB into WPF Image Control

image

Almost forgot. In my last tutorial, I tell you how to save Image / Photo into oracle database. But, there is another problem, how to read and view it from oracle database? Don’t worry, it’s very easy to do that. Just follow these steps and you’ll able to load Image from oracle database. And one thing, I’m using DataBinding technique in this tutorial, so you have to learn abut it first. Unfortunately, I’m too lazy to write about it Big Grin. So, maybe next time I’ll write about DataBinidng in WPF.

1. Create a new WPF application (don’t tell me you don’t know how Tongue). Name it WpfLoadOracleBlob.

2. Now, we’re still using database from the last tutorial. So, you don’t need to make a new table or something. Modify your window to become like picture below.
image
I know most of you are lazy, so copy the xaml code below:
<Window x:Class="WpfLoadOracleBlob.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <Grid>
        <ComboBox Height="23" Margin="12,12,12,0" Name="comboBox1" 
                  VerticalAlignment="Top" ItemsSource="{Binding}">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=ROWNUM}" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
        <Image Margin="12,41,12,12" Name="image1" Stretch="Fill" 
               Source="{Binding ElementName=comboBox1, 
                Path=SelectedItem.GAMBAR_BIN}"/>
    </Grid>
</Window>
Look at the xaml code, you’ll see some {Binding} things. You wanna know about it? Then googling it Tongue out

3. Okey, let’s get into the logic. Here is the code you need to load image from database to WPF Image control
using System.Windows;
using System.Data.OracleClient;
using System.Data;

namespace WpfLoadOracleBlob
{
 /// <summary>
 /// Interaction logic for Window1.xaml
 /// </summary>
 public partial class Window1 : Window
 {
  public Window1()
  {
   InitializeComponent();
  }

  private void Window_Loaded(object sender, RoutedEventArgs e)
  {
   OracleConnection conn = new OracleConnection(
   "Data Source=localhost;" +
   "Persist Security Info=True;" +
   "User ID=C07;Password=C07;Unicode=True");
   conn.Open();

   OracleDataAdapter ad = new OracleDataAdapter(
   "SELECT ROWNUM, GAMBAR_BIN FROM GAMBAR",
   conn);

   DataTable tb = new DataTable();
   ad.Fill(tb);
   comboBox1.DataContext = tb;

   conn.Close();
  }
 }
}
the key is in comboBox1.DataContext = tb; It means that comboBox1 Bind the data from your SELECT Query.

4. Now test your project and see the result of your work.

image

Okay, that’s all I can tell you. If you have any questions just leave it to the comment Open-mouthed.

4 comments:

  1. hello:

    Your tutorial about save images into a Oracle Database is down, can you upload again?

    Thank you!!

    ReplyDelete
  2. @wakeuprage
    Thanks for your correctio
    Now the links are corrected, enjoy it :)

    ReplyDelete
  3. Thanks
    Great example. I changed the db to SQL Server and works great.

    ReplyDelete
    Replies
    1. You're welcome. You can do that with other DB systems :)

      Delete

Please leave your comment here

Back to top