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.