Data binding is the processes that provide the connection
between Application UI and the Business Logic, if the binding has correct
settings and data has proper notifications, then, when the data changes its
value; the elements that are bound to the data reflect the changes
automatically.
Also if outer representation of data changes i.e. data
changes on UI that also updated reflected, automatically in business
layer. e.g. If the user edits the value in textbox, the
underlying data value is automatically updated to reflect that change.
In WPF, dependency properties of an element can be bound to
CLR objects like ADO.Net Objects,
Objects associated with web services, web
properties and XML Data.
Basic Data Binding Concept
Below is the simple example of Data Binding,
Data bind to the List box using MVVM.
In above
figure, Data binding is essentially the bridge between your binding target and
the binding source.
Typically,
Each Binding has four components: a target object, target property, binding
source and
Path to
value in the binding source to use, e.g. if you want to bind the content of a
Textbox to the
Name
property of and product object then your target object is Text property, the
value to use is Name, and the source object is your Product object.
Basically
your target property should be a Dependency Property, mostly UI Elements
Properties
are dependency properties, except read only ones, these properties support
Databinding
by default, also noted that binding source object is not restricted to being
A custom CLR
object, WPF data binding supports in the form of CLR objects and XML
Below is the Xaml file
<Window x:Class="DataBindingExample.ProductData"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:DataBindingExample"
Title="ProductData"
Height="350" Width="525">
<Grid Margin="10">
<Grid.DataContext>
<vm:ProductDataViewModel></vm:ProductDataViewModel>
</Grid.DataContext>
<ListBox ItemsSource="{Binding Products}" Width="350" Margin="0,5,0,10">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Id}" Foreground="Red"/>
<TextBlock Padding="5,0,5,0" Text="{Binding Name}"/>
<TextBlock Text=", "
/>
<TextBlock Text="{Binding Description}"/>
<TextBlock Text=", "
/>
<TextBlock Text="{Binding price}"/>
<TextBlock Text=", "
/>
<TextBlock Text="{Binding image}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
|
Below is the viewmodel
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Text;
using
System.ComponentModel;
using
System.Collections;
using
System.Threading.Tasks;
using
System.Collections.ObjectModel;
namespace
DataBindingExample
{
public class ProductDataViewModel : ViewModelBase
{
private ObservableCollection<Product> _products;
public ObservableCollection<Product> Products
{
get
{
return _products;
}
set
{
_products = value;
NotifyPropertyChanged("Products");
}
}
public
ProductDataViewModel()
{
Products = new ObservableCollection<Product>();
var Fridge = new Product
{
Id
= 1,
Name = "Fridge",
Description = "Whrilpool
Protron",
price = 22000,
image = ""
};
Products.Add
(Fridge);
var WashingMachine = new Product
{
Id
= 2,
Name = "WashingMachine",
Description = "Haier",
price = 10000,
image = ""
};
Products.Add(WashingMachine);
}
}
}
|
Below is the Product Model file
using
System;
using
System.Collections.Generic;
using System.Linq;
using System.Text;
using
System.Threading.Tasks;
namespace
DataBindingExample
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public decimal price { get; set; }
public string image {get; set;}
}
}
|
Below is the output window
About the Author
0 comments:
Please let me know your view