در ادامه‌ی بخش اول از سری انقیاد داده‌ها در WPF، نحوه‌ی انقیاد داده‌ها در لیست را بررسی میکنیم.
• One Way Binding بخش اول
• INPC بخش اول
• Tow Way Binding بخش اول
• List Binding بخش دوم
• Element Binding بخش دوم
• Data Conversion بخش دوم
انقیاد در لیست List Binding
در ابتدا متدی با نام GetEmployees را با ساختار زیر، به کلاس Employee ایجاد شده‌ی در بخش اول این سری آموزشی، اضافه میکنیم:
public static ObservableCollection<Employee> GetEmployees()
{
var employees = new ObservableCollection<Employee>();
employees.Add(new Employee() { Name = "Mahdi", Title = "Manager" });
employees.Add(new Employee() { Name = "Nima", Title = "Teacher" });
employees.Add(new Employee() { Name = "Rahim", Title = "Assistant" });
employees.Add(new Employee() { Name = "Saeed", Title = "Administrator" });
return employees;
} توجه : ObservableCollection در فضای نام System.Collections.ObjectModel قرار دارد.
ObservableCollection چیست؟
یک مجموعه‌ی پویا (Dynamic Collection) است که بر اثر عملیات‌هایی همچون به‌روز رسانی، حذف و ایجاد اشیاء در آن، یک اعلان صادر می‌شود و View از این اعلان مطلع می‌شود؛ شبیه به کاری که INotifyPropertyChanged انجام می‌دهد.
در اینجا کلاس Employee با پیاده سازی اینترفیس INPC (معرفی شده در قسمت قبل) به یک کلاس Observable تبدیل شده است. بدین معنی که هر تغییری در وضعیت خصوصیات خود را اعلان می‌کند. با قرار دادن این شیء Observable در یک مجموعه که خود نیز از نوع Observable می‌باشد، از این پس هر تغییری در مجموعه نیز مستقیما View ما را تحت تاثیر قرار می‌دهد.
برای درک بهتر این موضوع در بخش markup، یک Combobox را قرار می‌دهیم:
<ComboBox Name="President" ItemsSource="{Binding}" FontSize="30"
Height="50"
Width="550">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Title}" Margin="5,0,0,0"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox> • در Tag مربوط به تعریف Combobox از طریق خصوصیت ItemSource اعلام کردیم که عملیات DataBinding اتفاق خواهد افتاد. پس Combobox ما به منبع داده‌ی پیش فرض در WPF که همان DataContext است مرتبط می‌شود. برای پر کردن منبع داده نیز همانند بخش قبل از طریق سازنده اقدام میکنیم.
private ObservableCollection<Employee> employees;
public MainWindow()
{
InitializeComponent();
employees = Employee.GetEmployees();
DataContext = employees;
} • برای نمایش عناصر در ComboBox، کار کمی متفاوت‌تر از عملیات انقیاد در یک TextBlock است. در کنترل‌هایی که قرار است لیستی از داده‌ها را پس از عملیات انقیاد نمایش دهند، می‌بایستی قالب نمایش داده‌ها مشخص شود.
حال باید نحوه‌ی نمایش و اعضایی از مجموعه که قرار است، در کنترل به نمایش در آیند مشخص شوند. در اینجا از Combobox.ItemTemplate برای مشخص کردن قالب و همچنین از DataTemplate، برای مشخص کردن داده‌های منتخب ما از مجموعه، استفاده شده است.
بعد از اجرای برنامه اطلاعات نام و عنوان، در Combobox نمایش داده می‌شوند. برای تست ویژگی Observable بودن مجموعه هم کافی است یک دکمه را بر روی صفحه قرار دهید و یک آیتم جدید را به لیست employees واقع در بخش CodeBehind اضافه کنید. مشاهده خواهید کرد که View ما با تغییر منبع داده، بطور اتوماتیک به‌روز می‌شود.
انقیاد عناصر Element Binding
در این بخش قصد داریم از یک کنترل به‌عنوان منبع داده استفاده کنیم. کنترل منتخب ما در این مثال یک Slider می‌باشد. در بخش markup کد زیر را اضافه میکنیم:
<Grid>
<StackPanel Orientation="Horizontal">
<Slider Name="mySlider" Minimum="0" Maximum="100"
Width="300"/>
<TextBlock Margin="5" Text="{Binding Value,ElementName=mySlider}"/>
</StackPanel>
</Grid> Data Conversion
برای درک بهتر مفهوم تبدیل داده در Data Binding با یک مثال کار را شروع میکنیم. به کلاس Employee موجود در بخش قبل، یک خصوصیت جدید را به نام تاریخ تولد، اضافه میکنیم:
public DateTime BornDate
{
get { return _bornDate; }
set
{
_bornDate = value;
OnPropertyChanged();
}
} و متدی که لیستی از پرسنل را برای ما تولید می‌کرد، به شکل زیر بازنویسی میکنیم:
public static ObservableCollection<Employee> GetEmployees()
{
var employees = new ObservableCollection<Employee>();
employees.Add(new Employee()
{ Name = "Mahdi", Title = "Manager", BornDate = DateTime.Parse("2008/8/8") });
employees.Add(new Employee()
{ Name = "Nima", Title = "Teacher", BornDate = DateTime.Parse("2012/3/14") });
employees.Add(new Employee()
{ Name = "Rahim", Title = "Assistant", BornDate = DateTime.Parse("2009/11/18") });
employees.Add(new Employee()
{ Name = "Saeed", Title = "Administrator", BornDate = DateTime.Parse("2014/7/28") });
return employees;
} حال قصد داریم اطلاعات را در یک ListBox، در بخش Markup نمایش دهیم:
<ListBox ItemsSource="{Binding}"
BorderThickness="1" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Width="100"/>
<TextBlock Text="{Binding Title}" Width="100" Margin="5,0,0,0"/>
<TextBlock Text="{Binding BornDate}" Margin="5,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox> همانطور که قبلا اشاره شد، در نمایش لیست‌ها باید قالب و داده‌های مورد نظر برای نمایش، مشخص شوند.
پس از اجرا، خروجی برنامه به شکل زیر است:
همه چیز همانطور که انتظار داشتیم به نمایش درآمد؛ اما اگر بخواهیم تاریخ میلادی، در زمان نمایش در View، بصورت شمسی نمایش داده شود، چطور؟
عملیات تبدیل داده یا همان Data Conversion در اینجا به کمک ما می‌آید.
به شکل زیر دقت کنید:
در زمانیکه در عملیات Data Binding نوع داده‌ی خصوصیت ما در Source (منبع داده) با نوع داده‌ی خصوصیت ما در target (کنترل یا View) متفاوت است، به یک مبدل در حین Binding نیاز داریم. این کار را از طریق یک کلاس که اینترفیس IValueConvertor را پیاده سازی کرده است، انجام می‌دهیم.
Converter به معنای مبدل است و اینجا وظیفه‌ی تبدیل مقدار گرفته شده‌ی از منبع داده را به نوع مورد نظر ما در View، دارد.
در مثال ذکر شده میخواهیم تاریخ میلادی موجود در منبع داده را به یک رشته (تاریخ شمسی) تبدیل کنیم و در View نمایش دهیم. (تبدیل نوع داده‌ی میلادی به رشته)
کلاسی را با نام DateConverter ایجاد میکنیم و اینترفیس IValueConverter را به شکل زیر پیاده سازی میکنیم:
public class DateConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
DateTime date = (DateTime)value;
PersianCalendar pc = new PersianCalendar();
var persianDate = string.Format
($"{pc.GetYear(date)}/{pc.GetMonth(date)}/{pc.GetDayOfMonth(date)}");
return persianDate;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
} اینترفیس IValueConverter دو متد دارد:
• Convert جهت تبدیل اطلاعات از مبداء به مقصد
• ConvertBack برای تبدیل اطلاعات از مقصد به مبداء
در متد Convert همانطور که می‌بینید مقدار تاریخ میلادی ارسال شده، به یک رشته تبدیل شده و بازگردانده می‌شود.
حال برای استفاده از این مبدل باید مراحل زیر انجام شود:
• اضافه کردن فضای نام مبدل به بخش فضاهای نام در View؛ که در اینجا همان آدرس پروژه‌ی جاری است:
xmlns:local="clr-namespace:DataConversion"
• ایجاد یک شیء از مبدل و اضافه کردن آن به بخش Resourceها در view جاری:
<Window.Resources>
<local:DateConverter x:Key="MyConverter"/>
</Window.Resources> markup مربوط به Resource یک پارامتر می‌گیرد و آن هم Key است. Key کلید آیتم موجود در دیکشنری Resource است. اینجا کلید را MyConverter تعریف کردیم تا در بخش بعدی به‌راحتی بتوانیم از طریق آن اطلاعات را از Resource بازیابی کنیم.
• ارجاع به Static Resource که در مرحله‌ی قبل مقدار دهی کردیم:
<TextBlock Text="{Binding BornDate,Converter={StaticResource MyConverter}}" Margin="5,0,0,0"/> پس از طی مراحل بالا، برنامه را مجددا اجرا کنید. اینبار خروجی به شکل زیر است:
