How to build a cascading dropdown inside a DataTemplate? - wpf

Question

I am Building a WPF form in which I want to achieve a cascading dropdown inside an ItemsControl. There would be multiple rows and Dropdown2 source is dependent on Dropdown1.
The row gets added when i add an item to FilterData, and the dropdown also populates, but i am not sure how to make a relational database with multiple rows
Here is what I have tried so far
<ItemsControl Grid.Row="1" x:Name="Filter" ItemsSource="{Binding FilterData}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" Orientation="Horizontal" >
<CheckBox IsChecked="{Binding Group}"/>
<ComboBox x:Name="cmbCondition" ItemsSource="{Binding ConditionList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
DisplayMemberPath="Name" SelectedValuePath="Name" SelectedItem="{Binding ConditionList}" Width="80" Height="23" />
<ComboBox x:Name="cmbType" ItemsSource="{Binding TypeList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
DisplayMemberPath="Name" SelectedValuePath="Name" SelectedItem="{Binding TypeList}" Width="80" Height="23" />
<ComboBox x:Name="cmbOperator" ItemsSource="{Binding OperatorList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
DisplayMemberPath="Name" SelectedValuePath="Name" SelectedItem="{Binding OperatorList}" Width="80" Height="23" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
public ObservableCollection<FilterData> _FilterData { get; set; }
public ObservableCollection<ConditionList> _ConditionList { get; set; }
public ObservableCollection<TypeList> _TypeList { get; set; }
public IEnumerable<FilterData> FilterData
{
get { return _FilterData; }
}
public IEnumerable<ConditionList> ConditionList
{
get { return _ConditionList; }
}
public IEnumerable<TypeList> TypeList
{
get { return _TypeList; }
}
//Form Load event
Filter.DataContext = this;
AddRow();
private void AddRow()
{
_ConditionList = new ObservableCollection<ConditionList>()
{
new ConditionList() { Name = "AND" },
new ConditionList() { Name = "OR" }
};
_FilterData.Add(new FilterData
{
Group = true,
// Condition = _ConditionList
});
}
// Modal
public class TypeList
{
public string Name { get; set; }
}
public class ConditionList
{
public string Name { get; set; }
}
public class FilterData
{
public bool Group { get; set; }
public ConditionList Condition { get; set; }
}

Answer 1

If you bind the SelectedItem property of the first ComboBox to a source property of type ConditionList, you could populate the source collection for the second ComboBox (TypeList) in the setter of this one.
Make sure that you implement the INotifyPropertyChanged interface and raise the PropertyChanged event for the source collection property that is being set to a new value, e.g.:
private ConditionList _selectedCondition;
public ConditionList SelectedCondition
{
get { return _selectedCondition; }
set
{
_selectedCondition = value;
NotifyPropertyChanged();
//populate the list...
TypeList = new List<TypeList> { ... };
}
}
public IEnumerable<TypeList> TypeList
{
get { return _TypeList; }
private set { _TypeList = value; NotifyPropertyChanged(); }
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
XAML:
<ComboBox x:Name="cmbCondition" ItemsSource="{Binding ConditionList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}"
DisplayMemberPath="Name"
SelectedItem="{Binding SelectedCondition, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}" Width="80" Height="23" />
<ComboBox x:Name="cmbType" ItemsSource="{Binding TypeList, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}" ... />