Binding Collection-ListBox-DataGrid

Question

i have two Database Tables: Account and AccountRecords. They are connected with a Foreign Key because every Account contains multiple Records. I use ObservableCollection to bind the ListBox with the Accounts:

<ListBox Name="ListAccount"
         ItemsSource="{Binding CurrentHouse.Account}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid>
        <TextBlock>
          <TextBlock.Text>
            <MultiBinding StringFormat="{}{0} {1}">
              <Binding Path="AccountNumber" />
              <Binding Path="Name" />
            </MultiBinding>
          </TextBlock.Text>
        </TextBlock>
      </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

Then I bind the DataGrid with the selected Item in the ListBox:

<DataGrid ItemsSource="{Binding ElementName=ListAccount, Path=SelectedItems}">
  <DataGrid.Columns>
    <DataGridTextColumn Binding="{AccountNumber}"
                        Header="Nr"
                        FontSize="16" />
    <DataGridTextColumn Binding="{Name}"
                        Header="Name"
                        FontSize="16" />
  </DataGrid.Columns>

This is everything OK. My question is how can i show in my DataGrid the Records for each Account? The Records are in a separate Table. If i create a second Observable Collection how can show the Records and the Accounts in the DataGrid?

Thank you. Georg

Answer 1

You can use RowDetails Template. Example Code is Below:

XAML :

<Window x:Class="TestWPFApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestWPFApp"
    Title="MainWindow" Height="350" Width="525">

<Grid>
    <DataGrid ItemsSource="{Binding AccountList}" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding AccountNumber}" Header="Account Number" FontSize="16"/>
            <DataGridTextColumn Binding="{Binding Name}" Header="Name" FontSize="16"/>
        </DataGrid.Columns>
        <DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <DataGrid ItemsSource="{Binding RecordList,Mode=TwoWay}" AutoGenerateColumns="False">
                    <DataGrid.Columns>
                        <DataGridTextColumn Binding="{Binding RecordNumber}" Header="Record Number" FontSize="16"/>
                        <DataGridTextColumn Binding="{Binding Name}" Header="Name" FontSize="16"/>
                    </DataGrid.Columns>
                </DataGrid>
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
    </DataGrid>
</Grid>
</Window>

CodeBehind:

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

namespace TestWPFApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();
        }
    }


    public class ViewModel
    {
        public ViewModel()
        {
            //Sample Data
            var recordList = new ObservableCollection<Record>();
            recordList.Add(new Record() { RecordNumber = "R1", Name = "R-Name-1" });
            recordList.Add(new Record() { RecordNumber = "R2", Name = "R-Name-2" });
            recordList.Add(new Record() { RecordNumber = "R3", Name = "R-Name-3" });
            recordList.Add(new Record() { RecordNumber = "R4", Name = "R-Name-4" });

            AccountList = new ObservableCollection<Account>();
            AccountList.Add(new Account() { AccountNumber = "A1111", Name = "A-Name-1", RecordList = recordList });
            AccountList.Add(new Account() { AccountNumber = "A2222", Name = "A-Name-2", RecordList = recordList });
            AccountList.Add(new Account() { AccountNumber = "A3333", Name = "A-Name-3", RecordList = recordList });
            AccountList.Add(new Account() { AccountNumber = "A4444", Name = "A-Name-4", RecordList = recordList });
        }
        public ObservableCollection<Account> AccountList { get; set; }
    }

    public class Account
    {
        public string AccountNumber { get; set; }
        public string Name { get; set; }
        public ObservableCollection<Record> RecordList { get; set; }
    }

    public class Record
    {
        public string RecordNumber { get; set; }
        public string Name { get; set; }
    }
}

Answer 2

    public class Account
{
    public int AccountNumber { get; set; }
    public string Name { get; set; }
}

public class AccountRecords
{
    public int AccountNumber { get; set; }
    public int AccountRecordNumber { get; set; }
    public string Details { get; set; }
}

public class AccountManager
{
    public static List<Account> GetAccounts()
    {
        List<Account> accounts = new List<Account>()
            {
                new Account() { AccountNumber = 1, Name = "Account 1"},
                new Account() { AccountNumber = 2, Name = "Account 2"}
            };
        return accounts;
    }

    public static List<AccountRecords> GetAccountRecords(int accountNumber)
    {
        List<AccountRecords> records = new List<AccountRecords>()
            {
                new AccountRecords() {AccountNumber = 1, AccountRecordNumber = 1, Details = "1.1 record"},
                new AccountRecords() {AccountNumber = 1, AccountRecordNumber = 2, Details = "1.2 record"},
                new AccountRecords() {AccountNumber = 2, AccountRecordNumber = 3, Details = "2.2 record"},
                new AccountRecords() {AccountNumber = 2, AccountRecordNumber = 4, Details = "2.4 record"},
                new AccountRecords() {AccountNumber = 2, AccountRecordNumber = 5, Details = "2.5 record"},
            };
        return records.Where(q => q.AccountNumber == accountNumber).ToList();
    }
}

public class BindingRelationalDataViewModel : INotifyPropertyChanged
{
    public List<Account> Accounts { get; set; }

    private List<AccountRecords> currentAccountRecords;
    public List<AccountRecords> CurrentAccountRecords
    {
        get { return currentAccountRecords; }
        set
        {
            currentAccountRecords = value;
            RaisePropertyChanged("CurrentAccountRecords");
        }
    }

    public BindingRelationalDataViewModel()
    {
        Accounts = AccountManager.GetAccounts();
        CollectionViewSource.GetDefaultView(Accounts).CurrentChanged += new EventHandler(BindingRelationalDataViewModel_CurrentChanged);
    }

    void BindingRelationalDataViewModel_CurrentChanged(object sender, EventArgs e)
    {
        int accountNumber = ((Account)CollectionViewSource.GetDefaultView(Accounts).CurrentItem).AccountNumber;
        CurrentAccountRecords = AccountManager.GetAccountRecords(accountNumber);
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private  void RaisePropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

XAML

<Window x:Class="StackOverFlowQuestions.BindingRelationalData"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:StackOverFlowQuestions"
    Title="BindingRelationalData" Height="300" Width="300">
<Window.Resources>
    <local:BindingRelationalDataViewModel x:Key="BindingRelationalDataViewModel"></local:BindingRelationalDataViewModel>
</Window.Resources>
<StackPanel DataContext="{Binding Source={StaticResource ResourceKey=BindingRelationalDataViewModel}}">
    <ListBox Name="ListAccount" ItemsSource="{Binding Path=Accounts}" IsSynchronizedWithCurrentItem="True">
        <ListBox.ItemTemplate>
            <DataTemplate >
                <Grid>
                    <TextBlock>
                            <TextBlock.Text>
                                <MultiBinding StringFormat="{}{0} {1}" >
                                    <Binding Path="AccountNumber" />
                                    <Binding Path="Name" />
                                </MultiBinding>
                            </TextBlock.Text>
                    </TextBlock>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    <DataGrid ItemsSource="{Binding Path=CurrentAccountRecords}" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding AccountRecordNumber}" Header="Nr" FontSize="16"/>
            <DataGridTextColumn Binding="{Binding Details}" Header="Name" FontSize="16"/>
        </DataGrid.Columns>
    </DataGrid>
</StackPanel>