Control for adding key/value pairs?

Question

I need a control to allow users to add/delete/edit rows of key/value pairs. What's the best control to use for this? Does anyone have an example? I'm quite new to WPF.

Answer 1

I'd use a simple dialogue with two labelled text boxes, the new pair would be added to the original data which should be bound to the DataGrid so that rows are generated automatically.

Edit: A DataGrid example solution.
XAML:

<Window
    ...
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}">
    <StackPanel Orientation="Vertical">
        <DataGrid ItemsSource="{Binding GridData}"/>
    </StackPanel>
</Window>

Code behind:
In window class:

    private ObservableCollection<Pair> gridData = new ObservableCollection<Pair>(new Pair[]{new Pair()});
    public ObservableCollection<Pair> GridData
    {
        get { return gridData; }
    }

Pair class:

public class Pair : INotifyPropertyChanged
{
    private string key = "Key";
    public string Key
    {
        get { return key; }
        set
        {
            if (this.key != value)
            {
                key = value;
                NotifyPropertyChanged("Key");
            }
        }
    }


    private double value = 0;
    public double Value
    {
        get { return value; }
        set
        {
            if (this.value != value)
            {
                this.value = value;
                NotifyPropertyChanged("Value");
            }
        }
    }

    public Pair() { }
    public Pair(string key, double value)
        : this()
    {
        Key = key;
        Value = value;
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

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

    #endregion
}

You should be able to add new pairs with the normal DataGrid functionality.

Answer 2

Assuming you're using MVVM, use an ObservableCollection of your pair type (or you could use the System.Collections.Generic.KeyValuePair type if you didn't want to define your own) on your view model.

You can provide the user with two textboxes to add a new pair, which instantiates your pair type and adds it to the ObservableCollection. You can use commands to invoke a method on your view model to do this (or look into a framework such as Caliburn.Micro which supports convention based binding of view controls such as buttons to verbs on your view model).

You could use a ListBox to display the collection of pairs (just bind the ItemsSource property on the ListBox to the view models ObservableCollection of pairs). Alternatively, if you want to support inline editing of existing pairs, then the DataGrid would be a good choice. The DataGrid supports inline editing by double clicking a cell value. You can define a normal cell template and an editing cell template in the DataGrid XAML:

<DataGrid ItemsSource="{Binding MyPairsCollection}" AutoGenerateColumns="False">
  <DataGrid.Columns>
    <DataGridTemplateColumn Header="Key">
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate> 
          <TextBlock Text="{Binding Key}" />
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
      <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
          <TextBox Text="{Binding Key}" />
        </DataTemplate>
      </DataGridTemplateColumn.CellEditingTemplate>
    </DataGridTemplateColumn>
    ...
  </DataGrid.Columns>
</DataGrid>