{"id":37781,"date":"2024-11-01T10:00:23","date_gmt":"2024-11-01T10:00:23","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=37781"},"modified":"2024-11-01T11:03:45","modified_gmt":"2024-11-01T11:03:45","slug":"wpf-course-displaying-list-data-through-data-binding","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/37781\/","title":{"rendered":"WPF Course, Displaying List Data Through Data Binding"},"content":{"rendered":"
Windows Presentation Foundation (WPF) is a framework created by Microsoft for developing desktop applications. One of the main features of WPF is Data Binding. Data binding allows for an efficient connection between UI elements and data, enabling developers to clearly separate the business logic of an application from the UI. In this course, we will take a closer look at how to display list data using data binding in WPF.<\/p>\n
1. Basic Concept of Data Binding<\/h2>\n
Data binding refers to the connection between UI elements (e.g., text boxes, list boxes, etc.) and data sources. This ensures that when data changes, the UI is automatically updated, and conversely, the data that the user inputs in the UI is synchronized with the data source. WPF provides various features to facilitate easy binding.<\/p>\n
Using data binding provides the following benefits:<\/p>\n
\n
Code simplicity: UI elements and data sources can be connected intuitively, making the code simpler.<\/li>\n
Separation of concerns: Business logic and UI can be clearly distinguished, allowing for independent development and testing.<\/li>\n
Automatic updates: The UI is automatically updated when data changes, enhancing the user experience.<\/li>\n<\/ul>\n
2. Preparing Data Source<\/h2>\n
Now, let’s prepare a data source for displaying list data in a WPF application. For example, we will define a simple list that includes student information.<\/p>\n
\npublic class Student\n{\n public string Name { get; set; }\n public int Age { get; set; }\n public string Major { get; set; }\n}\n\npublic class StudentViewModel\n{\n public ObservableCollection<Student> Students { get; set; }\n\n public StudentViewModel()\n {\n Students = new ObservableCollection<Student>\n {\n new Student { Name = \"John Doe\", Age = 20, Major = \"Computer Science\" },\n new Student { Name = \"Jane Smith\", Age = 22, Major = \"Mathematics\" },\n new Student { Name = \"Sam Brown\", Age = 21, Major = \"Physics\" }\n };\n }\n}\n<\/code><\/pre>\n
In the code above, we have defined a Student<\/code> class to represent student information and created an ObservableCollection<\/code> to hold it. ObservableCollection<\/code> is a collection that automatically sends notifications to the UI when data changes.<\/p>\n
3. Setting Up Data Binding in XAML<\/h2>\n
Now it\u2019s time to set up data binding in the XAML file. We will set the StudentViewModel as the data context and bind the list data to the UI elements.<\/p>\n
The important parts of the above XAML code are the ItemsSource<\/code> property and the DataTemplate<\/code>. The ItemsSource<\/code> property specifies the data source to be displayed in the list box, and the DataTemplate<\/code> defines how each individual item is displayed.<\/p>\n
4. Interaction Between UI and Data<\/h2>\n
Data binding allows for smooth interaction between the UI and the data. For example, we could add functionality to show detailed information about a student when the user selects them from the list box.<\/p>\n
In the above code, we used the SelectedItem<\/code> property to bind the currently selected student’s information to the SelectedStudent<\/code> property. This information is automatically updated when displayed in the TextBlock<\/code>.<\/p>\n
5. MVVM Pattern and Data Binding<\/h2>\n
In WPF, it is common to use data binding in conjunction with the MVVM (Model-View-ViewModel) pattern. The MVVM pattern helps clarify the structure of the application, improving maintainability.<\/p>\n
Applying this pattern results in the following structure:<\/p>\n
\n
Model:<\/strong> Contains the application’s data and business logic.<\/li>\n
View:<\/strong> Defines UI elements and handles user interactions.<\/li>\n
ViewModel:<\/strong> Connects the Model and View and manages the interaction between UI and data through data binding.<\/li>\n<\/ol>\n
6. ObservableCollection and INotifyPropertyChanged<\/h2>\n
To notify the UI when data changes in WPF, the INotifyPropertyChanged<\/code> interface must be implemented. This interface raises events when property values change, notifying the UI of these changes.<\/p>\n
\npublic class Student : INotifyPropertyChanged\n{\n private string name;\n public string Name\n {\n get { return name; }\n set\n {\n if (name != value)\n {\n name = value;\n OnPropertyChanged(nameof(Name));\n }\n }\n }\n\n \/\/ Implement similarly for Age and Major...\n \n public event PropertyChangedEventHandler PropertyChanged;\n\n protected virtual void OnPropertyChanged(string propertyName)\n {\n PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n }\n}\n<\/code><\/pre>\n
By implementing INotifyPropertyChanged<\/code> in the Student<\/code> class, changes to the name will be automatically reflected in the UI.<\/p>\n
7. Practical Example: Displaying Data in a List View<\/h2>\n
Based on what we have learned so far, let’s conduct a practical exercise to implement data binding using a list view. In this example, we will display student information in a table format.<\/p>\n
In the code above, we used a DataGrid<\/code> to list student information in a table format. The Binding<\/code> properties of each DataGridTextColumn<\/code> connect the UI elements to the data sources.<\/p>\n
8. Adding and Removing Data<\/h2>\n
Now, let’s also implement functionality for adding and removing student information. We will add methods to the StudentViewModel<\/code> class to update student data.<\/p>\n
\npublic class StudentViewModel : INotifyPropertyChanged\n{\n public ObservableCollection<Student> Students { get; set; }\n public ICommand AddStudentCommand { get; set; }\n public ICommand RemoveStudentCommand { get; set; }\n\n public StudentViewModel()\n {\n Students = new ObservableCollection<Student>();\n AddStudentCommand = new RelayCommand(AddStudent);\n RemoveStudentCommand = new RelayCommand(RemoveStudent);\n }\n\n private void AddStudent()\n {\n Students.Add(new Student { Name = \"New Student\", Age = 18, Major = \"Undeclared\" });\n }\n\n private void RemoveStudent()\n {\n if (SelectedStudent != null)\n Students.Remove(SelectedStudent);\n }\n}\n<\/code><\/pre>\n
In the above code, RelayCommand<\/code> implements the ICommand interface to handle commands. We defined the AddStudent<\/code> method to add students and the RemoveStudent<\/code> method to delete the selected student.<\/p>\n
9. Adding Add and Remove Buttons to the UI<\/h2>\n
Let’s add buttons to the UI that allow for adding and removing student information.<\/p>\n