Combobox not showing the items

Question

Here is my ViewModel Class

namespace ERP_Lite_Trial.ViewModels
{
    public class GroupsViewModel : INotifyPropertyChanged
    {
        public GroupsViewModel()
        {
            using (DBEntities db = new DBEntities())
            {
                var groups = (from g in db.Groups
                              select g.Name).ToList();

                this.GroupName = groups;

                var correspondingEffects = (from g in db.Groups
                                            select g.Type_Effect.Name).ToList();

                this.EffectCorrespondingToGroup = correspondingEffects;
            }
    }

        private List<string> _groupName;
        public List<string> GroupName
        {
            get
            {
                return _groupName;
            }
            set
            {
                _groupName = value;
                OnPropertyChanged("GroupName");
            }
        }

        private List<string> _effectCorrespondingToGroup;
        public List<string> EffectCorrespondingToGroup
        {
            get
            {
                return _effectCorrespondingToGroup;
            }
            set
            {
                _effectCorrespondingToGroup = value;
                OnPropertyChanged("EffectCorrespondingToGroup");
            }
        }

        public void OnPropertyChanged(string PropertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Now I will show you the two cases :

Case 1 : Works Well

<ComboBox x:Name="cbUnder" ItemsSource="{Binding Path=GroupName}" IsEditable="True"
            Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="3" />

In the above case I get all the group names from my database and are displayed correctly as items of the comboBox. But this is not what I want. I want to display two columns in this combobox.

Case 2: Not working as expected (There might be some silly mistake done by me)

<ComboBox x:Name="cbUnder" IsEditable="True" Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="3">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=GroupName}" Width="100"/>
                <TextBlock Text="|" Width="10" />
                <TextBlock Text="{Binding Path=EffectCorrespondingToGroup}" Width="100"/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

I did not get any errors in this case but my combobox is not showing any Items.

Answer 1

Your code needs to create the information you currently have in two lists as they relate to each other in one list. As two separate lists, there is no way to relate them to one another.

First change your DB query to return the information as a list of objects.

        using (DBEntities db = new DBEntities())
        {
            GroupsAndEffects = (from g in db.Groups
                          select new GroupAndEffect
                            {
                             GroupName = g.Name
                             EffectCorrespondingToGroup = g.Type_Effect.Name
                            }).ToList();
        }

the var groups needs to be a list of objects, instead of a list of strings:

private List<GroupAndEffect> _groupAndEffects;
    public List<GroupAndEffect> GroupsAndEffects
    {
        get
        {
            return _groupAndEffects;
        }
        set
        {
            _groupAndEffects = value;
            OnPropertyChanged("GroupsAndEffects");
        }
    }

Requiring a GroupAndEffect Class

public class GroupAndEffect
{
    public string GroupName;
    public string EffectCorrespondingToGroup;
}

Update Case 2:

<ComboBox x:Name="cbUnder" ItemsSource="{Binding GroupsAndEffects}" IsEditable="True" Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="3">
<ComboBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding GroupName}"/>
            <TextBlock Text="|" Width="10" />
            <TextBlock Text="{Binding EffectCorrespondingToGroup}" Grid.Column="1" />
        </StackPanel>
    </DataTemplate>
</ComboBox.ItemTemplate></ComboBox>