How to redesign the searchbar in .NET MAUI

Question

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

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

Answer 1

Hello,

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>

<Style TargetType="AutoSuggestBox">
...
</Style>

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" 
	...
	Grid.Column="1"
	.../>
<Button x:Name="QueryButton"
	...
	Grid.Column="0"
	.../>

//at
<Style TargetType="AutoSuggestBox"> code block to add Padding to avoid overlapping the input text with the query button
<TextBox x:Name="TextBox" 
	...
	Padding="30,10,0,0"
	... />

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.