صفحه بندی DataGrid
 
در حال حاضر، تمامی رکورد ها در یک زمان در DataGrid نمایش داده می شوند. این مسئله در صورت داشتن تعداد رکورد های زیاد ممکن است باعث بروز مشکلاتی شود (برنامه آهسته تر اجرا خواهد شد). به همین منظور صفحه بندی رکوردها را پیاده سازی کرده ایم.
در Web Service، کدهای زیر  را با کدهای وب متد GetRIAComments جایگزین کنید:

#region GetRIAComments
[WebMethod]
public List<RIAComment> GetRIAComments(int intPage)
{
    // Create a collection to hold the results
    List<RIAComment> colResult = new List<RIAComment>();

    RIATasksDBDataContext DB = new RIATasksDBDataContext();

    var colRIAComments = from RIAComments in DB.RIAComments
                         select RIAComments;

    // Compute the CurrentPage
    int CurrentPage = ((intPage * 5) - 5);
    // Implement paging
    colRIAComments = colRIAComments.Skip(CurrentPage).Take(5);

    // Loop thru the Tasks
    foreach (var item in colRIAComments)
    {
        // Create a Task
        RIAComment OutputRIAComment = new RIAComment();

        // Get only the first 25 charaters of the comment
        OutputRIAComment.CommentID = item.CommentID;
        OutputRIAComment.Comment = Strings.Left(item.Comment, 25) + " ...";
        OutputRIAComment.CommentUpdateDate = item.CommentUpdateDate;

        // Add to the final results
        colResult.Add(OutputRIAComment);
    }

    return colResult;
}
#endregion

 
روی wsRIARIAComments web reference کلیک راست کرده و Update Service Reference را انتخاب کنید.
متد GetRIAComments موجود در Model به صورت زیر تغییر دهید.:

#region GetRIAComments
public static void GetRIAComments(int intPage,
       EventHandler<GetRIACommentsCompletedEventArgs> eh)
{
    // Set up web service call
    WebServiceSoapClient WS = new WebServiceSoapClient();

    // Set the EndpointAddress
    WS.Endpoint.Address = new EndpointAddress(GetBaseAddress());

    WS.GetRIACommentsCompleted += eh;
    WS.GetRIACommentsAsync(intPage);
}
#endregion
در View Model، property زیر را اضافه کنید:
#region CurrentPage
private int _CurrentPage = 1;
public int CurrentPage
{
    get { return _CurrentPage; }
    private set
    {
        if (CurrentPage == value)
        {
            return;
        }
        _CurrentPage = value;
        this.NotifyPropertyChanged("CurrentPage");
    }
}
#endregion

متد GetRIACommetns را به صورت زیر تغییر دهید:

#region GetRIAComments
private void GetRIAComments()
{
    // Call the Model to get the collection of RIAComments
    RIACommentsModel.GetRIAComments(CurrentPage, (Sender, EventArgs) =>
    {
        if (EventArgs.Error == null)
        {
            // Clear the current RIAComments
            colRIAComments.Clear();

            // loop thru each item
            foreach (var RIAComment in EventArgs.Result)
            {
                // Add to the colRIAComments collection
                colRIAComments.Add(RIAComment);
            }
        }
    });
}
#endregion

ICommand های زیر را نیز اضافه کنید:

#region PreviousPageCommand
public ICommand PreviousPageCommand { get; set; }
public void PreviousPage(object param)
{
    CurrentPage--;
    GetRIAComments();
}

private bool CanPreviousPage(object param)
{
    // Must not already be on the first page
    return (CurrentPage > 1);
}
#endregion

#region NextPageCommand
public ICommand NextPageCommand { get; set; }
public void NextPage(object param)
{
    CurrentPage++;
    GetRIAComments();
}

private bool CanNextPage(object param)
{
    // There must be records to move to the next page
    return (colRIAComments.Count > 0);
}
#endregion

و در نهایت، کدهای زیر را به Constructor اضافه کنید:

PreviousPageCommand = new DelegateCommand(PreviousPage, CanPreviousPage);
NextPageCommand = new DelegateCommand(NextPage, CanNextPage);

View
 
دو دکمه به صفحه اضافه کنید و عنوان آنرا نیز همانند شکل بنویسید.
 
یک InvokeCommandAction Behavior روی هر یک از دکمه ها قرار دهید.
 
در Properties مربوط به هر Behavior، برای EventName مقدار Click را انتخاب کنید و روی Advanced Options کنار جعبه Command کلیک کنید.
 
گزینه Data Binding... انتخاب کنید.
 
و Behavior ها را به Command مربوطه مقید کنید ( یا PreviousPageCommand یا NextPageCommand)
 
همانند شکل فوق.
 
با اجرای برنامه خواهید دید که صفحه بندی اجرا می شود.

فراخوانی یک ICommand از کلیک یک دکمه درون DataGrid

در این مرحله می خواهیم دکمه ای را در هر ردیف DataGrid قرار دهیم که با کلیک بر روی آن Comment همان ردیف را به مقدار **** تغییر دهد.
ابتدا کدهای زیر را به View Model اضافه کنید:

#region ClearCommand
public ICommand ClearCommand { get; set; }
public void Clear(object param)
{
    // Clear the Comment
    RIAComment objRIAComment = (RIAComment)param;
    objRIAComment.Comment = "****";
}

private bool CanClear(object param)
{
    // Do not allow if there is no Current RIAComment
    return (param as RIAComment != null);
}
#endregion

خط زیر را به سازنده  View Model بیافزایید:

ClearCommand = new DelegateCommand(Clear, CanClear);

 
در پنجره object and Tiemline روی DataGrid کلیک راست کرده و یک DataGridTextColumn ایجاد کنید.
 
پس از افزودن ستون، آنرا به ابتدای تمامی ستونها منتقل کنید.
 
نکته: اگر با خطایی مضمون Value does not fall within the expected range مواجه شدید
 
شما DisplayIndex تکراری یا بدون شماره در کدهای خود دارید. این خطا را می توانید با مراجعه به کدهای XAML و شماره گذاری درست ستونها رفع کنید( ستونها را با شروع از صفر شماره گذاری کنید).
 
مهم است که هر ردیف در DataGrid به داده ها مقید شود، در غیر اینصورت شما هر وقت که بخواهید پروژه را اجرا کنید، با خطای Value cannot be null مواجه خواهید شد.
در Property ها برای ردیف (ستونی که به تازگی آنرا اضافه کرده اید)، گزینه Advanced options در کنار Binding را انتخاب کنید.

و آنرا به colRIAComments مقید کنید.
 
پس از انجام عمل انقیاد، سایر خواص باقی مانده را همانند تصویر فوق تنظیم کنید.
 
روی ستون مجدداً کلیک راست کرده و سپس Edit a Copy مربوط به Edit CellStyle را انتخاب کنید.
 
در جعبه Create Style Resource، گزینه New را انتخاب کنید.
 
روی OK کلیک کنید.
 
در پنجره Create Style Resource روی OK کلیک کنید.
 
حال باید Style را ویرایش کنید. روی Style کلیک راست کرده و گزینه Edit Current را انتخاب کنید.
 
روی ContentPresenter کلیک کنید. این کار طراحی اصلی صفحه را تغییر خواهد داد طوری که شما می توانید Content Template را ویرایش کنید.
 
یک دکمه را روی design page قرار دهید.
 
در خواص مربوط به Button:
•    مقدار Margin ها را به 5 تغییر دهید.
•    محتوی Content را به Clear تغییر دهید.
•    روی دکمه کلیک کرده سپس مقدار DataContext را . . .
 
. . . به View Model مورد استفاده MaingPage تنظیم کنید.
این کار به منظور انجام می شود که Behavior ی که در مرحله بعدی افزوده خواهد شد قادر باشد ICommand های روی View Model اصلی ببیند، در غیر این صورت دامنه (scope) دکمه (و هر Behavior پیوست شده به آن) فقط به عناصر  موجود در ردیف DataGrid محدود خواهد شد.
به هر حال توجه داشته باشید که آنچه که انجام دادیم ساخت یک نمونه جدید از MainPageModel است. ICommand ی که آن را بالا خواهیم آورد (raise) به نمونه MainPageModel ی که به صفحه .xaml که UI (رابط کاربر) روی آن قرار دارد متصل نخواهد شد، بلکه به کپی دیگری از آن مقید خواهد شد.
همچنین توجه کنید که نمونه جدید MainPageModel برای هر ردیف ایجاد خواهد شد و این که در این مثال، یک فراخوانی در سازنده کلاس برای اخذ RIAComments وجود دارد که در هر بار فراخوانی خواهد شد. بنابراین وقتی این برنامه بارگذاری می شود (load)، برنامه GetRIAComments Web Service را 6 بار بیشتر (extra times)  فراخوانی خواهد کرد. این کار فقط روی صفحه اول انجام می شود، اما ممکن است به انجام این عمل در تمامی صفحات علاقه مند نباشید.
اگر چندین بار نمونه سازی می شود، راه حل ایجاد یک ViewModel جداگانه است که مانع از ایجاد تاثیرات ناخواسته شود. برای مطالعه بیشتر به آموزشی که در صفحه زیر است مراجعه کنید:
Deleting a Silverlight DataGrid Row With a Button on the Row
 
یک InvokeCommandAction Behavior روی دکمه قرار دهید.
 
در خواص مربوط به Behavior، EventName را برابر کلیک قرار داده و Command آنرا روی ClearCommand ست کنید.
contentPresenter (والد دکمه) به بستر ردیف جاری مقید است، بنابراین شما می توانید به راحتی DataContext آنرا به عنوان پارامتر ارسال کنید.

در خواص مربوط به Behavior، روی Advanced options مربوط به CommandParameter کلیک کنید.
 
پارامتر را به DataContext مربوط به ContentPresenter مقید کنید.
 
کلید F5 را جهت ساخت و اجرای پروژه فشار دهید.
وقتی روی دکمه Clear در یک ردیف کلیک می کنید، موجب تغییر محتوای Comment همان ردیف به **** خواهد شد. شما می توانید به راحتی ICommand فراخوانی شده به وسیله دکمه را به Update یا Delete یک Comment تغییر دهید.

انشالله در قسمت بعد به مبحث مرتب سازی (Sorting) خواهیم پرداخت.