WPF DataGrid: Display Limited Fields, Expand with Popup, Maintain Data

This example showcases how to create a WPF DataGrid that displays a limited number of fields, expands to a popup for displaying and editing detailed information, and maintains data persistence across window re-openings.

XAML File (MainWindow.xaml):

<Window x:Class='DataGridExample.MainWindow'
        xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
        xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
        Title='DataGrid Example' Height='450' Width='800'>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height='*' />
            <RowDefinition Height='Auto' />
        </Grid.RowDefinitions>
        
        <DataGrid x:Name='dataGrid' ItemsSource='{Binding Items}' AutoGenerateColumns='False'>
            <DataGrid.Columns>
                <DataGridTextColumn Header='Name' Binding='{Binding Name}' />
                <DataGridTextColumn Header='Age' Binding='{Binding Age}' />
                <DataGridTextColumn Header='Email' Binding='{Binding Email}' />
                <DataGridTextColumn Header='Phone' Binding='{Binding Phone}' />
                <DataGridTemplateColumn Header='Details'>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content='View Details' Click='ViewDetails_Click' />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
        
        <Button Grid.Row='1' Content='Add New Item' Click='AddNewItem_Click' />
    </Grid>
</Window>

C# File (MainWindow.xaml.cs):

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;

namespace DataGridExample
{
    public partial class MainWindow : Window
    {
        public ObservableCollection<Item> Items { get; set; }

        public MainWindow()
        {
            InitializeComponent();

            // Initialize data
            Items = new ObservableCollection<Item>
            {
                new Item { Name = 'John Doe', Age = 30, Email = 'john.doe@example.com', Phone = '1234567890' },
                new Item { Name = 'Jane Smith', Age = 25, Email = 'jane.smith@example.com', Phone = '9876543210' },
                // Add more items...
            };

            DataContext = this;
        }

        private void ViewDetails_Click(object sender, RoutedEventArgs e)
        {
            // Get the selected data item
            Item selectedItem = (Item)dataGrid.SelectedItem;

            if (selectedItem != null)
            {
                // Create and show the details window
                DetailsWindow detailsWindow = new DetailsWindow(selectedItem);
                detailsWindow.ShowDialog();
            }
        }

        private void AddNewItem_Click(object sender, RoutedEventArgs e)
        {
            // Create and show the add new item window
            AddNewItemWindow addNewItemWindow = new AddNewItemWindow();
            addNewItemWindow.ShowDialog();

            // Check if a new item was added
            if (addNewItemWindow.NewItem != null)
            {
                // Add the new item to the data collection
                Items.Add(addNewItemWindow.NewItem);
            }
        }
    }

    public class Item
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
    }
}

XAML File (DetailsWindow.xaml):

<Window x:Class='DataGridExample.DetailsWindow'
        xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
        xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
        Title='Item Details' Height='300' Width='400'>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height='*' />
            <RowDefinition Height='Auto' />
        </Grid.RowDefinitions>
        
        <DataGrid x:Name='detailsDataGrid' ItemsSource='{Binding Details}' AutoGenerateColumns='True' />
        
        <Button Grid.Row='1' Content='Save' Click='Save_Click' />
    </Grid>
</Window>

C# File (DetailsWindow.xaml.cs):

using System.Collections.Generic;
using System.Windows;

namespace DataGridExample
{
    public partial class DetailsWindow : Window
    {
        public List<Detail> Details { get; set; }

        public DetailsWindow(Item selectedItem)
        {
            InitializeComponent();

            // Initialize details data
            Details = new List<Detail>
            {
                new Detail { Property = 'Name', Value = selectedItem.Name },
                new Detail { Property = 'Age', Value = selectedItem.Age.ToString() },
                new Detail { Property = 'Email', Value = selectedItem.Email },
                new Detail { Property = 'Phone', Value = selectedItem.Phone },
                // Add more details...
            };

            DataContext = this;
        }

        private void Save_Click(object sender, RoutedEventArgs e)
        {
            // Save changes
            MessageBox.Show('Details saved successfully!');
            Close();
        }
    }

    public class Detail
    {
        public string Property { get; set; }
        public string Value { get; set; }
    }
}

XAML File (AddNewItemWindow.xaml):

<Window x:Class='DataGridExample.AddNewItemWindow'
        xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
        xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
        Title='Add New Item' Height='200' Width='300'>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height='Auto' />
            <RowDefinition Height='Auto' />
            <RowDefinition Height='Auto' />
            <RowDefinition Height='Auto' />
            <RowDefinition Height='Auto' />
            <RowDefinition Height='Auto' />
            <RowDefinition Height='Auto' />
        </Grid.RowDefinitions>
        
        <Label Content='Name:' />
        <TextBox x:Name='nameTextBox' Grid.Row='0' />
        
        <Label Content='Age:' Grid.Row='1' />
        <TextBox x:Name='ageTextBox' Grid.Row='1' />
        
        <Label Content='Email:' Grid.Row='2' />
        <TextBox x:Name='emailTextBox' Grid.Row='2' />
        
        <Label Content='Phone:' Grid.Row='3' />
        <TextBox x:Name='phoneTextBox' Grid.Row='3' />
        
        <Button Grid.Row='4' Content='Add' Click='Add_Click' />
        <Button Grid.Row='5' Content='Cancel' Click='Cancel_Click' />
    </Grid>
</Window>

C# File (AddNewItemWindow.xaml.cs):

using System.Windows;

namespace DataGridExample
{
    public partial class AddNewItemWindow : Window
    {
        public Item NewItem { get; set; }

        public AddNewItemWindow()
        {
            InitializeComponent();
        }

        private void Add_Click(object sender, RoutedEventArgs e)
        {
            // Create new item
            NewItem = new Item
            {
                Name = nameTextBox.Text,
                Age = int.Parse(ageTextBox.Text),
                Email = emailTextBox.Text,
                Phone = phoneTextBox.Text
            };

            // Close window
            Close();
        }

        private void Cancel_Click(object sender, RoutedEventArgs e)
        {
            // Close window
            Close();
        }
    }
}

This example provides a basic framework for achieving the described functionality. You can adapt and extend it to meet your specific requirements.