آموزش برنامه نویسی

کنترل DataGrid

DataGrid به کنترل ListView زمانی که در آن از GridView استفاده می‌کنیم شباهت زیادی دارد. اما DataGrid قابلیت‌های بیشتری نسبت به ListView دارد. برای نمونه، کنترل DataGrid می‌تواند به صورت خودکار بر اساس داده‌هایی که به آن می‌دهیم، ستون‌ها را ایجاد کند. همچنین سلول‌های یک DataGrid به صورت پیش فرض قابل ویرایش هستند. ایجاد کردن یک DataGrid و درج داده‌ها در آن بسیار ساده‌تر از کنترل ListView است. به مثال زیر توجه کنید:

<Grid Margin="10">
    <DataGrid Name="dataGridSample"></DataGrid>
</Grid>

در قسمت کدنویسی سی شارپ هم کدهای زیر را بنویسید:

 1: using System;
 2: using System.Collections.Generic;
 3: using System.Windows;
 4: 
 5: namespace WpfApp1
 6: {
 7:     public partial class MainWindow : Window
 8:     {
 9:         public MainWindow()
10:         {
11:             InitializeComponent();
12: 
13:             List<User> users = new List<User>();
14:             users.Add(new User() { Id = 1, Name = "John Doe" , Birthday = new DateTime(1971, 7, 23) });
15:             users.Add(new User() { Id = 2, Name = "Jane Doe" , Birthday = new DateTime(1974, 1, 17) });
16:             users.Add(new User() { Id = 3, Name = "Sammy Doe", Birthday = new DateTime(1991, 9, 2 ) });
17: 
18:             dataGridSample.ItemsSource = users;
19:         }
20:     }
21: 
22:     public class User
23:     {
24:         public int      Id       { get; set; }
25:         public string   Name     { get; set; }
26:         public DateTime Birthday { get; set; }
27:     }
28: }

زمانی که این برنامه را اجرا کنیم خروجی زیر را نمایش می‌دهد:

در این برنامه یک کلاس به نام User ایجاد کردیم که دارای سه فیلد Id ،Name و Birthday است. سپس در متد سازنده کلاس MainWindow یک List از نوع کلاس User به نام users ایجاد کردیم. در ادامه با استفاده از متد Add، آیتم‌های مورد نظرمان را به List اضافه کردیم. آیتم‌های ما در اینجا اشیائی هستند که از کلاس User تعریف کردیم. در نهایت خاصیت ItemSource مربوط به DataGrid را برابر با users قرار دادیم. بر خلاف کنترل ListView که باید به صورت دستی مشخص می‌کردیم مقدار هر ستون، از کدام فیلد باید گرفته شود، در اینجا ستون‌ها به همان ترتیبی که در کلاس User آن‌ها را تعریف کردیم ایجاد می‌شوند.
زمانی که شما بر روی یکی از سلول‌های DataGrid دوبار کلیک کنید، مشاهده خواهید کرد که به شما اجازه می‌دهد تا آن را ویرایش کنید. همچنین اگر بر روی نام ستون‌ها کلیک کنید خواهید دید که به صورت خودکار جدول را بر اساس آن ستون مرتب می‌کند. با کلیک کردن بر روی سطر خالی آخر و پر کردن سلول‌های آن نیز می‌توانید یک سطر را به جدول اضافه کنید.

تعریف ستون‌ها به صورت دستی در DataGrid

در بخش قبلی مشاهده کردید که DataGrid ستون‌ها را به صورت خودکار بر اساس منبع داده‌ای که به آن می‌دهیم ایجاد می‌کند. اما در این بخش می‌خواهیم اضافه کردن ستون‌ها به DataGrid را به صورت دستی انجام دهیم. انواع داده‌ای که می‌توانید برای یک ستون در نظر بگیرید عبارتند از:

به مثال زیر توجه کنید:

<Grid Margin="10">
    <DataGrid Name="dataGridSample" AutoGenerateColumns="False">
        <DataGrid.Columns>

            <DataGridTextColumn Header="Name" Binding="{Binding Name}" />

            <DataGridTemplateColumn Header="Birthday">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <DatePicker SelectedDate="{Binding Birthday}" BorderThickness="0" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

        </DataGrid.Columns>
    </DataGrid>
</Grid>

با کدهای سی شارپی که در مثال بالا نوشته ایم کاری نداشته باشید و برنامه را اجرا کنید. زمانی که این برنامه را اجرا کنید خروجی زیر را نمایش می‌دهد:

در این مثال ما خاصیت AutoGenerateColumns را برابر با False قرار دادیم تا ستون‌های جدول را به صورت خودکار ایجاد نکند. سپس عنصر DataGrid.Columns را به DataGrid اضافه می‌کنیم تا ستون‌های مورد نظرمان را به صورت دستی به آن اضافه کنیم.
در اینجا ما دو ستون داریم که نوع داده اولی DataGridTextColumn است که به شما اجازه می‌دهد تا یک متن ساده را در آن ستون نمایش دهید و نوع داده دومی DataGridTemplateColumn است که به شما اجازه می‌دهد ترکیبی از کنترل‌ها را در آن ستون نمایش دهید. در مثال بالا، ما یک DatePicker را داخل ستون دوم قرار دادیم و زمانی که بر روی آن کلیک یک تقویم را به شما نشان می‌دهد.
با استفاده از خاصیت Header می‌توانید عنوان ستون‌ها را مشخص کنید. به این دلیل که می‌خواهیم ستون‌ها را به صورت دستی ایجاد کنیم و مقدار خاصیت AutoGenerateColumns را نیز برابر با False قرار دادیم، بنابراین باید خودمان هم به صورت دستی مشخص کنیم هر ستون مقدارش را از کدام فیلد بگیرد. برای این منظور از خاصیت Binding استفاده می‌کنیم. برای مثال در ستون اول مقدار خاصیت Binding ستون اول را برابر با {Binding Name} قرار دادیم. در اینجا ابتدا کلمه کلیدی Binding را می‌نویسیم سپس نام فیلدی را که می‌خواهیم این ستون مقدارش را از آن بگیرد می‌نویسیم.

نمایش جزئیات سطرها در DataGrid

یکی از کار هایی که در یک DatGrid می‌توانیم انجام دهیم نمایش جزئیات در مورد هر سطر است. برای درک بهتر به مثال زیر توجه کنید:

<Grid Margin="10">
    <DataGrid Name="dataGridSample" AutoGenerateColumns="False">
        <;DataGrid.Columns>
            <DataGridTextColumn Header="Name"     Binding="{Binding Name}" />
            <DataGridTextColumn Header="Birthday" Binding="{Binding Birthday}" />
        </DataGrid.Columns>
        <DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Details}" Margin="10" />
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
    </DataGrid>
</Grid>

خطوط 27-22 کدهای سی شارپی، که در ابتدای درس نوشته ایم، را به صورت زیر ویرایش کنید:

public class User
{
    public int      Id       { get; set; }
    public string   Name     { get; set; }
    public DateTime Birthday { get; set; }

    public string   Details
    {
        get
        {
            return String.Format("{0} was born on {1} and this is a long description of the person.", 
                this.Name, this.Birthday.ToLongDateString());
        }
    }
}

برنامه را اجرا و بر روی یکی از سطرها کلیک کنید:

DataGrid در این مثال دو ستون دارد که آن‌ها را به صورت دستی در DataGrid.Columns مشخص کردیم. برای اینکه چگونگی نمایش جزئیات مربوط به هر سطر را مشخص کنیم از عنصر DataGrid.RowDetailsTemplate استفاده می‌کنیم. در اینجا ما یک TextBlock را داخل آن قرار دادیم که مقدارش را از فیلدی به نام Details می‌گیرد. در کلاس User نیز یک فیلد جدید به نام Details اضافه کردیم و متن مورد نظرمان را در آن قرار دادیم. حال زمانی که بر روی هر سطر از جدول کلیک شود متنی که برای Details مشخص کردیم را نمایش می‌دهد.

کنترل نحوه نمایش جزئیات در DataGrid

به صورت پیش فرض جزئیات مربوط به یک سطر فقط زمانی نمایش داده می‌شود که آن سطر را انتخاب کنیم. اما شما با استفاده از خاصیت RowDetailsVisibilityMode می‌توانید این رفتار پیش فرض را تغییر دهید. نحوه مقداردهی این خاصیت در DataGrid به صورت زیر است:

<DataGrid Name="dataGridSample" RowDetailsVisibilityMode="Collapsed"></DataGrid>

خاصیت RowDetailsVisibilityMode سه مقدار زیر را می‌تواند بپذیرد: