Combobox inside DataGrid, hide selected item on Combobox

Question

What I am trying to accomplish is to have a combo box that in a row on the DataGrid. Each of the comboboxes are bound to the same ItemsSource. I would like to have the end user be able to click on an item in the combobox and for that specific combobox, have that item be the selected item. And the rest of the comboboxes will then hide the selected value. I am still new to XAML though I do understand the whole MVVM pattern (which is what I am using).

XAML:

<DataGridTemplateColumn Header="Database Column" Width="150">
  <DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
      <ComboBox ItemsSource="{Binding DataContext.DatabaseMappingFields, ElementName=Root}" DisplayMemberPath="ColumnName">
        <ComboBox.Resources>
          <Style TargetType="ComboBoxItem">
            <Setter Property="Visibility" Value="{Binding IsSelected, Converter={StaticResource InverseBoolToVis}}"/>
          </Style>
        </ComboBox.Resources>
        <i:Interaction.Triggers>
          <i:EventTrigger EventName="SelectionChanged">
            <command:EventToCommand Command="{Binding DataContext.CommandDatabaseHeaderSelected, ElementName=Root}"  PassEventArgsToCommand="True"/>
          </i:EventTrigger>
        </i:Interaction.Triggers>
      </ComboBox>
    </DataTemplate>
  </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

C#:

SetDatabaseColumns(new List<string>()
{ "Item1", "Item2", "Item3", "Item4", "Item5", "Item6" });

public void SetDatabaseColumns(List<string> databaseColumnNames)
    {
        DatabaseMappingFields.Clear();
        DatabaseMappingFields.Add(new DatabaseColumnsModel() { ColumnName = "<ignore>" });
        foreach (var item in databaseColumnNames)
        {
            DatabaseMappingFields.Add(new DatabaseColumnsModel() { ColumnName = item });
        }
    }

public ICommand CommandDatabaseHeaderSelected
    {
        get
        {
            return _commandDatabaseHeaderSelected ??
                   (_commandDatabaseHeaderSelected = new RelayCommand<SelectionChangedEventArgs>(DatabaseHeaderSelected));
        }
    }

private void DatabaseHeaderSelected(SelectionChangedEventArgs args)
    {
        var selectedItem = args.AddedItems.Count >= 1
            ? args.AddedItems[0] as DatabaseColumnsModel
            : null;
        var previousItem = args.RemovedItems.Count >= 1
            ? args.RemovedItems[0] as DatabaseColumnsModel
            : null;
        var selectedFileMapping = Data.TextFileMapping.FirstOrDefault(w => w == SelectedFileMapping);

        if (selectedItem == null) return;

        var isSelected = IsSelectedItemEnabled(selectedItem, previousItem);
        selectedItem.IsSelected = isSelected;

        selectedFileMapping.DatabaseColumn = isSelected ? selectedItem : null;

        if (previousItem == null) return;
        previousItem.IsSelected = false;
    }

public class DatabaseColumnsModel : ObservableObject
{
    private string _columnName;
    private bool _isSelected;
    private int _index;

    public int Index
    {
        get { return _index; }
        set { Set(() => Index, ref _index, value); }
    }

    public string ColumnName
    {
        get { return _columnName; }
        set { Set(() => ColumnName, ref _columnName, value); }
    }

    public bool IsSelected
    {
        get { return _isSelected; }
        set { Set(() => IsSelected, ref _isSelected, value); }
    }
}

mbargar13 mbargar13 · Accepted Answer · 2015-07-14T14:22:54

Since we are making a desktop app and would like to have a common look and feel around all of our apps, we have decided to use WPF and CefSharp and use WPF as a shell and the front end will be HTML based and use a WPF CefSharp control to display a browser window inside of WPF.

Combobox inside DataGrid, hide selected item on Combobox

1 Answers