Post History

I wrote quick (and somewhere dirty) example to show one of possible approaches:

1. Add properties corresponding to each filter:

```csharp
private string productCode;
private string productDescription;

public string ProductCode 
{ 
    get => productCode;
    set => SetProperty(ref productCode, value);
}

public string ProductDescription 
{ 
    get => productDescription;
    set => SetProperty(ref productDescription, value);
}
```

2. To keep it simple assume we want to filter data by pressing a button. So we have to add a command:

```csharp
public ICommand FilterCommand { get; }
```

3. Replace `List` with [`ObservableCollection`](https://docs.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-5.0)

```csharp
public Technical_BestBeforeDates_Record_ViewModel()
{
    VMs = new ObservableCollection<Technical_BestBeforeDates_Model>();
    FilterCommand = new RelayCommand(_ => UpdateDataFromDatabase());

    UpdateDataFromDatabase();
}

public void UpdateDataFromDatabase()
{
    VMs.Clear();
    // ToDo: replace with call to a DB
    var records = DataStorage.GetFilteredData(ProductCode, ProductDescription);
    foreach (Technical_BestBeforeDates_Model model in records)
    {
        VMs.Add(model);
    }
}
```

4. Write a UI

```xml
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock
            Grid.Row="0"
            Grid.Column="0"
            Margin="5"
            HorizontalAlignment="Center"
            Text="Code" />
        <TextBlock
            Grid.Row="1"
            Grid.Column="0"
            Margin="5"
            HorizontalAlignment="Center"
            Text="Description" />
        <TextBox
            Grid.Row="0"
            Grid.Column="1"
            Margin="5"
            Text="{Binding ProductCode}" />
        <TextBox
            Grid.Row="1"
            Grid.Column="1"
            Margin="5"
            Text="{Binding ProductDescription}" />
        <Button
            Grid.Row="2"
            Grid.Column="1"
            MaxWidth="100"
            Margin="5"
            HorizontalAlignment="Right"
            Command="{Binding FilterCommand}"
            Content="Filter" />
    </Grid>
    <DataGrid
        Grid.Row="1"
        AutoGenerateColumns="False"
        ColumnWidth="auto"
        IsReadOnly="True"
        ItemsSource="{Binding VMs}">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Id}" Header="Id" />
            <DataGridTextColumn Binding="{Binding ProductCode}" Header="Product Code" />
            <DataGridTextColumn Binding="{Binding ProductDescription}" Header="Product Description" />
        </DataGrid.Columns>
    </DataGrid>
</Grid>
```



In the code above I assume that

1. `BaseViewModel` class implements `INotifyPropertyChanged` interface and has `SetProperty` method.

2. `Technical_BestBeforeDates_Record_ViewModel` class is a "main" VM for that `UserControl` with `DataGrid` and a filter panel.

3. `Technical_BestBeforeDates_Model` class actually contains constructor so user can create its instance.

I've create a gist with full code to make it easier to you if some parts aren't clear enough.

https://gist.github.com/FoggyFinder/3d25d3260eaec06f819106cde33b914d