.NET MAUI Custom SearchHandler not applying ItemTemplate

Question

I've been trying to create a custom DataTemplate for ItemSource with the help of .NET MAUI Shell search documentation, but nor the XAML and C# code are not applying the custom template. I am running the code on winUI.

The code I've been trying to accomplish this with:

Inside the ContentPage where the SearchHandler is shown:

<Shell.SearchHandler>
    <controls:TagSearchHandler Placeholder="Enter search term"
                               ShowsResults="true">
      <controls:TagSearchHandler.ItemTemplate>
        <DataTemplate>
          <HorizontalStackLayout Padding="10">
            <Label Text="{Binding TagName}"
                   Margin="0,0,10,0" />
            <Label Text="Test" />
          </HorizontalStackLayout>
        </DataTemplate>
      </controls:TagSearchHandler.ItemTemplate>
    </controls:TagSearchHandler>
</Shell.SearchHandler>

TagSearchHandler.cs, inside OnQueryChanged

protected override void OnQueryChanged(string oldValue, string newValue)
{
    base.OnQueryChanged(oldValue, newValue);

    // Filter data based on the newText
    var filteredData = new List<DataHolderClass> { /*populate*/ };    ItemsSource = filteredData; 
    // Set the ItemSource
    ItemsSource = filteredData;
}

The TagSearchHandler is using DataHolderClass

public class DataHolderClass: ObservableObject
{
    public string TagName { get; set; }
    ...
}

However by only using this, the SearchHandler displays namespace with class name. SearchHandler results image

Am I missing something?

[ObservableProperty] before you declare tagName – Leandro Toloza Aug 29 '22 at 22:13 — Leandro Toloza, Aug 29 '22 at 22:13

score 1 · Accepted Answer · answered Nov 22 '22 at 09:07

From what I have researched, it would appear that this is an issue on .NET 6 on winUI platform. What I would suggest is to create a custom SearchControl with a SearchBar and some sort of collection view (or a ListView).

An example of the custom search control could look something like this

<VerticalStackLayout WidthRequest="300">
<SearchBar x:Name="searchBar">
    <SearchBar.Behaviors>
        <xct:UserStoppedTypingBehavior Command="{Binding SearchCommand}"
                                   CommandParameter="{Binding Text, Source={x:Reference searchBar}}"
                                   StoppedTypingTimeThreshold="300"
                                   MinimumLengthThreshold="0"
                                   ShouldDismissKeyboardAutomatically="False" />
    </SearchBar.Behaviors>
</SearchBar>
<ListView MaximumHeightRequest="300"
                      ItemsSource="{Binding SearchItemsSource}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                    <Label Text="{Binding TagName}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Where

xct:UserStoppedTypingBehavior

Is from the maui toolkit (https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/) and is used to not trigger search command on every change, but rather after a certain threshold.

.NET MAUI Custom SearchHandler not applying ItemTemplate

1 Answers1