How to redesign the searchbar in .NET MAUI

Sowndarrajan Vijayaragavan 80 Reputation points

User's image

I need to change the search button from right to left.

Please mention the property in <!-- Default style for Windows.UI.Xaml.Controls.SearchBox -->

A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
1,428 questions
{count} votes

Accepted answer
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 16,621 Reputation points Microsoft Vendor


    After investigation, the SearchBar in MAUI corresponds to the control in WinUI3 is AutoSuggestionBox. Therefore, you could refer to the following steps to achieve this requirement.

    Step 1. According to the solution of your previous problem: Can we able to modify the design of toggle switch in maui ?, you need to open generic.xaml, and search for the following two style blocks:

    <Style TargetType="TextBox" x:Key="AutoSuggestBoxTextBoxStyle">
    <Style TargetType="AutoSuggestBox">

    Step 2. Copy the style code into Your_MAUI_Project\Platforms\Windows\App.xaml.

    Step 3. Refer to the key code snippets below for modifications:

    //In the <Style TargetType="TextBox" x:Key="AutoSuggestBoxTextBoxStyle">, change the column position of the Query button from right to left.
    <Button x:Name="DeleteButton" 
    <Button x:Name="QueryButton"
    <Style TargetType="AutoSuggestBox"> code block to add Padding to avoid overlapping the input text with the query button
    <TextBox x:Name="TextBox" 
    	... />

    Best Regards,

    Alec Liu.

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful