Added new kb article add-icon-inside-autocomplete-input-area-dotnet-maui

knowledge-base/add-icon-inside-autocomplete-input-area-dotnet-maui.md

@@ -0,0 +1,92 @@
+---
+title: Displaying Additional Icon Inside AutoComplete Input Area
+description: Learn how to display an additional icon inside the input area of the Telerik UI for .NET MAUI AutoComplete component by customizing its ControlTemplate.
+type: how-to
+page_title: How to Add an Icon Inside AutoComplete Input Area in .NET MAUI
+meta_title: Add Icon Inside AutoComplete Input Area in Telerik UI for .NET MAUI
+slug: add-icon-inside-autocomplete-input-area-dotnet-maui
+tags: autocomplete, ui for .net maui, controltemplate, icon
+res_type: kb
+---
+
+## Environment
+
+| Version | Product | Author | 
+| --- | --- | ---- | 
+| 11.1.0 | Telerik UI for .NET MAUI AutoComplete | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | 
+
+## Description
+
+I want to display an additional icon inside the input area of the [UI for .NET MAUI AutoComplete](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/overview) component. 
+
+This knowledge base article also answers the following questions:
+- How to use the `ControlTemplate` to customize Telerik AutoComplete?
+- How can I add custom elements inside the AutoComplete input area?
+- How do I add an icon to the Telerik UI for .NET MAUI AutoComplete?
+
+## Solution
+
+To add an icon inside the input area of the AutoComplete component, modify its `ControlTemplate`. Use the pre-defined template available in the Telerik theming system and customize it as needed.
+
+1. Add the required namespaces to your page.
+
+2. Define a custom `ControlTemplate` for the AutoComplete component in the `ResourceDictionary` of your page. Include the additional icon inside the `PART_WrapLayout`.
+
+3. Apply the custom `ControlTemplate` to the `RadAutoComplete` component.
+
+Here is an example:
+
+```xaml
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+             xmlns:telerikMaui="clr-namespace:Telerik.Maui;assembly=Telerik.Maui.Core"
+             xmlns:telerikMauiControls="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
+             x:Class="MauiApp11.MainPage">
+
+    <ContentPage.Resources>
+        <ResourceDictionary>
+            <ControlTemplate x:Key="RadAutoComplete_ControlTemplate">
+                <telerikMauiControls:RadWrapLayout x:Name="PART_WrapLayout"
+                                                   BackgroundColor="Transparent"
+                                                   StretchLastChild="True"
+                                                   AutomationId="RadAutoCompleteViewWrapLayout">
+                    <!-- Add the additional icon here -->
+                    <Image WidthRequest="20" HeightRequest="20" BackgroundColor="LightBlue" />
+                    <telerikMauiControls:RadDockLayout x:Name="PART_DockLayout">
+                        <telerikMauiControls:RadTemplatedButton x:Name="PART_ClearButton"
+                                                                 IsEnabled="{TemplateBinding IsEnabled}"
+                                                                 Command="{TemplateBinding ClearTextCommand}"
+                                                                 Style="{TemplateBinding ActualClearButtonStyle}"
+                                                                 telerikMauiControls:RadDockLayout.Dock="Right"
+                                                                 AutomationId="RadAutoCompleteClearButton" />
+                        <telerikMauiControls:RadTextInput x:Name="PART_Input"
+                                                           Style="{TemplateBinding ActualTextInputStyle}"
+                                                           IsEnabled="{TemplateBinding IsEnabled}"
+                                                           FontFamily="{TemplateBinding FontFamily}"
+                                                           FontSize="{TemplateBinding FontSize}"
+                                                           FontAttributes="{TemplateBinding FontAttributes}"
+                                                           Text="{TemplateBinding Text, Mode=TwoWay}"
+                                                           TextColor="{TemplateBinding TextColor}"
+                                                           PlaceholderColor="{TemplateBinding PlaceholderColor}"
+                                                           Keyboard="{TemplateBinding Keyboard}"
+                                                           AutomationId="RadAutoCompleteTextInput" />
+                    </telerikMauiControls:RadDockLayout>
+                </telerikMauiControls:RadWrapLayout>
+            </ControlTemplate>
+        </ResourceDictionary>
+    </ContentPage.Resources>
+
+    <VerticalStackLayout>
+        <telerik:RadAutoComplete x:Name="autoComplete" 
+                                 ControlTemplate="{StaticResource RadAutoComplete_ControlTemplate}"
+                                 Placeholder="Search here..." />
+    </VerticalStackLayout>
+
+</ContentPage>
+```
+
+## See Also
+
+- [Styling and Themes Overview](https://www.telerik.com/maui-ui/documentation/styling-and-themes/overview)
+- [UI for .NET MAUI AutoComplete Documentation](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/overview)