Windows Presentation Foundation (WPF) is part of the .NET framework and provides various UI elements and a rich user interface. Today, we aim to provide an in-depth understanding of list controls in WPF. List controls play a key role in displaying and manipulating data. In this article, we will explain the types of WPF list controls, how to use them, and provide practical examples step by step.<\/p>\n
WPF has several types of list controls, each serving different purposes and functionalities. The main list controls are as follows:<\/p>\n
ListBox is the most basic list control in WPF. Users can add or remove items from the list and have the ability to handle selected items. Let\u2019s implement a ListBox through the following step-by-step example:<\/p>\n
<Window x:Class=\"ListBoxExample.MainWindow\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n Title=\"ListBox Example\" Height=\"350\" Width=\"525\">\n <Grid>\n <ListBox Name=\"myListBox\" Height=\"200\" Width=\"300\" SelectionChanged=\"myListBox_SelectionChanged\">\n <ListBoxItem>Item 1<\/ListBoxItem>\n <ListBoxItem>Item 2<\/ListBoxItem>\n <ListBoxItem>Item 3<\/ListBoxItem>\n <\/ListBox>\n <Button Name=\"addButton\" Content=\"Add\" Width=\"75\" Height=\"30\" Click=\"addButton_Click\" \n VerticalAlignment=\"Top\" HorizontalAlignment=\"Right\" Margin=\"0,10,10,0\"\/>\n <\/Grid>\n<\/Window><\/code><\/pre>\nIn the above code, we created a ListBox and added three items as initial values. When the add button is clicked, it will be set to add a new item to the list.<\/p>\n
2.2 Writing C# Code<\/h3>\nusing System;\nusing System.Windows;\n\nnamespace ListBoxExample\n{\n public partial class MainWindow : Window\n {\n public MainWindow()\n {\n InitializeComponent();\n }\n\n private void addButton_Click(object sender, RoutedEventArgs e)\n {\n myListBox.Items.Add(\"New Item \" + (myListBox.Items.Count + 1));\n }\n\n private void myListBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)\n {\n if (myListBox.SelectedItem != null)\n {\n MessageBox.Show(\"Selected Item: \" + myListBox.SelectedItem.ToString());\n }\n }\n }\n}<\/code><\/pre>\nThe above C# code adds a new item to the ListBox when the button is clicked and displays the selected item in a message box whenever it changes.<\/p>\n
3. Using the ComboBox Control<\/h2>\n
ComboBox is a dropdown-style list control that displays the items users can choose from. Let\u2019s look at a simple example using a ComboBox.<\/p>\n
3.1 Writing XAML Code<\/h3>\n<ComboBox Name=\"myComboBox\" Width=\"200\" Height=\"30\" SelectionChanged=\"myComboBox_SelectionChanged\">\n <ComboBoxItem>Option 1<\/ComboBoxItem>\n <ComboBoxItem>Option 2<\/ComboBoxItem>\n <ComboBoxItem>Option 3<\/ComboBoxItem>\n<\/ComboBox><\/code><\/pre>\n3.2 Writing C# Code<\/h3>\nprivate void myComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)\n{\n if (myComboBox.SelectedItem != null)\n {\n MessageBox.Show(\"Selected Option: \" + ((ComboBoxItem)myComboBox.SelectedItem).Content.ToString());\n }\n}<\/code><\/pre>\n4. Using the ListView Control<\/h2>\n
ListView is a very useful control that helps in representing complex data. It can display data in various formats such as icons, text, checkboxes, etc.<\/p>\n
4.1 Writing XAML Code<\/h3>\n<ListView Name=\"myListView\" Height=\"200\" Width=\"300\">\n <ListView.View>\n <GridView>\n <GridViewColumn Header=\"Name\" Width=\"100\" DisplayMemberBinding=\"{Binding Name}\"\/>\n <GridViewColumn Header=\"Age\" Width=\"100\" DisplayMemberBinding=\"{Binding Age}\"\/>\n <\/GridView>\n <\/ListView.View>\n<\/ListView><\/code><\/pre>\n4.2 Writing the Data Model Class<\/h3>\npublic class Person\n{\n public string Name { get; set; }\n public int Age { get; set; }\n}<\/code><\/pre>\n4.3 Writing C# Code<\/h3>\nprivate void LoadData()\n{\n var people = new List<Person>()\n {\n new Person() { Name = \"John Doe\", Age = 25 },\n new Person() { Name = \"Lee Mong-ryong\", Age = 30 },\n new Person() { Name = \"Seong Chun-hyang\", Age = 22 }\n };\n\n myListView.ItemsSource = people;\n}<\/code><\/pre>\nThe LoadData method sets the data to be displayed in the ListView. This method should be called in the initialization method.<\/p>\n
5. Using the DataGrid Control<\/h2>\n
DataGrid is a useful control for handling large amounts of data, providing sorting, filtering, and editing features. Let’s look at an example of using the DataGrid as well.<\/p>\n
5.1 Writing XAML Code<\/h3>\n<DataGrid Name=\"myDataGrid\" AutoGenerateColumns=\"False\" Height=\"200\" Width=\"400\">\n <DataGrid.Columns>\n <DataGridTextColumn Header=\"Product Name\" Binding=\"{Binding ProductName}\" Width=\"150\"\/>\n <DataGridTextColumn Header=\"Price\" Binding=\"{Binding Price}\" Width=\"150\"\/>\n <\/DataGrid.Columns>\n<\/DataGrid><\/code><\/pre>\n5.2 Writing the Data Model Class<\/h3>\npublic class Product\n{\n public string ProductName { get; set; }\n public decimal Price { get; set; }\n}<\/code><\/pre>\n5.3 Writing C# Code<\/h3>\nprivate void LoadProducts()\n{\n var products = new List<Product>()\n {\n new Product() { ProductName = \"Product A\", Price = 10000 },\n new Product() { ProductName = \"Product B\", Price = 20000 }\n };\n\n myDataGrid.ItemsSource = products;\n}<\/code><\/pre>\n6. Summary<\/h2>\n
WPF’s list controls form the foundation for displaying data and allowing user interaction in all UIs. By utilizing various controls such as ListBox, ComboBox, ListView, and DataGrid, you can display and manipulate data according to user needs. Apply these controls to your projects to create useful user interfaces.<\/p>\n
With this code, you can easily build your own WPF applications, laying the foundation for WPF and moving on to design more complex user interfaces.<\/p>\n
Through the theory and practice of WPF\u2019s list controls, I hope you all can create more powerful and flexible applications.<\/p>\n","protected":false},"excerpt":{"rendered":"