Simple Data Binding in WPF

අපි කලින් ලියුමක WPF වල layouts ලේසියෙන් හදාගන්නේ කොහොමද කියල බැලුවා කට්ටියට මතක ඇති නේද. ඉතින් අද අපි බලන්න යන්නේ මෙතනින් තව පොඩ්ඩක් ඉස්සරහට යන්නේ කොහොමද කියල. ඒ කියන්න අද අපි බලමු අපි මේ හදාගත්ත client window එක කොහොමද අපේ business layer එකත් එක්ක connect කරන්නේ කියල. ඒකට තියෙන සරලම සහ හොඳම විදිහ තමා මේ Data Binding කියල කියන්නේ.

• Data Binding වලින් අපිට පුළුවන් අපේ Business Layer එකයි UI එකයි අතරේ data auto update කරන්න.
• Data Binding කොටස් දෙකක් තියෙනවා
• Unidirectional කියන්නේ source එකේ ඉඳල target එකට හරි target එකේ ඉඳල source එකට හරි එක පැත්තකට විතරක් data update වෙන එකට.
• Bidirectional කියන්නේ source එකෙන් target එකටයි target එකෙන් source එකයි දෙපැත්තටම data update වෙන එකට.
• ඒ වගේම binding target එක හැම වෙලේම DependencyProperty එකක් වෙන්න ඕනෙ.(DependencyProperty එකක් කියන්නේ සරලව ගත්තොත් object එකක අපිට runtime එකේදී වෙනස් කරන්න පුළුවන් property එකක්.)

ඉස්සෙල්ලම අපි මෙන්න මේ පහල තියෙන Window එක හදාගෙන ඉමු.

මේකට ඕනෙ කරන XAML markup එක තමා පහල තියෙන්නේ.

 <Window x:Class="WpfBasics.Window1"  
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
     Title="Data Binding" Height="229" Width="300">  
   <Grid>  
     <TextBox Height="23" HorizontalAlignment="Left" Margin="138,12,0,0" Name="txtSample" VerticalAlignment="Top" Width="120" />  
     <Label Content="Type Here" Height="28" HorizontalAlignment="Left" Margin="53,10,0,0" Name="label1" VerticalAlignment="Top" />  
     <Label Content="Result Label" Height="28" HorizontalAlignment="Left" Margin="99,53,0,0" Name="lblResult" VerticalAlignment="Top" />  
   </Grid>  
 </Window>  

හරි දැන් අපි බලමු කොහොමද මේ Data Binding එක කරගන්නේ කියල. අපේ අරමුණ තමා Type Here Text box එකේ type කරන text එක පහල තියෙන Result Label එකට ගන්න එක.

මේ Result Label එකේ Content කියල Property එකක් තියෙනවා Property Window එකේ ඒ property එක තියෙන තැන පොඩි කළු පාට කිරිබත් කැටයක් වගේ එකක් තියෙනවා.

ඒ කිරිබත් කැටේ click කලාම එන menu එකෙන් තෝරාගන්න Apply Data Binding ... කියන option එක. එතකොට මෙන්න මේ වගේ selection window එකක් open වෙනවා,

මෙතනින් txtSample කියන එක select කරලා පහල පෙන්නන විදිහට path කියන section එකෙන් Text කියන එක select කරගන්න. මේකෙන් කියන්නේ අපි Label එකේ Content Property එක TextBox එකේ Text property එකට bind කරනවා කියන එක.

දැන් ඔය Text කියන තැනම Double Click කරන්න එතකොට Binding එක set වෙනවා. XAML එක පොඩ්ඩක් බැලුවොත් පෙනෙයි අපේ Label පොඩ්ඩක් වෙනස් වෙලා තියෙනවා.

 <Label Height="28" HorizontalAlignment="Left" Margin="99,53,0,0" Name="lblResult" VerticalAlignment="Top" Content="{Binding Path=Text, ElementName=txtSample}" />  

Content property එක පහල තියෙන විදිහට වෙනස් වෙනවා.
 Content="{Binding Path=Text, ElementName=txtSample}"

ඔන්න ඔහොම තමා අපි එක අකුරක්වත් type කරන්නේ නැතුව Data Binding කලේ.