Transcript Data Binding

Data Binding
1.
Introduction
2.
Model
3.
“Hello world” with Binding
4.
Using the DataContext
5.
INotifyPropertyChanged Interface
6.
UpdateSourceTrigger property
7.
ObservableCollection<T>
‫‪Introduction‬‬
‫‪.1‬‬
‫במאקרו – תהליך שבו מייצרים קשר (כורכים) בין מידע הקיים ב‪ BL -‬לממשק המשתמש‪.‬‬
‫‪.2‬‬
‫במיקרו ‪ -‬טכניקה שבה מקשרים בין פירטי מידע (שדות) לרכיבים ויזואליים (פקדים)‬
‫‪.3‬‬
‫בת'כלס – גשר בין שני רכיבים‪ Binding Source :‬ו‪.Binding Target -‬‬
‫‪.4‬‬
‫ב‪" – WPF-‬כריכת נתונים" (‪ (Data Binding‬היא טכניקה מרכזית בקשר שבין ה‪ BL -‬ל‪.UI-‬‬
‫‪.5‬‬
‫"כריכת נתונים" מגדירה גם אירועים שתפקידם לשקף ב‪ UI -‬את השינויים במידע ולהעביר‬
‫שינויים שבוצעו ב‪ UI -‬לשכבת ה‪ BL -‬וה‪.DAL -‬‬
‫‪.6‬‬
‫ב‪ WPF -‬הטכניקה מאוד הורחבה למה שהורגלנו ב‪ Windows Forms -‬והיא אפשרית‬
‫למגוון רחב של מאפיינים ולמקורות מידע שונים‪.‬‬
‫‪.7‬‬
‫במעבר מ‪ Windows Forms-‬ל‪ , WPF -‬כריכת נתונים עלולה קצת לבלבל ולהפחיד כי‬
‫מדובר ברעיונות דומים הממומשים בשיטה שונה לחלוטין‪.‬‬
‫‪Model‬‬
‫‪‬‬
‫בכריכת נתונים יכולים להיות מעורבים מאפיינים שונים ומקורות מידע רבים‪.‬‬
‫‪‬‬
‫כריכת נתונים מציגה מודל אחיד ללא קשר למאפיין וללא קשר למקור המידע‪.‬‬
‫‪Binding Target‬‬
‫‪Binding Source‬‬
‫‪UI Object‬‬
‫‪Property‬‬
‫‪‬‬
‫‪UI Dependency Object‬‬
‫‪Binding Object‬‬
‫במודל הזה תמיד יהיו ארבעה מרכיבים‪:‬‬
‫במודל הזה תמיד יהיו ארבעה מרכיבים‪:‬‬
‫‪.1‬‬
‫אובייקט מטרה (‪)binding target object‬‬
‫‪.2‬‬
‫מאפיין מטרה (‪)target property‬‬
‫‪.3‬‬
‫מקור (‪)binding source‬‬
‫‪.4‬‬
‫תוכן‪/‬ערך (‪.)Value‬‬
‫‪Dependency‬‬
‫‪Property‬‬
Model
:‫לדוגמה‬
:Person.Name ‫ לבין תוכן של תכונה שנקראת שם‬TextBox ‫אם נרצה לכרוך בין‬
Binding Target
Binding Source
UI Object
UI Dependency Object
Dependency
Property
Binding Object
Property
.TextBox -‫אובייקט המטרה הוא ה‬
.1
.TextBox.Text ‫מאפיין המטרה הוא‬
.2
.Person ‫המקור הוא המחלקה‬
.3
.Name -‫והתוכן הוא הערך הקיים ב‬
.4
“Hello world” with Binding
<StackPanel Margin="10" >
<StackPanel Orientation="Horizontal" >
<TextBlock Text="Source: " FontSize="20"></TextBlock>
<TextBox Name="txtValue" FontSize="20" Width="300"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Target: " FontSize="20"></TextBlock>
<TextBlock Text="{Binding ElementName=txtValue, Path=Text}" FontSize="20" />
</StackPanel>
</StackPanel>
.Binding ‫תהליך כריכת הנתונים מתחיל בסוגריים המסולסלים – { } ושימוש במחלקה‬
.1
.‫ נגדיר את הפרמטרים הדרושים לכריכת הנתונים‬Binding ‫באמצעות המחלקה‬
.2
‫) ומגדירה את המקור‬binding target object( ‫המחלקה מוגדרת באובייקט מטרה‬
)target property( ‫ ואת מאפיין המטרה‬ElementName ‫) באמצעות‬binding source(
.Path ‫באמצעות‬
.3
)target property( ‫הסוגריים מוצבים במאפיין מטרה‬
.4
HelloWorldDataBinding :‫דוגמת קוד‬
‫‪Using the DataContext‬‬
‫‪.1‬‬
‫המאפיין ‪ DataContext‬הוא מאפיין מרכזי וחשוב ב‪.Data Binding -‬‬
‫‪.2‬‬
‫‪ DataContext‬הוא המאפיין המכיל את ה‪ Data Source -‬עבור מחלקת ה‪.Binding -‬‬
‫‪.3‬‬
‫ומה התועלת ב‪ Binding -‬ללא ‪?Data Source‬‬
‫‪.4‬‬
‫מקובל שאת ה‪ DataContext -‬מאתחלים ברמת החלון‪.‬‬
‫‪.5‬‬
‫המאפיין מוגדר במחלקת הבסיס ‪ , FrameworkElement‬מחלקה שממנה נגזרים רוב‬
‫הפקדים‪.‬‬
‫‪.6‬‬
‫הגדרת ‪ DataContext‬היא השיטה הנפוצה ביותר להגדרת ‪.Data Binding‬‬
‫‪.‬‬
‫‪‬‬
Using the DataContext
:‫דוגמת קוד‬
public partial class MainWindow : Window
Code Behind
‫ערך‬
/
‫התוכן‬
‫הגדרת‬
‫המקור‬
‫הגדרת‬
{
)Value(
)binding source(
public MainWindow()
{
InitializeComponent();
Person person = new Person { FirstName = "Elimelch", LastName = "Zorkin", Age = 88 };
this.DataContext = person;
}
}
class Person
{
public string LastName { get; set; }
-‫הגדרת המקור ל‬
public string FirstName { get; set; }
DataBinding
public int Age { get; set; }
}
DataContextSample :‫דוגמת קוד‬
Using the DataContext
<StackPanel>
<TextBlock Text="{Binding LastName}"></TextBlock>
<TextBlock Text="{Binding FirstName}"></TextBlock>
<TextBlock Text="{Binding Age}"></TextBlock>
</StackPanel>
‫הגדרת אובייקט המטרה‬
)binding target object(
XAML
‫הגדרת מאפיין מטרה‬
)target property(
‫ אולם העדכון‬,‫כיווני‬-‫ הוא דו‬Binding -‫) ה‬TextBox ‫בשימוש בשדה עריכה (כמו‬
:)...‫מתבצע רק לאחר שהפקד איבד את הפוקוס (עליה וקוץ בה‬
<StackPanel>
<TextBox Text="{Binding LastName}"></TextBox>
<TextBox Text="{Binding FirstName}"></TextBox>
<TextBox Text="{Binding Age}"></TextBox>
<Button Name="btn" Content="Click Me"
Click="btn_Click"></Button>
</StackPanel>
DataContextTwoDirectionSample :‫דוגמת קוד‬
INotifyPropertyChangedSample :‫דוגמת קוד‬
INotifyPropertyChanged Interface
‫ שימושי ותורם לפונקציונאליות‬,‫ הוא ממשק חשוב‬INotifyPropertyChanged ‫הממשק‬
.Data Binding ‫של‬
.1
using System.ComponentModel :‫מוגדר במרחב השמות‬
.2
Data ( Data Binding -‫מגדיר אירוע אשר יופעל כל אימת שמתרחש שינוי בפקד הקשור ל‬
.)Bound Control
.3
class Person : INotifyPropertyChanged
{
private string m_LastName;
private string m_FirstName;
private int m_Age;
. . .
}
‫המשך בעמוד הבא‬
INotifyPropertyChanged Interface
class Person : INotifyPropertyChanged
{
. . .
public event PropertyChangedEventHandler PropertyChanged;
‫מימוש‬
‫הממשק‬
private void OnPropertyChanged(string propertyName)
‫הפעלת אירוע‬
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
. . .
}
‫המשך בעמוד הבא‬
INotifyPropertyChanged Interface
class Person : INotifyPropertyChanged
{
private string m_LastName;
private string m_FirstName;
private int m_Age;
public string LastName
{
get { return m_LastName; }
set
{
if (m_LastName != value)
{
m_LastName = value;
OnPropertyChanged("LastName");
}
}
}
. . .
}
‫המשך בעמוד הבא‬
:‫המשך‬
‫דיווח על שינויים‬
‫במידע‬
INotifyPropertyChanged Interface
public partial class MainWindow : Window
{
private Person mPerson;
public MainWindow()
{
mPerson = new Person ();
mPerson.PropertyChanged += _person_PropertyChanged;
this.DataContext = mPerson;
}
}
:‫המשך‬
‫הרשמה‬
‫לאירוע‬
void _person_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
‫טיפול באירוע‬
// Save to Database
txtFullName.Text = mPerson.LastName + " " + mPerson.FirstName + " is " +
mPerson.Age + " years old";
}
. . .
INotifyPropertyChangedSample :‫דוגמת קוד‬
INotifyPropertyChanged Interface
:TextBox ‫שלב ראשון – שינוי בפקד‬
‫‪INotifyPropertyChanged Interface‬‬
‫שלב שני – מיד אחרי שהפקד איבד פוקוס‪:‬‬
‫שלב שלישי‪ -‬עדכונים‪:‬‬
‫‪INotifyPropertyChanged Interface‬‬
‫עם סיום התהליך אחרי עדכון שלושת הפקדים‪:‬‬
‫‪UpdateSourceTrigger property‬‬
‫‪.1‬‬
‫בדוגמאות הקודמות למדנו כיצד לעדכן שינויים במידע המקושר ל‪.DataContext-‬‬
‫‪.2‬‬
‫הבעיה – העדכון מתבצע רק לאחר שהפקד מאבד את הפוקוס (רק בפקדי ‪.)Text‬‬
‫‪.3‬‬
‫הפתרון – ‪.UpdateSourceTrigger.Binding‬‬
‫‪.4‬‬
‫ל‪ UpdateSourceTrigger.Binding -‬שלושה ערכים אפשריים‪:‬‬
‫‪.1‬‬
‫‪ – Explicit‬הערכים ב‪ DataContext -‬לא יתעדכנו עד שנבקש מהם לעשות כן בצורה מפורשת‪,‬‬
‫מתאים למקרים בהם מקלידים הרבה נתונים או למקרים בהם טראנזקציה חייבת להיות שלמה‪.‬‬
‫‪.2‬‬
‫‪ – LostFocus‬ברירת המחדל‪ ,‬ה‪ DataContext -‬מתעדכן באיבוד פוקוס של הפקד‪.‬‬
‫‪.3‬‬
‫‪ – PropertyChanged‬מיידית עם שינוי הערכים‪.‬‬
UpdateSourceTrigger property
‫הרשמה‬
‫לאירוע‬
<StackPanel>
<TextBox Text="{Binding LastName, UpdateSourceTrigger=PropertyChanged}"
TextChanged="TextBox_TextChanged"></TextBox>
<TextBox Text="{Binding FirstName, UpdateSourceTrigger=PropertyChanged}"
TextChanged="TextBox_TextChanged"></TextBox>
<TextBox Text="{Binding Age, UpdateSourceTrigger=PropertyChanged}"
TextChanged="TextBox_TextChanged"></TextBox>
<Button Name="btn" Content="Click Me" Click="btn_Click"></Button>
</StackPanel>
UpdateSourceTriggerSample :‫דוגמת קוד‬
ObservableCollection<T>
?‫ לאוסף נתונים‬Data Binding ‫איך מגדירים‬
.1
‫ המוגדרת במרחב‬ObservableCollection<T> ‫משתמשים במחלקת האוסף הגנרית‬
.System.Collections.ObjectModel :‫השמות‬
.2
.INotifyCollectionChanged ‫ מממש את הממשק‬ObservableCollection<T>
.3
.‫ בשל שיקולי ביצועים‬List -‫ עדיף להשתמש ב‬Data Binding -‫היכן שלא מעוניינים ב‬
.4
ObservableCollection<T>
public partial class MainWindow : Window
{
:‫דוגמת קוד‬
private ObservableCollection<User> users_list = new ObservableCollection<User>();
public MainWindow()
{
InitializeComponent();
users_list.CollectionChanged += users_list_CollectionChanged;
users_list.Add(new User() { Name = "Elimelech", Password="123456" });
users_list.Add(new User() { Name = "Shoshana", Password = "123456" });
this.DataContext = this;
}
void users_list_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
this.Title = users_list.Count().ToString();
}
public ObservableCollection<User> Users
{
get { return users_list; }
set { users_list = value; }
}
. . .
}
ObservableCollectionSample :‫דוגמת קוד‬
‫את הסילבוס‪ ,‬חומרים‪ ,‬מצגות ניתן להוריד ב‪:‬‬
‫‪www.corner.co.il‬‬