[Solved] AutoComplete - Entry differance in templates.

[Wojtek]

Hi,

I'm trying to achieve the same styling for RadAutoComplete and RadEntry. However there's a mismatch between ClearButton padding/margin or overall how it is placed.

Firstly when i try raw controlls without styles whatsover, there's noticeable difference between AutoComplete ClearButton size and RadEntry ClearButton size. 

Getting the size of two icons to be the same is fairly easy reffering to the documentation however i cannot get them to display in the same place. RadEntry's icon is slightly offset to the right as if inner container had different values or something. I tried resetting margin and padding with styles as well as in the control itself. 

I'm also attaching screenshots. You can see the difference there.

        var radComplete = new RadAutoComplete
        {
            Placeholder = "Search ...",
            TextColor = Colors.Black,
            BackgroundColor = Colors.White,
            CompletionMode = AutoCompleteCompletionMode.Contains,
            SuggestMode = AutoCompleteSuggestMode.Suggest,
            NoResultsMessage = "No matches ..",
            SearchThreshold = 3,
            ItemsSource = new List<string>
            {
                "Apple", "Apple1", "Apple2", "Apple3", "Apple4", "Apple5", "Banana", "Cherry", "Date", "Elderberry"
            },
            ClearButtonStyle = new Style(typeof(RadTemplatedButton))
            {
                Setters =
                {
                    // new Setter
                    // {
                    //     Property = RadTemplatedButton.PaddingProperty,
                    //     Value = 0
                    // },
                    // new Setter
                    // {
                    //     Property = RadTemplatedButton.MarginProperty,
                    //     Value = 0
                    // },
                    new Setter
                    {
                        Property = RadTemplatedButton.BackgroundColorProperty,
                        Value = Colors.Red
                    },
                    new Setter
                    {
                        Property = VisualStateManager.VisualStateGroupsProperty,
                        Value = new VisualStateGroupList
                        {
                            new VisualStateGroup
                            {
                                Name = "CommonStates",
                                States =
                                {
                                    new VisualState { Name = "Normal" },
                                }
                            }
                        }
                    },
                }
            },
            TextInputStyle = new Style(typeof(RadTextInput))
            {
                Setters =
                {
                    new Setter { Property = RadTextInput.MinimumHeightRequestProperty, Value = 44 },
                    new Setter { Property = RadTextInput.MaximumHeightRequestProperty, Value = 44 }
                }
            }
        };

        var radEntry = new RadEntry
        {
            Placeholder = "Search ...",
            TextColor = Colors.Black,
            BackgroundColor = Colors.White,
            HeightRequest = 44,
            ClearButtonStyle = new Style(typeof(RadTemplatedButton))
            {
                Setters =
                {
                    // new Setter
                    // {
                    //     Property = RadTemplatedButton.PaddingProperty,
                    //     Value = 0
                    // },
                    // new Setter
                    // {
                    //     Property = RadTemplatedButton.MarginProperty,
                    //     Value = 0
                    // },
                    new Setter
                    {
                        Property = RadTemplatedButton.BackgroundColorProperty,
                        Value = Colors.Red
                    },
                    new Setter
                    {
                        Property = VisualStateManager.VisualStateGroupsProperty,
                        Value = new VisualStateGroupList
                        {
                            new VisualStateGroup
                            {
                                Name = "CommonStates",
                                States =
                                {
                                    new VisualState { Name = "Normal" },
                                }
                            }
                        }
                    },
                }
            },
            Style = new Style(typeof(RadEntry))
            {
                Setters =
                {
                    new Setter
                    {
                        Property = VisualStateManager.VisualStateGroupsProperty,
                        Value = new VisualStateGroupList
                        {
                            new VisualStateGroup
                            {
                                Name = "CommonStates",
                                States =
                                {
                                    new VisualState { Name = "Normal" },
                                }
                            }
                        }
                    },
                }
            }
        };

[Didi]

Hello Wojtek,

Thank you for the provided details.

I have reviewed our internal backlog and we have an item for reviewing all input controls' clear button. I have logged a public item on your behalf, so you can track its progress: https://feedback.telerik.com/maui/1715547-input-controls-same-look-for-the-clear-button 

For now I can suggest you review the complete controls templates and styles we exposed in the Telerik Theming: https://www.telerik.com/maui-ui/documentation/styling-and-themes/overview You can modify the control templates, etc. For entry and autocomplete you can review the AutoComplete.xaml and Entry.xaml files.

Regards,
Didi
Progress Telerik