DataGrid وTreeView وListView مع تمرين عملي

مقدمة

في هذه الوحدة، سنستعرض كيفية استخدام أدوات WPF المتقدمة مثل DataGrid وTreeView وListView. هذه الأدوات تتيح لك التعامل مع البيانات المعقدة بشكل فعال داخل تطبيقات WPF، مما يساعد في تقديم تجربة مستخدم متقدمة. سنقوم بتغطية كيفية إعداد هذه الأدوات، تخصيص المظهر، وتنفيذ عمليات متقدمة مثل الفرز والتصفية والمجموعات (Grouping).

1. DataGrid Control

1.1 إعداد DataGrid وربط البيانات (Data Binding)

DataGrid هو أداة أساسية في WPF لعرض وتحرير البيانات الجدولية. يمكن ربط DataGrid بمصادر البيانات مثل ObservableCollection لعرض البيانات بطريقة تفاعلية.

<DataGrid AutoGenerateColumns="True" ItemsSource="{Binding Employees}" />

في المثال أعلاه، يتم ربط DataGrid بمجموعة Employees عبر ItemsSource. يتم إنشاء الأعمدة تلقائيًا بناءً على خصائص الكائنات المرتبطة.

1.2 تخصيص الأعمدة والقوالب داخل الخلايا

يمكن تخصيص الأعمدة في DataGrid عبر تحديدها يدويًا باستخدام DataGridTextColumn وDataGridTemplateColumn لعرض بيانات مخصصة داخل الخلايا.

<DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Employees}">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Position" Binding="{Binding Position}" />
        <DataGridTemplateColumn Header="Actions">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content="Edit" Command="{Binding EditCommand}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

في المثال أعلاه، قمنا بتعريف أعمدة مخصصة لإظهار البيانات وأزرار التحرير داخل الخلايا باستخدام DataTemplate.

1.3 تنفيذ الفرز، التصفية، والتجميع (Grouping)

يمكنك تنفيذ عمليات الفرز والتصفية باستخدام CollectionView التي توفر طرقًا لتصفية البيانات وفرزها. بالإضافة إلى ذلك، يمكنك تجميع البيانات في DataGrid.

CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(Employees);
view.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));

view.Filter = item => ((Employee)item).Position == "Manager";

view.GroupDescriptions.Add(new PropertyGroupDescription("Department"));

في هذا الكود، نقوم بفرز البيانات حسب الاسم، تصفية الموظفين بناءً على المناصب، وتجميع البيانات حسب القسم.

1.4 التعامل مع أحداث DataGrid واختيار العناصر

يمكن التعامل مع الأحداث المختلفة في DataGrid مثل SelectionChanged لمراقبة اختيار العناصر.

private void DataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var selectedEmployee = (Employee)((DataGrid)sender).SelectedItem;
    // معالجة البيانات الخاصة بالموظف المحدد
}

2. TreeView Control

2.1 عرض البيانات الهيكلية باستخدام TreeView

TreeView هو أداة ممتازة لعرض البيانات الهيكلية مثل الأقسام والشركات. يتم ربط TreeView ببيانات متسلسلة عبر HierarchicalDataTemplate.

<TreeView ItemsSource="{Binding Departments}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Employees}">
            <TextBlock Text="{Binding DepartmentName}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

في هذا المثال، نعرض بيانات الأقسام حيث يمكن لكل قسم أن يحتوي على مجموعة من الموظفين.

2.2 تخصيص عناصر TreeView باستخدام القوالب

يمكنك تخصيص عناصر TreeView باستخدام ItemTemplate لتحديد كيف يتم عرض البيانات داخل TreeViewItem.

<TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Employees}">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Icon}" Width="16" Height="16" />
            <TextBlock Text="{Binding DepartmentName}" Margin="5,0,0,0" />
        </StackPanel>
    </HierarchicalDataTemplate>
</TreeView.ItemTemplate>

2.3 تحميل البيانات الكبيرة بشكل Lazy

عند التعامل مع بيانات ضخمة، يمكنك استخدام تقنية Lazy Loading لتحميل البيانات عند الحاجة فقط، مما يحسن من أداء TreeView.

2.4 تنفيذ السحب والإفلات (Drag and Drop)

يمكنك تنفيذ عمليات السحب والإفلات داخل TreeView باستخدام الأحداث مثل PreviewMouseMove وDrop لتوفير تجربة مستخدم تفاعلية.

3. ListView Control

3.1 تخصيص مظهر ListView

ListView يوفر طريقة مرنة لعرض البيانات مع إمكانية تخصيص المظهر باستخدام View. يمكنك استخدام GridView أو تخصيص القوالب حسب الحاجة.

<ListView>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Role" DisplayMemberBinding="{Binding Role}" />
        </GridView>
    </ListView.View>
</ListView>

3.2 استخدام أوضاع العرض المختلفة (View Modes)

يمكنك تغيير وضع العرض في ListView باستخدام TileView أو غيره من الأوضاع لعرض البيانات بشكل مختلف.

3.3 تحسين الأداء باستخدام Virtualization

عند عرض كميات كبيرة من البيانات، يمكنك استخدام Virtualization لتحسين الأداء حيث يتم إنشاء العناصر البصرية فقط عند الحاجة.

4. تمرين عملي: تطبيق لإدارة البيانات

في هذا التمرين العملي، سنقوم بتطوير تطبيق بسيط لإدارة بيانات الموظفين. سيتم عرض البيانات باستخدام DataGrid، وسيتم تنظيم الأقسام باستخدام TreeView، بينما سنعرض المشاريع باستخدام ListView مع قوالب مخصصة. سنقوم أيضًا بإضافة ميزات الفرز، التصفية، وتحرير البيانات.

4.1 عرض وتحرير بيانات الموظفين باستخدام DataGrid

<DataGrid AutoGenerateColumns="True" ItemsSource="{Binding Employees}" />

4.2 تنفيذ TreeView لعرض هيكل الأقسام

<TreeView ItemsSource="{Binding Departments}" />

4.3 استخدام ListView لعرض المشاريع بقوالب مخصصة

<ListView ItemsSource="{Binding Projects}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Project Name" DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Start Date" DisplayMemberBinding="{Binding StartDate}" />
        </GridView>
    </ListView.View>
</ListView>

الخاتمة

في هذه الوحدة، استعرضنا أدوات WPF المتقدمة مثل DataGrid وTreeView وListView وتعلمنا كيفية تخصيص هذه الأدوات، التعامل مع البيانات، وتحسين أداء التطبيق باستخدام Virtualization. من خلال التمرين العملي، قمنا بتطوير تطبيق لإدارة البيانات يحتوي على ميزات متقدمة مثل الفرز والتصفية وتحرير البيانات.