Introduction
Today we will discus how we can use data binding in a Metro Style Application at runtime. There is not a way to directly bind data in the front end at runtime; it can be done with the help of the Binding class and the SetBinding property of the Textbox control.
Here we will explain an example for runtime binding. Take three Textboxes to show the value and create a class with the properties Employee_Name, Designation, and Address. Objects of this class add on the List class and bind it with the help of the bind class. You can see the whole code below.
Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.
- Open Visual Studio 2011
- File -> New -> Project
- Choose Template -> Visual C# -> Metro Style Application
- Rename this Application
Step 2 : In the Solution Explorer there are two files that we will primarily work with; BlankPage.xaml and BlankPage.xaml.cs files.
Step 3 : The BlankPage.xaml file is as in the following code:
Code :
<Page
x:Class="RunTimeBinding.BlankPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:RunTimeBinding"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="#FFDEE6FB" Grid.Column="0" Grid.Row="0" RadiusX="20" RadiusY="20" Opacity="0.8" StrokeThickness="0" />
<Grid Grid.Column="0" Grid.Row="0" Margin="10,10,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="260" />
<ColumnDefinition Width="260" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<TextBlock Text="EMP_NAME" Margin="10,5,10,5" Grid.Row="0" Grid.Column="0" FontSize="20" Foreground="BlueViolet" />
<TextBlock Text="DESIGNATION" Margin="10,5,10,5" Grid.Row="1" Grid.Column="0" FontSize="20" Foreground="BlueViolet" />
<TextBlock Text="ADDRESS" Margin="10,5,10,5" Grid.Row="2" Grid.Column="0" FontSize="20" Foreground="BlueViolet" />
<TextBox x:Name="eName" Margin="10,5,10,5" Grid.Row="0" Grid.Column="2" FontSize="20" Foreground="Black" />
<TextBox x:Name="desi" Margin="10,5,10,5" Grid.Row="1" Grid.Column="2" FontSize="20" Foreground="Black" />
<TextBox x:Name="eADD" Margin="10,5,10,5" Grid.Row="2" Grid.Column="2" FontSize="20" Foreground="Black" />
<Button x:Name="bindData" Margin="10,5,10,5" Grid.Row="4" Grid.Column="2" Content="Show_Emp" FontSize="20" Foreground="Red" Click="bindData_Click" />
</Grid>
</Grid>
</Page>
Step 4 : Add a class in the project Class1 code of this class is given below:
Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace RunTimeBinding
{
class Class1
{
public string employee_Name { get; set; }
public string designation { get; set; }
public string address { get; set; }
}
}
Step 5 : The BlankPage.xaml.cs file is as in the following code:
Code :
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace RunTimeBinding
{
public sealed partial class BlankPage : Page
{
static int i;
Class1 _obj;
List<Class1> objlist = new List<Class1>();
public BlankPage()
{
this.InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//throw new NotImplementedException();
_obj = new Class1();
_obj.employee_Name = "Shubham";
_obj.designation = "Jr. Developer";
_obj.address = "New Delhi";
objlist.Add(_obj);
_obj = new Class1();
_obj.employee_Name = "Anurag";
_obj.designation = "Developer";
_obj.address = "New Delhi";
objlist.Add(_obj);
_obj = new Class1();
_obj.employee_Name = "Saurabh";
_obj.designation = "Tester";
_obj.address = "Ghaziabad";
objlist.Add(_obj);
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private void bindData_Click(object sender, RoutedEventArgs e)
{
if (i >= objlist.Count)
{
i = 0;
}
functionDisplay(i);
i++;
}
void functionDisplay(int i)
{
var pNameBinding = new Binding();
var tNameBinding = new Binding();
var cNameBinding = new Binding();
pNameBinding.Source = objlist[i].employee_Name;
tNameBinding.Source = objlist[i].designation;
cNameBinding.Source = objlist[i].address;
eName.SetBinding(TextBox.TextProperty, pNameBinding);
desi.SetBinding(TextBox.TextProperty, tNameBinding);
eADD.SetBinding(TextBox.TextProperty, cNameBinding);
}
}
}
Step 6 : After running this code the output will look like this:
Click on the Show_Emp button; the information will be appear in the Textboxes.
Again click on the button; the next record will be shown.