Minggu, 30 Mei 2010

Data Binding and ADO.net in WPF

In this tutorial i will make a connection with a database, then display the result of a query in a listbox, and the content of a textbox will change according to the selected item in the listbox.

I will use ADO.net to connect to a database, and i will use an oracle database.

My database will consist of 1 table, employee, which have the following attributes:
  • ID_employee (char 5)
  • employee_name (varchar2 40)
Ok, now create a new project, and choose WPF.
Then, drag a listbox (for the list of ID_employee) and a textbox(for displaying the name of the selected ID), don't forget to name them. I will name my listbox "listID" and the textbox "txtName".


Now add an event (Loaded event) in the window tag in your XAML
Loaded="Window_Loaded"
then open Window1.xaml.cs, there will be a new function named Window_Loaded, this function will be called when the window is loaded.
In this function we will create a new connection. Before we do that, add
"using System.Data.Common" and "using System.Data".

Then make 2 global variable :
DbProviderFactory factory;
DbConnection connection;

Now in the Window_Loaded function add this
factory = DbProviderFactories.GetFactory("System.Data.OracleClient"); connection = factory.CreateConnection(); connection.ConnectionString = "Data Source=localhost;Persist Security Info=True;User ID=erkape27;Password=erkape;Unicode=True"; connection.Open();

this will create a new connection to an localhost Oracle database, with user = erkape27 and password = erkape. Just change the user and password with your user and password.

then lets make a simple query to display all item from the employee table.

DbCommand command = factory.CreateCommand(); //create a new command command.CommandText = "Select * from EMPLOYEE"; //make the query command.Connection = connection; //connect the command
then we will change the list source item with the query result

DbDataAdapter adapter = factory.CreateDataAdapter();//create new adapter
adapter.SelectCommand = com;

DataTable dt = new DataTable(); //create a new table
DataSet ds = new DataSet();
//create a new dataset
adapter.Fill(ds, "EMPLOYEE");
//fill the data set with the query result
dt = ds.Tables[0]; //copy the table from the dataset to the dataTable
listBox.ItemsSource = dt.DefaultView; //change the source of the list with the
dataTable
listBox.DisplayMemberPath = "ID_employee"; //display ID_employee in the
list
connection.Close() //dont forget to close the connection


Now run your program, the list should display the list of ID from your database.


Now, we will do the data binding with the txtName and the listID.

open the XAML file.
then change the textbox like this
Text="{Binding ElementName=listID,
Path=SelectedItem.EMPLOYEE_NAME}"/>
run your program, and try to select a different item in the list, the text in the textbox should change..

that's all, if you wanna display other information in the textbox, just change the data binding path with other column nama, like maybe path=SelectedItem.ADDRESS.

hope it helps you people.

Sabtu, 29 Mei 2010

Data Binding WPF

Oke, this tutorial is about Data Binding in WPF.
Data Binding is a way to bind an element with other element. For example, we have one rectangle and one listbox which contains a list of color. When we select an item in our listbox, the rectangle's color will automatically change ! Amazing right?? No need for a lot of code..
Now we will make what i have just described above. I will use Visual Studio 2008.
Before i start, i will assume that you already know about WPF.

Okay, now let's start working.
Create a new project, and select WPF.Then drag a listbox and an rectangle in your grid.

change the listbox's name into "listColor" and rectangle's name into "rect" in their properties.
then in listbox's properties click on the items collections

then click Add button to add an item to your list, and change the content in the properties to the name of your desired color like "Yellow".I will add 4 items here, it's up to you how many colors you wanna add, just make sure you add more than 1 color, so we can test the binding element with the rectangle.

then click OK.

Now your listbox will contains the name of the color you have added before.

Now look at the XAML of Window1.xaml.
Inside the Rectangle tag, add this

Fill="{Binding ElementName=listColor, Path=SelectedItem.Content}"

your XAML should be like this now


Then, run your application and try to select all items in your list. The rectangle's color should change in accordance with the selected item in the listbox.

That's easy right !
I hope this tutorial can help you.