silverlightSL04-Ch18

را

Silverlight 4

وحيد نصيري: پژوهش و نگارش [email protected]

١٣٨٩بهار

Silverlight 4 ٣٨٧

فهرست مطالب DataGrid ................................................... ۳۸۸ كنترل هاي توانايي جامع بررسي – ۱۸ فصل

٣٨٨ ...................................................................................................................................................................................................... مقدمه ٣٨٨ .................................................................................................... DataGrid يك در سفارشي ظاهري با اطالعات از ليستي نمايش

٣٩٧ ........................................................................................................................... DataGrid يك اطالعات ويرايش و حذف افزودن، ٤٠٢ ................................................................................................................................ DataGrid اطالعات بندي روهگ و سازي مرتب

٤٠٨ ........................................................................................................................ DataGrid يك در اطالعات بندي صفحه و جستجو ٤١٢ ...................................................................................................... DataGrid يك در Master-Detail سناريوهاي سازي پياده

٤١٤ .......................................................................................................................................... DataGrid يك در اطالعات اعتبار ينتعي ٤١٤ ................................................................................................................................................... ديگر DataGrid كنترل يك معرفي

.چاپ عمومي غير رايگان اين مطالب بدون مجوز كتبي از طرف نويسنده به هر نحوي غيرمجاز است .خذ بال مانع استأدر نشريات الكترونيكي با ذكر مانتشار اين مطالب بر روي اينترنت و يا استفاده از آن به صورت مستقيم و يا غير مستقيم

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٣٨٨

DataGridكنترل هاي توانايي جامع بررسي – ۱۸فصل

مقدمه

رل جهت عموما از اين كنت. هاي كاربردي و تجاري است ترين اجزاي برنامه يكي از اساسي DataGridكنترل صفحه بندي، هاي گروه بندي اطالعات، مرتب سازي، شود؛ به همراه قابليت ي گزارشات پيشرفته استفاده مي ارائه

حتي پيش از ايجاد Silverlightاز نگارش دوم DataGrid .هاي درج، ويرايش و حذف اطالعات و غيره قابليتدر فضاي نام DataGrid .ه استآن، دردسترس برنامه نويسان بود WPFي سازگار با نسخه

System.Windows.Controls ي هاي هسته قرار دارد؛ اما جزو اسمبليSilverlight اين . رود به شمار نميبهره مند است به اين معنا كه اگر ليستي بسيار طوالني از اطالعات را UI virtualizationها كنترل از ويژگي

از افت كارآيي ري آن ايجاد شده و اين ام هاي نمايان و قابل مشاهده ها آيتمتوسط آن نمايش دهيم، در هر لحظه تندر طي فصول قبل، مروري سريع بر اين كنترل در حد انتساب ليست يك سري از اشياء به . كند آن جلوگيري مي

را بررسي ي اين كنترل هاي ارزنده در اين فصل قصد داريم تا ساير توانايي. آن داشتيم ItemsSourceخاصيت .نمائيم

DataGridاطالعات با ظاهري سفارشي در يك ليستي از نمايش

:نمايش دهيم DataGridرا به نحو ذيل در يك ها ليستي از كتاب قصد داريم اطالعات .ها ايجاد كنند و حالت نمايشي آن بايد ثابت باشد در مكان قرارگيري ستون يكاربران نتوانند تغيير •

.هستند بايد قرمز شود Thrillerجزو گروه هايي كه ديفر ي رنگ پس زمينه •

.هاي گريد بايد يك درميان مطابق رنگي مشخص تغيير كند رنگ رديف •

.تنها خطوط افقي جدول نمايش داده شوند •

هاي بعدي فصل هاي آن در مثال استفاده خواهيم كرد و كالس MVVMجهت پياده سازي اين مثال از الگوي MVVM Lightمرتبط با EventToCommandاز آنجائيكه نياز است از ويژگي . ه خواهند شدنيز بكارگرفت

toolkit ها در مسير زير قرار دارند اين اسمبلي. نيز بايد اضافه نمائيد هاي آن استفاده شود، ارجاعي را به اسمبلي ):نمائيد آن استفاده نموده و يك پروژه را بر اين اساس آغاز MVVMهاي يا از قالب(

C:\Program Files\Laurent Bugnion (GalaSoft)\Mvvm Light Toolkit\Binaries\Silverlight4

Silverlight 4 ٣٨٩

در ، ي در حال اجراي آن هاي اين پروژه را به همراه نمونه پس از اين مقدمات، تصاويري از ساختار فايل .مشاهده خواهيد نمود ۲و ۱ هاي شكل

DataGridهاي اولين پروژه استفاده از و پوشهها ساختار فايل –۱شكل

در حالت پيش فرض قابل ويرايش هستند و همچنين با استفاده از كشيدن و رها DataGrid هاي كنترل سلول

هاي ساده از اطالعات عموما غير ضروري اين موارد در گزارش. ها را تغيير داد توان جاي ستون كردن نيز ميها، جهت قصد داريم در اين مثال اين موارد را كنترل كرده و همچنين بر اساس اطالعات سلول به همين. باشند مي

.ها اعمال نمائيم اي را به آن ي ويژه رنگ پس زمينه

DataGridنمايي از اولين مثال استفاده از –۲شكل

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٣٩٠

:نمائيد مشاهده ميهاي مورد استفاده در كالس كتاب را در كدهاي بعد ها و گروه تعاريف زبان Languages.cs

namespace SilverlightApplication73.Models { public enum Languages { English, Persian, Dutch, French, German } }

Category.cs

namespace SilverlightApplication73.Models { public enum Category { Thriller, Fiction, Comics, Computing, Biography } }

اين كالس اينترفيس . نمائيد را در ادامه مشاهده مي كدهاي كالس كتاب و خواص آن INotifyPropertyChanged كند را پياده سازي مي :

Book.cs

using System; using System.ComponentModel; namespace SilverlightApplication73.Models { public class Book : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

Silverlight 4 ٣٩١ }

} private string _title; private string _author; private int _pageCount; private DateTime _purchaseDate; private Category _category; private string _publisher; private Languages _language; private string _imageName; private bool _alreadyRead; public string Title { get { return _title; } set { _title = value; OnPropertyChanged("Title"); } } public string Author { get { return _author; } set { _author = value; OnPropertyChanged("Author"); } } public int PageCount { get { return _pageCount; } set { _pageCount = value; OnPropertyChanged("PageCount"); } } public DateTime PurchaseDate { get { return _purchaseDate; } set { _purchaseDate = value; OnPropertyChanged("PurchaseDate"); } } public Category Category

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٣٩٢

{ get { return _category; } set { _category = value; OnPropertyChanged("Category"); } } public string Publisher { get{ return _publisher; } set { _publisher = value; OnPropertyChanged("Publisher"); } } public Languages Language { get { return _language; } set { _language = value; OnPropertyChanged("Language"); } } public string ImageName { get { return _imageName; } set { _imageName = value; OnPropertyChanged("ImageName"); } } public bool AlreadyRead { get { return _alreadyRead; } set { _alreadyRead = value; OnPropertyChanged("AlreadyRead"); } } } }

Silverlight 4 ٣٩٣ EventToCommandبا كمك ويژگي ViewModelدر اين . رسيم ترين قسمت برنامه مي اكنون به مهم

اين . را مديريت كنيم DataGridكنترل LoadingRowايم رخداد توانسته ، MVVM Light toolkitمرتبط با از . شود مي loadingRowCommandرخداد در حين بارگذاري هر رديف، سبب فراخواني روال رويدادگردان

.دسترسي داشت Bindingتوان به شيء جاري هر رديف در حين طريق آرگومان ورودي آن ميBooksViewModel.cs

using System; using System.Collections.ObjectModel; using System.Windows.Controls; using System.Windows.Media; using GalaSoft.MvvmLight.Command; using SilverlightApplication73.Models; namespace SilverlightApplication73.ViewModels { public class BooksViewModel { public ObservableCollection<Book> BookCollection { set; get; } public RelayCommand<DataGridRowEventArgs> LoadingRowCommand { get; private set; } public BooksViewModel() { LoadingRowCommand = new RelayCommand<DataGridRowEventArgs>(loadingRowCommand); BookCollection = new ObservableCollection<Book> { new Book { Title = "Book AAA", Author = "Author AAA", Language = Languages.English, PageCount = 350, Publisher = "Publisher BBB", PurchaseDate = new DateTime(2009, 3, 10), ImageName = "AAA.png", AlreadyRead = true, Category = Category.Computing }, new Book { Title = "Book BBB", Author = "Author AAA", Language = Languages.Dutch, PageCount = 667, Publisher = "Publisher AAA",

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٣٩٤

PurchaseDate = new DateTime(2009, 4, 11), ImageName = "BBB.png", AlreadyRead = false, Category = Category.Thriller }, new Book { Title = "Book CCC", Author = "Author AAA", Language = Languages.French, PageCount = 289, Publisher = "Publisher AAA", PurchaseDate = new DateTime(2009, 12, 10), ImageName = "CCC.png", AlreadyRead = true, Category = Category.Fiction }, new Book { Title = "Book DDD", Author = "Author BBB", Language = Languages.German, PageCount = 200, Publisher = "Publisher DDD", PurchaseDate = new DateTime(2009, 1, 20), ImageName = "DDD.png", AlreadyRead = false, Category = Category.Thriller }, new Book { Title = "Book EEE", Author = "Author BBB", Language = Languages.German, PageCount = 403, Publisher = "Publisher DDD", PurchaseDate = new DateTime(2007, 3, 1), ImageName = "EEE.png", AlreadyRead = true, Category = Category.Biography }, new Book { Title = "Book FFF", Author = "Author AAA", Language = Languages.English, PageCount = 296, Publisher = "Publisher AAA",

Silverlight 4 ٣٩٥ PurchaseDate = new DateTime(2009, 9, 4),

ImageName = "FFF.png", AlreadyRead = true, Category = Category.Comics } }; } private static void loadingRowCommand(DataGridRowEventArgs e) { var loadedBook = e.Row.DataContext as Book; if (loadedBook == null) return; if (loadedBook.Category == Category.Thriller) { e.Row.Background = new SolidColorBrush(Colors.Red); //It's a thriller! e.Row.Height = 40; } else { e.Row.Background = null; } } } }

است تا اضافه شده ObservableCollectionيك سري كتاب به ليستي از نوع مشخصات ViewModelدر اين

DataGridRowEventArgsاز نوع نيز RelayCommandهمچنين يك . برنامه قرار گيرد Viewدر اختيار ي دريافت شيء جاري كتاب در حال نحوه .تعريف شده است loadingRowبراي مديريت روال رخداد گردان

پس از دريافت شيء جاري، گروه آن بررسي . توان مشاهده نمود مي loadingRowCommandانقياد را در متد هاي زيادي در عمل شاهد مثال. گردد ي آن رديف قرمز مي رار داشت، رنگ زمينهق Thrillerشده و اگر در گروه

است يا تغيير رنگ از اين دست خواهيد بود براي مثال رنگي كردن محصوالتي كه تاريخ مصرفشان گذشته .ها به اتمام رسيده است و امثال آن هايي كه موجودي آن آيتم

:نمائيد هده ميبرنامه را در ادامه مشا XAMLكدهاي

MainPage.xaml

<UserControl x:Class="SilverlightApplication73.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٣٩٦

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:vm="clr-namespace:SilverlightApplication73.ViewModels" xmlns:i= "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:cmd= "clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4"> <UserControl.Resources> <vm:BooksViewModel x:Key="vmBooksViewModel" /> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White" DataContext= "{Binding Source={StaticResource vmBooksViewModel}}"> <sdk:DataGrid x:Name="BookDataGrid" ItemsSource="{Binding BookCollection}" AutoGenerateColumns="True" CanUserReorderColumns="False" CanUserResizeColumns="False" RowBackground="Bisque" AlternatingRowBackground="BurlyWood" ColumnWidth="90" RowHeight="30" GridLinesVisibility="Horizontal" HeadersVisibility="All" HorizontalGridLinesBrush="Yellow"> <i:Interaction.Triggers> <i:EventTrigger EventName="LoadingRow"> <cmd:EventToCommand Command="{Binding LoadingRowCommand, Mode=OneWay}" PassEventArgsToCommand="True" MustToggleIsEnabledValue="True" /> </i:EventTrigger> </i:Interaction.Triggers> </sdk:DataGrid> </Grid> </UserControl>

:توضيحاتكشيده و بر روي فرم رها كنيد تا به VS.NETابزار را از جعبه بهتر است تا آن DataGridبراي تعريف كنترل

جاري، XAMLهاي مورد نياز و همچنين تعريف فضاي نام مرتبط در صورت خودكار ارجاعات الزم به اسمبلي .ايجاد شوند

. كنيد گريد صفحه مالحظه مي DataContextبه همراه انتساب آن به را ViewModelي تعريف سپس نحوه DataGrid را از طريق دقرار گرفته بر روي صفحه اطالعات خوBinding و خاصيتItemsSource دريافت . خواهد كرد

Silverlight 4 ٣٩٧هاي متناظر با ستون DataGrid، كنترل trueبه AutoGenerateColumnsبا تنظيم خاصيت

. نمايد ميكالس كتاب را به صورت خودكار توليد هاي خاصيتو CanUserReorderColumnsبا كمك خواص DataGridهاي اين ي ثابت كردن ستون در ادامه نحوه

CanUserResizeColumns هاي متفاوت سطرهاي اين كنترل از طريق مقدار دهي خواص رنگ. اند ذكر شدهRowBackground وAlternatingRowBackground اند تعريف گرديده.

يك LoadingRowجهت معرفي رخداد EventToCommandترين قسمت اين مثال، تعاريف مرتبط با مهم در . آن جلوگيري خواهيم نمود Viewبه اين ترتيب از گره خوردگي كدهاي برنامه با . باشد مي DataGridكنترل

MVVM Light toolkitدر طي فصل آشنايي با EventToCommandمورد جزئيات بيشتر پياده سازي .توضيح الزم ارائه شده است

DataGridافزودن، حذف و ويرايش اطالعات يك

جهت افزودن، ويرايش و حذف اطالعات در اختيار Excelامكاناتي را شبيه به نرم افزار DataGridكنترل اي تعريف شده در مثال قبل و اطالعات آزمايشي آن، قصد ه در ادامه با توجه به كالس. دهد كاربران قرار مي

.داريم اين اعمال را پياده سازي نمائيمبديهي . اي جديد اضافه نمائيد مثال قبل را به پروژه ViewModelو Modelsهاي براي اين منظور همان كالس

را DataGridسپس يك .وده شوندنيز بايد افز MVVM Light toolkitهاي كتابخانه است ارجاعاتي به اسمبليرها كنيد تا ارجاعات الزم ) اي اصلي پروژه همان صفحه(برنامه Viewكشيده و بر روي VS.NETاز جعبه ابزار

.مورد نياز آن نيز به صورت خودكار افزوده شوند

DataGridنمايي از مثال افزودن، ويرايش و حذف اطالعات يك –۳شكل

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٣٩٨

اضافه DataGridيك سطر جديد را به Add Empty Bookي قصد داريم به كمك دكمه) ۳كل ش(در اين مثال عالوه بر آن اين دو . ، سطر انتخاب شده بايد حذف گردد Delete Selected Itemي همچنين به كمك دكمه. نمائيم

ها به صورت ش سلولامكان ويراي. صفحه كليد نيز بايد عمل كنند Deleteو Insertهاي مورد به كمك دكمه .فراهم است و تنها بايد كدهاي مرتبط با آن را به برنامه افزود DataGridخودكار توسط

است و شيء ObservableCollectionاز نوع DataGridهاي مقيد شده به با توجه به اينكه ليست كتاب Book نيز اينترفيسINotifyPropertyChanged حالت پيش فرض كند و را پياده سازي ميBinding در

DataGrid انقياد دو طرفه است، هرگونه تغييري در اين مجموعه بالفاصله در رابط كاربري نمايان شده و ، .برنامه منعكس خواهد شد ObservableCollectionبرعكس اگر آيتمي ويرايش گردد، بالفاصله اطالعات آن به

ها در ليست كتاب مرتبط با و قسمت تعاريف اطالعات Modelsهمانطور كه پيشتر نيز عنوان شد كدهاي ViewModel ،كدهاي .شود ها صرفنظر مي همانند مثال قبل است و از ذكر مجدد آنXAML مرتبط باView

:برنامه را در ادامه مشاهده خواهيد نمودMainPage.xaml

<UserControl x:Class="SilverlightApplication74.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk= "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:vm="clr-namespace:SilverlightApplication74.ViewModels" xmlns:i= "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:cmd= "clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4"> <UserControl.Resources> <vm:BooksViewModel x:Key="vmBooksViewModel" /> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White" DataContext= "{Binding Source={StaticResource vmBooksViewModel}}"> <StackPanel> <StackPanel Orientation="Horizontal"> <Button Content="Add Empty Book" Margin="5" Command="{Binding AddCommand}" /> <Button Content="Delete Selected Item" Margin="5" Command="{Binding DeleteCommand}" CommandParameter="{Binding ElementName=BooksDataGrid, Path=SelectedItem}"

Silverlight 4 ٣٩٩ />

</StackPanel> <sdk:DataGrid ItemsSource="{Binding BookCollection}" HeadersVisibility="All" Name="BooksDataGrid" AutoGenerateColumns="True"> <i:Interaction.Triggers> <i:EventTrigger EventName="BeginningEdit"> <cmd:EventToCommand Command="{Binding BeginningEditCommand, Mode=OneWay}" PassEventArgsToCommand="True"/> </i:EventTrigger> <i:EventTrigger EventName="CellEditEnded"> <cmd:EventToCommand Command="{Binding CellEditEndedCommand, Mode=OneWay}" PassEventArgsToCommand="True"/> </i:EventTrigger> <i:EventTrigger EventName="KeyDown"> <cmd:EventToCommand Command="{Binding KeyDownCommand, Mode=OneWay}" PassEventArgsToCommand="True"/> </i:EventTrigger> </i:Interaction.Triggers> </sdk:DataGrid> </StackPanel> </Grid> </UserControl>

سپس كليه . برنامه تعريف شده است ViewModelابتدا محل دريافت اطالعات يا همان Viewدر اين

MVVM Lightي كتابخانه EventToCommandو يا ويژگي Commnadsرخدادهاي مورد نظر از طريق

toolkit بهViewModel برنامه منتقل خواهند شد.

از . استفاده خواهيم كرد Deleteو Insertهاي كمهبراي تشخيص فشرده شدن د KeyDownاز رخداد آن در ي جهت مشخص شدن زمان شروع به ويرايش و خاتمه CellEditEndedو BeginningEditرخدادهاي .گيريم كمك مي يك سلول

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٤٠٠

مه برنامه در ادا ViewModelهاي رخدادگردان متناظر با اين رويدادها را در كدهاي ي پياده سازي روال نحوه :مالحظه خواهيد نمود

BooksViewModel.cs

using System; using System.Collections.ObjectModel; using System.Windows.Controls; using System.Windows.Input; using GalaSoft.MvvmLight.Command; using SilverlightApplication74.Models; namespace SilverlightApplication74.ViewModels { public class BooksViewModel { #region Fields (1) bool _cellEditing; #endregion Fields #region Constructors (1) public BooksViewModel() { AddCommand = new RelayCommand(addCommand); DeleteCommand = new RelayCommand<Book>(deleteCommand); BeginningEditCommand = new RelayCommand<DataGridBeginningEditEventArgs>(beginningEditCommand); CellEditEndedCommand = new RelayCommand<DataGridCellEditEndedEventArgs>(cellEditEndedCommand); KeyDownCommand = new RelayCommand<KeyEventArgs>(keyDownCommand); BookCollection = new ObservableCollection<Book> { new Book { // نمائيدهمانند تعاريف مثال قبل عمل

} }; } #endregion Constructors #region Properties (6)

Silverlight 4 ٤٠١

public RelayCommand AddCommand { get; private set; } public RelayCommand<DataGridBeginningEditEventArgs> BeginningEditCommand { get; private set; } public ObservableCollection<Book> BookCollection { set; get; } public RelayCommand<DataGridCellEditEndedEventArgs> CellEditEndedCommand { get; private set; } public RelayCommand<Book> DeleteCommand { get; private set; } public RelayCommand<KeyEventArgs> KeyDownCommand { get; private set; } #endregion Properties #region Methods (7) // Private Methods (7) private void addCommand() { addEmptyBook(); } private void addEmptyBook() { var b = new Book(); BookCollection.Add(b); } private void beginningEditCommand( DataGridBeginningEditEventArgs obj) { _cellEditing = true; } private void cellEditEndedCommand( DataGridCellEditEndedEventArgs obj) { _cellEditing = false; } private void deleteCommand(Book obj) { removeBook(obj); }

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٤٠٢

// ي عكس العمل نشان دادن به فشرده شدن كليدها و يافتن شيء جاري نحوه

private void keyDownCommand(KeyEventArgs e) { if (e.Key == Key.Delete && !_cellEditing) { var dataGrid = e.OriginalSource as DataGrid; if (dataGrid == null) return; var item = dataGrid.SelectedItem as Book; if (item == null) return; removeBook(item); } else if (e.Key == Key.Insert && !_cellEditing) { addEmptyBook(); } } private void removeBook(Book obj) { BookCollection.Remove(obj); } #endregion Methods } }

:توضيحاتكه جهت باشد مي ObservableCollectionپيشتر نيز عنوان شد، اساس اين مثال استفاده از شيء همانطور كه

ي برنامه هر آيتمي كه به آن اضافه شود بالفاصله در رابط كاربر. انعكاس آني تغييرات بكارگرفته شده استپيش فرض در دو طرفه Bindingويرايش شود با توجه به DataGridكه در سلوليمنعكس شده و هر

DataGrid گردد مينيز اي ، سبب به روز رساني خودكار منبع داده. MVVM Lightي هاي كتابخانه هاي رويدادگردان متناظر با رويدادهاي برنامه نيز به كمك توانايي روال

toolkit ها در فايل به اين صورت ديگر نيازي به تعريف اين روال .اند ايجاد شدهCode behind امرتبط ب View .برنامه نيست

DataGridمرتب سازي و گروه بندي اطالعات

براي . به صورت پيش فرض مهيا است و نيازي به كد نويسي ندارد DataGridمرتب سازي اطالعات در يك بر اساس آن DataGridبر تنها كافي است بر روي سرستوني دلخواه يكبار كليك نمايد تا اطالعات اين منظور كار

.فيلد انتخابي مرتب شوند

Silverlight 4 ٤٠٣از شيء ObservableCollectionبراي گروه بندي اطالعات بايد بجاي استفاده مستقيم از شيء

PagedCollectionView هاي كه در فصل آشنايي با كنترلSilverlight معرفي گرديد استفاده نمائيم .

و همچنين عدم استفاده MVVMهاي قبلي را با كمك الگوي هاي مثال در ادامه قصد داريم اطالعات ليست كتاب .به شكلي گروه بندي شده نمايش دهيم، AutoGenerateColumnsاز ويژگي

هاي قبل را به آن مثال ViewModelو Modelsهاي ي جديد را گشوده، فايل براي اين منظور ابتدا يك پروژه را از جعبه DatePickerو DataGridسپس دو كنترل ). كند ها كفايت مي در حد دريافت ليست كتاب(اضافه نمائيد

ها و همچنين فضاي نام هاي آن كشيده و بر روي فرم رها كنيد تا ارجاعات الزم به اسمبلي VS.NETابزار بعد XAMLرا مطابق كدهاي Viewسپس اين دو كنترل را حذف كرده و كدهاي . گرددافزوده ها آن متناظر

را نيز فراموش MVVM Light toolkitي هاي كتابخانه عالوه بر آن افزودن ارجاعاتي به اسمبلي .تغيير دهيد .نكنيد

ت به تعريف ، بايد نسب AutoGenerateColumnsدر صورت عدم استفاده از ويژگي DataGridدر كنترل سفارشي مانند يك هاي تعريف كنترل هاي مورد نظر اقدام كرد كه در اين حالت امكان دستي كليه ستون

DatePicker بجاي صرفا نمايش يك برچسب ساده يا استفاده ازComboBox ها در براي نمايش ليستي از آيتم ).۴شكل (هاي يك ستون، مهيا خواهد بود هر يك از سلول

DataGridهاي سفارشي به همراه گروه بندي اطالعات در يك نمايي از كنترل –۴شكل

هاي قبل مثالكدهاي همانند برنامه هاي مدل كالس(نمائيد برنامه را مشاهده مي ViewModelدر ادامه كدهاي

): فصل جاري هستندBooksViewModel.cs

using System; using System.Collections.ObjectModel;

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٤٠٤

using System.ComponentModel; using System.Windows.Controls; using System.Windows.Data; using GalaSoft.MvvmLight.Command; using SilverlightApplication75.Models; namespace SilverlightApplication75.ViewModels { public class BooksViewModel { private ObservableCollection<Book> bookCollection { set; get; } public PagedCollectionView BooksView { set; get; } public RelayCommand<SelectionChangedEventArgs> SelectionChangedCommand { set; get; } public BooksViewModel() { SelectionChangedCommand = new RelayCommand<SelectionChangedEventArgs>( selectionChangedCommand); bookCollection = new ObservableCollection<Book> { // هاي قبل است اين قسمت نيز مانند قسمتهاي ليست كتابتعاريف

}; BooksView = new PagedCollectionView(bookCollection); BooksView.SortDescriptions.Add( new SortDescription("Title", ListSortDirection.Descending)); BooksView.GroupDescriptions.Add(new PropertyGroupDescription("Language")); } private void selectionChangedCommand( SelectionChangedEventArgs e) { if (e.AddedItems.Count == 0) return; var selectedGroup = e.AddedItems[0] as ComboBoxItem; if (selectedGroup == null) return; BooksView.GroupDescriptions.Clear(); BooksView.GroupDescriptions.Add( new PropertyGroupDescription( selectedGroup.Content.ToString())); }

Silverlight 4 ٤٠٥ }

}

:توضيحات

بر را PagedCollectionView، يك شيء از نوع ObservableCollectionبار بجاي معرفي مستقيم شيء اين به كمك متد ،BooksViewدر ابتداي ايجاد شيء .دهيم برنامه قرار مي Viewاساس آن ساخته و در اختيار

BooksView.SortDescriptions.Add ايم و سپس به كمك متد ي مرتب سازي پيش فرض را تغيير داده ، نحوهBooksView.GroupDescriptions.Add ايم نموده بندي پيش فرضي را نيز معرفي ، گروه.

برنامه به كمك ويژگي ViewModelرا نيز در ComboBoxيك selectionChangedعالوه بر آن رخداد EventToCommand ي كتابخانهMVVM Light toolkit در اين روال رخداد گردان ابتدا . ايم مديريت نموده

روه جديدي بر اساس انتخاب جديد كاربر هاي موجود حذف و گ متن آيتم انتخابي دريافت شده و سپس كليه گروه، آني است و Bindingبرنامه از طريق امكانات UIبه PagedCollectionViewاعمال تغييرات . ايجاد خواهد شد

.نيازي به كد نويسي خاصي ندارد :برنامه به شرح زير هستند Viewمتناظر با XAMLكدهاي در ادامه و

BooksViewModel.cs

<UserControl x:Class="SilverlightApplication75.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk= "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:vm="clr-namespace:SilverlightApplication75.ViewModels" xmlns:i= "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:cmd= "clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4"> <UserControl.Resources> <vm:BooksViewModel x:Key="vmBooksViewModel" /> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White" DataContext ="{Binding Source={StaticResource vmBooksViewModel}}" > <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Group by:" Margin="5" /> <ComboBox Margin="5" > <ComboBoxItem Content="Language" />

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٤٠٦

<ComboBoxItem Content="Category" /> <ComboBoxItem Content="AlreadyRead" /> <i:Interaction.Triggers> <i:EventTrigger EventName="SelectionChanged"> <cmd:EventToCommand Command= "{Binding SelectionChangedCommand, Mode=OneWay}" PassEventArgsToCommand="True" /> </i:EventTrigger> </i:Interaction.Triggers> </ComboBox> </StackPanel> <sdk:DataGrid x:Name="CopyBookDataGrid" ItemsSource="{Binding BooksView}" AutoGenerateColumns="False"> <sdk:DataGrid.Columns> <sdk:DataGridTextColumn x:Name="CopyTitleColumn" Binding="{Binding Title}" Header="Title"> </sdk:DataGridTextColumn> <sdk:DataGridTextColumn x:Name="CopyAuthorColumn" Binding="{Binding Author}" Header="Author"> </sdk:DataGridTextColumn> <sdk:DataGridTextColumn x:Name="CopyPublisherColumn" Binding="{Binding Publisher}" Header="Publisher"> </sdk:DataGridTextColumn> <sdk:DataGridTextColumn x:Name="CopyLanguageColumn" Binding="{Binding Language}" Header="Language"> </sdk:DataGridTextColumn> <sdk:DataGridTextColumn x:Name="CopyCategoryColumn" Binding="{Binding Category}" Header="Category"> </sdk:DataGridTextColumn> <sdk:DataGridCheckBoxColumn x:Name="CopyAlreadyReadColumn" Binding="{Binding AlreadyRead, Mode=TwoWay}" Header="Already read"> </sdk:DataGridCheckBoxColumn> <sdk:DataGridTemplateColumn Header="Purchase date" SortMemberPath="PurchaseDate" x:Name="CopyPurchaseDateColumn"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate>

Silverlight 4 ٤٠٧ <sdk:DatePicker

SelectedDate= "{Binding PurchaseDate}"> </sdk:DatePicker> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> </sdk:DataGridTemplateColumn> </sdk:DataGrid.Columns> </sdk:DataGrid> </StackPanel> </Grid> </UserControl>

:توضيحاتبه AutoGenerateColumnsخاصيت . شويم هاي سفارشي آشنا مي ي تعاريف ستون در اين مثال با نحوه

False هاي مورد نظر را به صورت دستي تعريف نمائيم باشد تا تمامي ستون تنظيم شده است بنابراين نياز مي .هاي سفارشي همانند تعاريف امكان تعريف كنترل هرچند اينكار اندكي وقت گير است اما

DataGridTemplateColumn در اين حالت حتما بايد . فوق مهيا خواهد بودSortMemberPath مقدار دهيتواند تركيبي از چند امكانات مرتب سازي خودكار را براي اين ستون كه مي DataGridگردد، در غير اينصورت

.داشته باشد، درنظر نخواهد گرفتكنترل را در يك سلول خود :تعريف شوند DataGrid.Columnsها توسط در اين حالت ابتدا بايد گروه ستون

XAML

<sdk:DataGrid x:Name="BookDataGrid" AutoGenerateColumns="False"> <sdk:DataGrid.Columns> </sdk:DataGrid.Columns> </sdk:DataGrid>

استفاده كرد و جهت ستوني با DataGridTextColumnتوان از يش اطالعات فقط متني ميسپس براي نما :توان كمك گرفت مي DataGridCheckBoxColumn، از boolاطالعاتي از نوع

XAML

<sdk:DataGridTextColumn x:Name="TitleColumn" Binding="{Binding Title}" Header="Title"> </sdk:DataGridTextColumn>

با توان مي در اينجا. است DataGridTemplateColumnها به كمك انعطاف پذيرترين حالت تعريف ستون قالب دلخواهي را براي اطالعات قابل نمايش در يك سلول ستون مورد نظر ، DataTemplateاستفاده از يك

:طراحي كرد ،خودXAML

<sdk:DataGridTemplateColumn x:Name="ImageColumn"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate>

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٤٠٨

... </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> </sdk:DataGridTemplateColumn>

ها مود و با استفاده از تبديل كنندهرا در اينجا تعريف ن Imageتوان بجاي نام تصوير، يك كنترل براي مثال مي مناسبي را دريافت و ImageSourceها به تفصيل بحث شد، اطالعات كه در طي فصول قبلي كتاب در مورد آن

:؛ براي نمونه نمايش دادXAML

<sdk:DataGridTemplateColumn x:Name="ImageColumn"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding ImageName, Converter={StaticResource localImageConverter}}" Margin="2"> </Image> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> </sdk:DataGridTemplateColumn>

DataGrid در يك صفحه بندي اطالعاتو جستجو

با . شود ي اطالعاتي به شكل گروه بندي شده خالصه نمي تنها به ارائه PagedCollectionViewهاي قابليت ، نسبت به DataPagerجستجو نمود و همچنين با كمك كنترل DataGridتوان در اطالعات يك استفاده از آن مي

در ادامه قصد داريم توسط يك مثال كاربردي اين موارد را . داده شده، اقدام كرد صفحه بندي اطالعات نمايشي هاي قبلي تعاريف شيء كتاب تشكيل شده و قسمت تهيه مدل برنامه از همان كالس. )۵شكل ( پياده سازي نمائيم

ي هاي كتابخانه بليارجاعاتي نيز به اسم. هاي قبل است برنامه نيز همانند مثال ViewModelها در ليست كتابMVVM Light toolkit نياز خواهد بود.

Silverlight 4 ٤٠٩

DataGridي جستجو و صفحه بندي اطالعات يك نمايي از اجراي پروژه –۵شكل

:اين مثال را در ادامه مالحظه خواهيد نمود Viewكدهاي متناظر با

MainPage.xaml

<UserControl x:Class="SilverlightApplication76.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk= "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:vm="clr-namespace:SilverlightApplication76.ViewModels"> <UserControl.Resources> <vm:BooksViewModel x:Key="vmBooksViewModel" /> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White" DataContext= "{Binding Source={StaticResource vmBooksViewModel}}" > <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Search Titles:" Margin="5" /> <TextBox Margin="5" Width="150" Name="txtSearch" /> <Button Content="Search" Margin="5" Command="{Binding SearchCommand}" CommandParameter= "{Binding ElementName=txtSearch,

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٤١٠

Path=Text}" /> </StackPanel> <sdk:DataGrid ItemsSource="{Binding BooksView}" AutoGenerateColumns="True" /> <sdk:DataPager Name="dataPager1" DisplayMode="FirstLastPreviousNext" Source="{Binding BooksView}" PageSize="3" /> </StackPanel> </Grid> </UserControl>

. باشد نيز نمي DataGridاست كه محدود به DataPagerاين مثال استفاده از كنترل View ي جديد تنها نكته را به آن اعمال نمود؛ البته با اين DataPagerتوان كنترل يد ميهم استفاده نمائ ListBoxبراي مثال اگر از يك

در كنترل . تامين شود PagedCollectionViewهاي آن نيز از طريق يك شيء شرط كه اطالعات آيتمDataPager مقدار خاصيت ،Source دقيقا مساوي همان خاصيتItemsSource كنترلDataGrid قرار داده

آن مشخص خواهيم نمود كه در هر صفحه چند رديف نمايش داده شود و به PageSizeتوسط خاصيت . شود مي .)۶شكل ( توان براي اين كنترل در نظر گرفت ، چندين حالت نمايشي مختلف را ميDisplayModeكمك خاصيت

. DataPagerدر كنترل DisplayMode خاصيت مقادير مختلف –۶شكل

:اند نامه ذكر شدهبر ViewModelدر ادامه كدهاي

BooksViewModel.cs

using System; using System.Collections.ObjectModel; using System.Windows.Data; using GalaSoft.MvvmLight.Command; using SilverlightApplication76.Models; namespace SilverlightApplication76.ViewModels {

Silverlight 4 ٤١١ public class BooksViewModel

{ private ObservableCollection<Book> bookCollection { set; get; } public PagedCollectionView BooksView { set; get; } public RelayCommand<string> SearchCommand { set; get; } public BooksViewModel() { SearchCommand = new RelayCommand<string>(searchCommand); bookCollection = new ObservableCollection<Book> { // هاي قبل است اطالعات اين قسمت نيز همانند مثال }; BooksView = new PagedCollectionView(bookCollection); } private string _srchData = string.Empty; private void searchCommand(string data) { _srchData = data; BooksView.Filter = null; BooksView.Filter = new Predicate<object>(search); } private bool search(object obj) { var book = obj as Book; bool foundSearchHit = false; if (book != null) { if (book.Title.Contains(_srchData)) foundSearchHit = true; } return foundSearchHit; } } }

:توضيحات

برنامه قرار Viewها در اختيار ، اطالعات ليست كتاب BooksView، توسط خاصيت ViewModelدر اين .باشد مي PagedCollectionViewليست از نوع اين . گيرد مي

براي جستجو در يك . شود همچنين روال رخدادگردان جستجوي برنامه نيز در اين كالس مديريت مي PagedCollectionView تنها كافي است از امكانات خاصيتFilter به اين خاصيت يك شيء . آن استفاده نمائيم

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٤١٢

. سازد است كه پارامتر اصلي آن منطق جستجوي اطالعات را مشخص مينسبت داده شده Predicateاز نوع تشكيل شده و PagedCollectionViewبه صورت خودكار يك حلقه از تمامي عناصر Predicateتوسط كالس در حين اين بررسي هر آيتم ، به متد ذكر شده در آرگومان آن ارسال . هاي آن بررسي خواهند شد تك تك آيتم

در . برگرداند به معناي يافت شدن آيتمي مطابق منطق جستجوي برنامه است و برعكس trueاگر اين متد . گردد مي .ظاهر خواهند شد DataGridهاي يافت شده در نهايت آيتم

DataGridدر يك Master-Detailپياده سازي سناريوهاي

ها را نمايش داده و مابقي را ستون ترين مهمهاي يك گزارش زياد باشند بهتر است تعدادي از اگر تعداد ستون پيش بيني DataGridنيز در كنترل Master-Detailبراي اين منظور امكان پياده سازي سناريوهاي . مخفي كردد بود و جزئيات بيشتر هر رديف با نخواه DataGridهاي هر كدام از رديف Master ،در اين حالت. شده است

بايد از پياده سازي اين قابليتبراي .)۷شكل ( د شدنديف نمايش داده خواهكليك و يا انتخاب آن رRowDetailsTemplate استفاده كرد.

. Master-Detailنمايش جزئيات يك رديف با كليك بر روي آن به صورت –۷شكل

Silverlight 4 ٤١٣

قصد تنها . ظر بگيريددر ن ،هاي سفارشي مطرح شد همان مثال گروه بندي اطالعات را كه پيشتر به همراه ستون :را اندكي تغيير دهيم آن DataGridداريم

MainPage.xaml

... <sdk:DataGrid x:Name="CopyBookDataGrid" ItemsSource="{Binding BooksView}" AutoGenerateColumns="False"> <sdk:DataGrid.Columns> <sdk:DataGridTextColumn x:Name="CopyTitleColumn" Binding="{Binding Title}" Header="Title"> </sdk:DataGridTextColumn> <sdk:DataGridTextColumn x:Name="CopyAuthorColumn" Binding="{Binding Author}" Header="Author"> </sdk:DataGridTextColumn> </sdk:DataGrid.Columns> <sdk:DataGrid.RowDetailsTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock x:Name="CopyPublisherColumn" Margin="5" Text="{Binding Publisher}" /> <TextBlock Text="Purchase date:" FontWeight="Bold" Margin="5" HorizontalAlignment="Left"/> <sdk:DatePicker Margin="5" SelectedDate= "{Binding PurchaseDate}"> </sdk:DatePicker> </StackPanel> </DataTemplate> </sdk:DataGrid.RowDetailsTemplate> </sdk:DataGrid> ...

. اند مشخص شده sdk:DataGrid.Columnsهاي دو ستوني كه همواره بايد نمايش داده شوند توسط تگ معرفي گرديده و همانطور كه sdk:DataGrid.RowDetailsTemplateف توسط قسمت قسمت جزئيات هر ردي

.استفاده گردد و امثال آن DataGridTextColumnبجاي هاي معمولي مشخص است در آن بايد از كنترل

DataGrid هاي كنترل بررسي جامع توانايي – ١٨ فصل

٤١٤

DataGridتعيين اعتبار اطالعات در يك

توضيحات الزم ارائه ،در طي يك فصل Silverlightتعيين اعتبار اطالعات در هاي مختلف روش پيشتر در مورد يا همان ( data annotationsاطالعات تعريف شده توسط روش DataGridخبر خوش آن است كه كنترل . شدندبرنامه خوانده و ) هاي(را به صورت خودكار از تعاريف مدل) Validation attributesهاي اعتبار سنجي؛ ويژگي

.)از به كد نويسي اضافيبدون ني( اعمال خواهد كرد

ديگر DataGridمعرفي يك كنترل

مايكروسافت كه در طي اين فصل مورد بررسي قرار گرفت نيازهاي كاري شما را DataGridاگر كنترل به صورت رايگان در اختيار برنامه DevExpressديگر از شركت DataGridسازد، يك كنترل برآورده نمي

:باشد است كه از آدرس ذيل قابل دريافت مي Silverlightهاي نويسhttp://www.devexpress.com/products/net/controls/silverlight/grid/