'Same value gets selected in all comboboxes upon changing selection in one combobox in a WPF application

Hi I have a problem with binding in two cascading comboboxes. Please see below xaml code:

<DataGridTemplateColumn Width="2*" Header="Modality">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox UseLayoutRounding="True" FontFamily="{StaticResource 
SiemensSansFontFamily}" FontSize="15" FontWeight="Regular" 
                              Style="{StaticResource InputDataOrderGridComboBoxStyle}" 
Margin="10 15 10 15" 
                              Foreground="{StaticResource WhiteOpacityNinetyPercentage}"  
VerticalAlignment="Top" Height="30" 
                              Text="{Binding Modality, Mode=TwoWay, 
UpdateSourceTrigger=PropertyChanged}" 
                              ItemsSource="{Binding DataContext.Modalities, Mode=TwoWay,
                              RelativeSource={RelativeSource FindAncestor, AncestorType= 
{x:Type DataGrid }}}" DisplayMemberPath="Name" 
                              SelectedItem="{Binding DataContext.SelectedModality,Mode 
=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}">

                    </ComboBox>
                    </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

        <DataGridTemplateColumn Width="4*" Header="Image Type">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                        <ComboBox Name="CmbImageType"  UseLayoutRounding="True" FontFamily="{StaticResource SiemensSansFontFamily}" FontSize="15" 
                              FontWeight="Regular" Style="{StaticResource InputDataOrderGridComboBoxStyle}" Margin="10 15 10 15" 
                              Foreground="{StaticResource WhiteOpacityNinetyPercentage}" VerticalAlignment="Top" Height ="30"  
                              Text="{Binding ImageType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                              ItemsSource="{Binding DataContext.ImageTypes, Mode=TwoWay, RelativeSource={RelativeSource   FindAncestor, AncestorType={x:Type DataGrid}}}"
                              SelectedItem="{Binding DataContext.SelectedImageType, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}">
                    </ComboBox>
                    </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>

how my datagrid looks:https://i.stack.imgur.com/5lYtw.png

In View model:

public ObservableCollection Modalities { get; set; }

    private ObservableCollection<string> myImageTypes;
    public ObservableCollection<string> ImageTypes {
        get => myImageTypes;
        set
        {
            myImageTypes = value;
            OnPropertyChanged();
        }
    }

    private Modality mySelectedModality;
    public Modality SelectedModality
    {
        get => mySelectedModality;
        set
        {
            mySelectedModality = value;
            OnPropertyChanged();

            ImageTypes = SelectedModality.ImageTypes;
            OnPropertyChanged("ImageTypes");

            SelectedImageType = ImageTypes[0];
            OnPropertyChanged("SelectedImageType");
        }
    }

In View model constructor:

Modalities = Modality.GetModalitiesList(); ImageTypes = Modalities[0].ImageTypes;

On adding new row: Modalities = Modality.GetModalitiesList(); ImageTypes = Modalities[0].ImageTypes;

Model:

public class Modality { public string Name { get; set; }

    public ObservableCollection<string> ImageTypes { get; private set; }

    public static ObservableCollection<Modality> GetModalitiesList()
    {
        var modalities = new ObservableCollection<Modality> {
            new Modality{ Name = "NM", ImageTypes = new ObservableCollection<string>
            {
                "Static",
                "Dynamic",
                "Gated",
                "WholeBody",
                "Tomo",
                "Gated Tomo",
                "Dynamic Tomo",
                "Recon Tomo",
                "Gated Recon Tomo",
                "Dynamic Recon Tomo" }},

            new Modality{ Name = "PT", ImageTypes = new ObservableCollection<string>
            {
                "Recon Tomo",
                "Recon Gated Tomo",
                "Recon Dynamic Tomo", }},

            new Modality{ Name = "CT", ImageTypes = new ObservableCollection<string>
            {
                "Any"}}
        };

        return modalities;
    }

}

The Problem is when I select any value in any ImageType combox, same value is shown in all Image type comboboxes. Please help , how to fix this. Any input is much appreciated. Thanks.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source