How to simply filter a Collection(View)(DataGrid) through a ComboBox via Item Property?

Question

after searching for hours and hours over weeks (at SO and google, I even asked ChatGPT), I was not able to find a Solution for my (simple?) Problem, although I have become close to my desired result.

What I have: I have an c# wpf xaml application, where I display some datagrids (as CollectionViewSource), any of them are filled by List<MyModel>, where each Model Containing different strings as propertys. I already use them as CollectionView in the XAML, have an filter in code behind, and can display the Lists.

XAML:

<Page.Resources>
     <CollectionViewSource Filter="MyFilter" Source="{Binding Aktie.AktieBuchwerte}" x:Key="AktieBuchwerte" CollectionViewType="ListCollectionView">
         <CollectionViewSource.SortDescriptions>
             <scm:SortDescription PropertyName="Datum" Direction="Descending"/>
     </CollectionViewSource.SortDescriptions>
</Page.Resources>

<ComboBox ItemsSource="{Binding Aktie.AktieBuchwerte}"
          Margin="{StaticResource SmallLeftMargin}"
          DisplayMemberPath="Quelle"
          SelectedValuePath="Quelle"
          x:Name="BuchWertComboBox"
          SelectedValue="Marketscreener"/>

<DataGrid
          AutoGenerateColumns="False"
          GridLinesVisibility="All"
          IsReadOnly="True"
          CanUserAddRows="False"
          ItemsSource="{Binding Source={StaticResource AktieBuchwerte}}"
          KeyboardNavigation.TabNavigation="Once">
          <DataGrid.Resources>
              <Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="Background" Value="DimGray" />
              </Style>
          </DataGrid.Resources>
          <DataGrid.Columns>
              <DataGridTextColumn Binding="{Binding Datum, StringFormat=yyyy}" Header="Jahr" />
              <DataGridTextColumn Binding="{Binding Value, ConverterCulture=de-de}" Header="Buchwert" />
              <DataGridTextColumn Binding="{Binding Schätzung, ConverterCulture=de-de}" Header="Schätzung" />
              <DataGridTextColumn Binding="{Binding Quelle, ConverterCulture=de-de}" Header="Quelle" />
          </DataGrid.Columns>
</DataGrid>

Code behind:

public partial class DataGridDetailPage : Page
{
    
    public DataGridDetailPage(DataGridDetailViewModel viewModel)
    {
        InitializeComponent();
        DataContext = viewModel;
    }
 
    private void MyFilter(object sender, FilterEventArgs e)
    {
        if (e.Item is AktieBuchwert obj)
        {
            e.Accepted = obj.Quelle == (string)BuchWertComboBox.SelectedValue;
        }
    }
}

public class DataGridDetailViewModel : ObservableObject, INavigationAware
{
    private readonly ISQLiteDataService _SQLiteDataService;
    private Aktie _aktie;

    public Aktie Aktie
    {
        get { return _aktie; }
        set { SetProperty(ref _aktie, value); }
    }

    public DataGridDetailViewModel(ISQLiteDataService SQLiteDataService)
    {
        _SQLiteDataService = SQLiteDataService;

    }

    public async void OnNavigatedTo(object parameter)
    {
        if (parameter is int Id)
        {
            Aktie = await _SQLiteDataService.GetGridDetailDataAsync(Id);
        }
    }
}

public class Aktie
{
    public List<AktieBuchwert> AktieBuchwerte { get; set; }
}

public class AktieBuchwert : AktieKennzahlen
    {
        public double Value { get; set; }

        public bool Schätzung { get; set; }

        public string Quelle { get; set; }
    }

Actual result ComboBox & List Actual result ComboBox dropdown & List

What I am not able to / where I could need some help after endless researching on my own: I am not able to:

A: get rid of the multiple lines showing in the combobox dropdown. Basically there are two values in this case: string Value A (Boerse.de) or string Value B (Marketscreener), I want the ComboBox only to show the single values that are available in the PropertyField "Quelle" in the underlying List, not to show each property value of each Object (normal filter behaviour I would asume?)

B: get the List filtered dynamically. I only see items in the List, if I hardcode the "Marketscreener" or "Boerse.de" into the "SelectedValue" of the ComboBox. Good is, that I see the corresponding correct items (only with Marketscreener if selected e.g.), but as soon as I try so attach Binding to that Selected Value Field, my List is empty, e.g: SelectedValue="{Binding Source={StaticResource AktieBuchwerte}, Path=Quelle}" is giving me following result: Dynamic selected value:

I have tried many different combinations, and even that i have a filter now was hours and hours of research. I can not believe, that something so trivial like filtering a list is not possibile within some small amount of line of codes?

Would be glad if someone have the right answer to this... Best regards P.S.: For those of you, who are curious about ChatGPTs answer, here it is: ChatGPTs answer on my Question

Answer 1

I usually use a additional list properties to do stuff like this. This solution is not perfect but easy and effective.
Also it allows you to add more filter logic if required.

ViewModel (DataGridDetailViewModel):

public async void OnNavigatedTo(object parameter)
{
    if (parameter is int id)
        await Initialize(id);
}

private async Task Initialize(int id)
{
    Aktie = await _SQLiteDataService.GetGridDetailDataAsync(id);
    var quellen = Aktie.AktieBuchwerte.GroupBy(buchwert => buchwert.Quelle).Select(group => group.Key).ToList();
    quellen.ForEach(quelle => Quellen.Add(quelle));
    SelectedQuelle = quellen.FirstOrDefault();
}

public ObservableCollection<string> Quellen { get; set; } = new ObservableCollection<string>();

public List<Buchwert> FilteredBuchwerte => GetFilteredBuchwerte();

public string SelectedQuelle
{
    get => _selectedQuelle;
    set
    {
        if (Equals(value, _selectedQuelle))
            return;
        _selectedQuelle = value;
        OnPropertyChanged(nameof(SelectedQuelle));
        // make the UI fetch the filtered list again
        OnPropertyChanged(nameof(FilteredBuchwerte));
    }
}

public Aktie Aktie
{
    get => _aktie;
    set
    {
        if (Equals(value, _aktie))
            return;
        _aktie = value;
        OnPropertyChanged(nameof(Aktie));
        // make the UI fetch the filtered list again
        OnPropertyChanged(nameof(FilteredBuchwerte));
    }
}

private List<Buchwert> GetFilteredBuchwerte()
{
    if (Aktie?.AktieBuchwerte == null)
        return new List<Buchwert>();
    IEnumerable<Buchwert> buchwerte = Aktie.AktieBuchwerte.ToList();
    buchwerte = buchwerte.Where(buchwert => buchwert.Quelle == SelectedQuelle);
    buchwerte = buchwerte.OrderByDescending(buchwert => buchwert.Datum);
    return buchwerte.ToList();
}

The setter could also be something like:

set
{
    SetProperty(ref _selectedQuelle , value);
    // make the UI fetch the filtered list again
    OnPropertyChanged(nameof(FilteredBuchwerte));
}

just make shure the UI is notified that the filtered list is changed as well.

View:
You won't need the <Page.Resources> block then, the MyFilter() in code behind will also no longer be required.

<ComboBox ItemsSource="{Binding Quellen}"
          Margin="{StaticResource SmallLeftMargin}"
          SelectedValue="{Binding SelectedQuelle, UpdateSourceTrigger=PropertyChanged}" />

<DataGrid AutoGenerateColumns="False"
          GridLinesVisibility="All"
          IsReadOnly="True"
          CanUserAddRows="False"
          KeyboardNavigation.TabNavigation="Once"
          ItemsSource="{Binding FilteredBuchwerte}">
[...]
</DataGrid>

Edit: Added null check to GetFilteredBuchwerte().