Skip to main content

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 කලේ.
Labels:

Comments

Post a Comment

Popular posts from this blog

Adding Unique Constraints with Entity Framework Code First

Entity Framework Code First is a great way to define and maintain your database within your application it self. While it poses a nice set of complementing libraries like Data Annotations and Fluent Configurations which helps you specially in defining phase of your database, it would give you a headache if you try to define a unique constraint on a column. For example in the users table of your application you could probably have an int ID column which would serve as the primary key and you might need to make your Username column a unique one. Since you are using EF Code First you will soon find out there is no direct way to accomplish this requirement. Unfortunately fluent configurations doesn't have syntax like HasUnique(u => u.Username); I asked the same question in stackoverflow , but didn't get a convincing answer. Since there is no direct support from EF for this you could take one of following alternatives to achieve it. Approach 1 :  
3 comments
Read more

How to disable ASP.NET page validations

ASP.NET වල page validation පාවිච්චි වෙන්නේ script injection attacks නවත්ත ගන්න, ඒ ගැන වැඩි විස්තර ඕනෙ නම් මෙතනින් බලාගන්න පුළුවන්. හැබැයි මේක අපිට කරදරයක් වෙන වෙලාවලුත් තියෙනවා. උදාහරණයක් විදියට අපි හිතුවොත් අපි අපේ user ට හිතලම ඉඩ දෙන්න ඕනේ script වගේ දේවල් page එකකට submit කරන්න. මේක උනේ මම වැඩ කරපු Admin site එකක, මේ site ඒක run වෙන්නේ company එකක intranet එකේ, මේක පාවිච්චි කරන්නේ Admin ල විතරයි ඒක අපි වෙන විදියකට authenticate කරනවා ඒ ගැන පස්සේ කියන්නම්. ඉතින් ප්‍රශ්නේ උනේ මේ page validations නිසා අපිට ඕනේ කරන user inputs ගන්න විදියක් නැති උනා. ඒක විසඳගන්න මට සිද්ද උනා page validations disable කරන්න. ඒක කරන්න ක්‍රම දෙකක් තියෙනවා. මොන දේ කරන්නත් ඉස්සෙල්ල site එකේ web.config එක පහල තියෙන විදිහට වෙනස් කරන්න ඕනේ. (සැ. යු. ASP.NET 4.0 web sites සඳහා). <configuration> <system.web> <httpRuntime requestValidationMode="2.0"/> </system.web> </configuration> ඊට පස්සේ පහල තියෙන ක්‍රම දෙකෙන් එකකට වැඩේ කරන්න පුළුවන්. Site එක
Post a Comment
Read more

HTML INPUT enhancement with Regular Expressions and Java Scripts

අද කථා කරන්න යන්නේ බොහොම සරල දෙයක් ගැන. සරල උනාට ඉතින් මට මේක කරගන්න ඕන වෙලා හොයන කොට නම් ඉතින් හොයාගන්න ටිකක් කරදර උනා, ඒ නිසාම තමා මම හිතුවේ මේක ගැන ලියන්න ඕනෙ කියල. අපි හැමෝම HTML forms validate කරන්න Java Script පාවිච්චි කරනවා නේ, එක අලුත් දෙයක් නෙමේ. ඒ වගේම තමා Regular Expressions කියන්නෙත් අපිට අලුත් දෙයක් නෙමේ. අපි බලමු මේ දෙකම පාවිච්චි කරලා HTML textbox එකකට අපිට ඕනෙ characters විතරක් enter කරන්න දෙන්නේ කොහොමද කියල. මෙන්න මේක තමා අපි පාවිච්චි කරන HTML page එක. <!DOCTYPE html> <html> <head> <title>JS and RegEx</title> </head> <body> <label for="txtUsername">Username</lable> <input type="text" id="txtUsername" placeholder="Enter Username"/> </body> </html> මේ තියෙන page එක html විදිහට save කරලා browser එකේ බැලුවම මෙන්න මේ වගේ තමා පෙන්නේ. දැන් හිතන්න අපිට මේ username එකට @,#,%,$ වගේ
Post a Comment
Read more