Recipe Search

We will use the framework's SearchBoxViewModel control to filter the list of recipes by name. For a complete description of its behavior and public API, see Search Box.

Add a synchronized view field and the search box property to RecipePageViewModel:

	private readonly ISynchronizedView<RecipeViewModel, RecipeViewModel> _view;
    public SearchBoxViewModel Search { get; }

Update the RecipePageViewModel constructor. The recipes will now be processed through a synchronized View and its attached filter, rather than exposing the raw list directly.

...
		Search = new SearchBoxViewModel(
				nameof(Search),
				loggerFactory,
				UpdateRecipeList,
				TimeSpan.FromMilliseconds(500)
			)
			.SetRoutableParent(this)
			.DisposeItWith(Disposable);

        _view = _recipes.CreateView(x => x).DisposeItWith(Disposable);
        Recipes = _view.ToNotifyCollectionChanged().DisposeItWith(Disposable);
...

Update GetChildren to include the search component in the routing tree — SearchBoxViewModel is a regular view model, so its historical search text participates in Undo/Redo through the same tree.

	public override IEnumerable<IViewModel> GetChildren()
	{
		yield return Search;

		foreach (var recipe in _recipes)
		{
			yield return recipe;
		}
	}

Implement the UpdateRecipeList handler to apply the search filter.

	private Task UpdateRecipeList(string? text, IProgress<double> progress, CancellationToken cancel)
	{
		progress.Report(0);

		if (string.IsNullOrWhiteSpace(text))
		{
			_view.ResetFilter();
			return Task.CompletedTask;
		}

		_view.AttachFilter(x => x.Title.ViewValue.Value != null
			&& x.Title.ViewValue.Value.Contains(text, StringComparison.InvariantCultureIgnoreCase));

		progress.Report(1);

		return Task.CompletedTask;
	}

Add the search control to the RecipePageView XAML.

...
		<!-- Left panel (Sidebar) -->
		<Grid Grid.Column="0"
              RowDefinitions="Auto, *, Auto"
              Background="#252526">

			<avalonia:SearchBoxView DockPanel.Dock="Right"
									Margin="5"
									DataContext="{Binding Search}" />
        ...
        </Grid>
...

Additionally, hide the right-hand editor panel until a recipe is selected.

...
<!-- Right panel (Editor) -->
<Border Grid.Column="2"
        Background="#1E1E1E"
        Padding="30">
	<Grid>
		<Grid RowDefinitions="Auto, *"
			IsVisible="{Binding SelectedRecipe.Value, Converter={x:Static ObjectConverters.IsNotNull}}">
            ...
        </Grid>
    </Grid>
</Border>
...

The recipe list is filtered as the search query changes:

The completed Recipe Book page looks like this:

You can find the complete source code for the tutorial here

Last modified: 24 July 2026