Binding a XAML application to DataBase Data

In .NET 3.0 we have the option of markup language for making window application. This new markup language is known as eXtensible Application Markup Language, or XAML.

In this article I am going to show that how we can connect our XAML application to backend? How we can show our data in XAML application?

In this application I am showing a small information of an employee on the form. Here in database data there is a field ID. When user run the application then in combo box all ID comes. When user select any ID then all related record from that ID come in the specified text box.

The Xaml Code for this application is:

<Window x:Class="DataBaseApplication.Window1"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Title="A Record Application"  Width="300"

     Height="220" WindowStartupLocation="CenterScreen">

     <Window.Resources>

        <DataTemplate x:Key="EmployeeListTemplate">

          <StackPanel Orientation="Horizontal">

            <TextBlock Text="{Binding Path=ID}" />

          </StackPanel>

        </DataTemplate>

     </Window.Resources>

     

     <Window.Background>

        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

          <LinearGradientBrush.GradientStops>

            <GradientStop Color="Blue" Offset="0" />

            <GradientStop Color="White" Offset=".75" />

            <GradientStop Color="DarkGray" Offset="1" />

          </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

     </Window.Background>

     

     <StackPanel Name="theStackPanel" VerticalAlignment="Top">

        <ComboBox Name="theCombo" IsSynchronizedWithCurrentItem="True" Width="200"

              ItemsSource="{Binding}" ItemTemplate="{StaticResource EmployeeListTemplate}"/>

        <Canvas>

           <Canvas.Resources>

            <Style TargetType="{x:Type TextBox}">

            <Setter Property="Canvas.Left" Value="130" />

            <Setter Property="Padding" Value="0" />

            <Setter Property="Height" Value="18" />

            <Setter Property="Width" Value="120" />

            </Style>

           

           <Style TargetType="{x:Type TextBlock}">

           <Setter Property="Canvas.Left" Value="30" />

           <Setter Property="Padding" Value="0" />

           <Setter Property="Height" Value="18" />

           <Setter Property="FontWeight" Value="Bold" />

           </Style>

         </Canvas.Resources>

  
           <TextBlock Canvas.Top="15">First Name:</TextBlock>

           <TextBox Canvas.Top="15" Text="{Binding Path=FirstName}" />

           <TextBlock Canvas.Top="35">Last Name:</TextBlock>

           <TextBox Canvas.Top="35" Text="{Binding Path=LastName}" />

           <TextBlock Canvas.Top="55">Departmant</TextBlock>

           <TextBox Canvas.Top="55" Text="{Binding Path=Department}" />

           <TextBlock Canvas.Top="75">City:</TextBlock>

           <TextBox Canvas.Top="75" Text="{Binding Path=City}" />

           <TextBlock Canvas.Top="95">Country</TextBlock>

           <TextBox Canvas.Top="95" Text="{Binding Path=Country}"></TextBox>     

       </Canvas>

  </StackPanel>

</Window>

The Window1.xaml.cs code for the application is:
 

using System;

using System.Collections.Generic;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

using System.Data;

using System.Data.SqlClient;

 

namespace DataBaseApplication

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

 

    public partial class Window1 : System.Windows.Window

    {

        public Window1()

        {

            InitializeComponent();

            DataTable theTable = new DataTable();

 

            //Set the connection String

            String connString = @"Data Source=localhost; Initial Catalog=DataBaseNew ;Integrated Security=True";

 

            //Set the query

            String query = @"SELECT ID, FirstName, LastName, Department,City,Country FROM Record";

 

            // Fill the Set with the data

            using (SqlConnection conn = new SqlConnection(connString))

            {

                //Passing the query and connection String

                SqlDataAdapter da = new SqlDataAdapter(query, conn);

                da.Fill(theTable);

            }

 

            // Set the Data Context

            DataContext = theTable;           

        }

    }

}

When user run the application then the screen becomes look like as:



Figure 1.



Figure 2: All ID are coming in combo Box, select any ID from here to see the complete Information.



Figure 3.