Utilization of DataGrid VS ListBox in WPF C#

In WPF (Windows Presentation Foundation), the DataGrid and ListBox are two powerful controls that serve different purposes and are suitable for different scenarios.

DataGrid

Purpose: The DataGrid is designed to display tabular data in a grid format, similar to a spreadsheet or database table.

Features

1. Supports sorting, filtering, and grouping of data.
2. Allows users to edit data directly within the grid.
3. Provides flexibility in customizing column layouts and cell templates.

Usage

1. The DataGrid is ideal for presenting structured data with multiple columns.
2. It is commonly used in applications where users need to view and manipulate data in a tabular format, such as inventory management systems, financial applications, or data entry forms.

ListBox

Purpose: The ListBox is used to display a list of items in either a vertical or horizontal format.

Features

1. Supports the selection of single or multiple items.
2. Allows customization of item templates to display complex data.
3. Supports data binding to collections for dynamic updates.

Usage

1. The ListBox is suitable for displaying a list of items where each item represents a single entity or piece of information.
2. It is commonly used in navigation menus, dropdown lists, or any scenario where a list of items needs to be presented to the user.

Utilization Examples
 

DataGrid

1. Displaying a list of products with columns for name, price, and quantity.
2. Showing a list of customers with columns for name, address, and contact information.
3. Viewing and editing data retrieved from a database table.

ListBox

1. Displaying a list of items in a shopping cart.
2. Showing a list of contacts in an address book.
3. Displaying a list of options in a settings menu.

The DataGrid is most suitable for presenting organized, tabular data with numerous columns, whereas the ListBox is perfect for showcasing item lists in either a vertical or horizontal format. Depending on your application's needs and the type of data being handled, you can select between these controls to design a user-friendly and effective interface for your users.

Implementation Example

Step 1. Xaml View

<Window x:Class="DatagridListBoxExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DatagridListBoxExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" WindowState="Maximized">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <GroupBox Header="DataGrid" FontSize="14" Grid.Row="0" Margin="5">
            <DataGrid ItemsSource="{Binding ProductsDetails}" AutoGenerateColumns="False" Grid.Row="0">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
                    <DataGridTemplateColumn Header="Price">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Price, StringFormat={}{0:C}}" />
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTextColumn Header="Quantity" Binding="{Binding Quantity}" />
                </DataGrid.Columns>
            </DataGrid>
        </GroupBox>
        <GroupBox Header="ListBox" FontSize="14" Grid.Row="1" Margin="5">
            <Grid>
                <!-- Header Row -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <!-- Header -->
                <Border Grid.Row="0" Background="LightGray" Padding="5">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Name" Grid.Column="0" FontWeight="Bold" Width="200"/>
                        <TextBlock Text="Price" Grid.Column="1" FontWeight="Bold" Width="200"/>
                        <TextBlock Text="Quantity" Grid.Column="2" FontWeight="Bold" Width="200"/>
                    </Grid>
                </Border>
                <!-- ListBox -->
                <ListBox Grid.Row="1" ItemsSource="{Binding ProductsDetails}" SelectionMode="Single">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="5">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="200"/>
                                    <ColumnDefinition Width="200"/>
                                    <ColumnDefinition Width="200"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{Binding Name}" Grid.Column="0" HorizontalAlignment="Left"/>
                                <TextBlock Text="{Binding Price, StringFormat={}{0:C}}" Grid.Column="1" HorizontalAlignment="Left"/>
                                <TextBlock Text="{Binding Quantity}" Grid.Column="2" HorizontalAlignment="Left"/>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </GroupBox>
    </Grid>
</Window>

Code Behind implementation

using System.Windows;

namespace DatagridListBoxExample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public List<ProductInfo> ProductsDetails { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            ProductsDetails = new List<ProductInfo>
            {
                new ProductInfo { Name = "Product 1", Price = 10.99m, Quantity = 100 },
                new ProductInfo { Name = "Product 2", Price = 20.49m, Quantity = 50 },
                new ProductInfo { Name = "Product 3", Price = 15.99m, Quantity = 75 }
            };

            DataContext = this;
        }
    }

    public class ProductInfo
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
        public int Quantity { get; set; }
    }
}

Step 2. Result's Appearance