SfAutoComplete with border

[Jan Minarik]

I use Xamarin.Forms 3.6.0.264807 and Syncfusion.Xamarin.SfAutoComplete 17.1.0.32-beta.

It’s possible add border with radius arround SfAutoComplete control?

I am try achieve same look as SfTextInputLayoutStyle with ContainerType Outlined and OutlineCornerRadius 4.

I tried set this:

            <xForms:SfAutoComplete Grid.Column="0"

                                   Grid.Row="2"

                                   Watermark="Departments"

                                   SuggestionMode="StartsWith"

                                   ShowBorder="True"

                                   BorderColor="Black"

                                   DropDownCornerRadius="4"

                                   DataSource="{Binding Departments}"

                                   SelectedItem="{Binding SearchForm.Department}"

                                   DisplayMemberPath="Name" />

but no work. I get this look

[Mugundhan Saravanan]

Hi Jan Minarik,

 

 

Greetings from Syncfusion. 

 

Query: "SfAutoComplete with border". 

 

We have analyzed the reported query. In our implementation, we have inherit the EditText control for SfAutoComplete control in the native platform so line should be appeared under the text it's a general behavior. We can overcome this by adding SfAutoComplete inside the SfBorder and set the ShowBorder property as false in SfAutoComplete.  

 

We have prepared a sample by using the SfAutoComplete inside the SfBorder. Please check the sample and let us know any other concern. 

 

Code Snippet: 

 <border:SfBorder  BorderColor="Black"  BorderWidth="2" CornerRadius="4">

 

            <autocomplete:SfAutoComplete Watermark="Departments"         

                                         MinimumHeightRequest="40" 

                                         ShowBorder="False"                              

                                         DataSource="{Binding Collections}" 

                                         SelectedItem="{Binding SelectedItem}" 

                                         DisplayMemberPath="Name" /> 

        </border:SfBorder> 

 

 

 

Screenshot: 

 

 

Sample:  

http://www.syncfusion.com/downloads/support/forum/143452/ze/SfAutoCompleteSample_(1)1375835632    

 

Please check our UG-Documentation link for SfBorder control to know more information from the following 

 

Link: https://help.syncfusion.com/xamarin/sfborder/getting-started  

 

 

Thanks,
Mugundhan S. 

[Jan Minarik]

Thank you. This solution is OK for me. 

[Dhanasekar R]

Hi Jan Minarik, 

 

Glad that the solution works. Please get back to us if any further assistance on this. 

 

Regards, 

Dhanasekar