How to round the corners of the closed/at rest SfComboBox?

[Will Autio]

Hi Syncfusion,

I am needing to mix some SfComboBox components with other brand of ComboBox components as well as buttons etc on a form.

All the other components can have rounded corners.

I see that there is a way to adjust the radius of the DropDownCornerRadius but I did not find a way to change the radius of the closed SfComboBox. I may have missed it among the many settings available.

Is there a setting for that? or is there another way to accomplish that? 

I need it for Android, iOS and UWP.

Thanks!

Will

[Rabhia Beham Kathar Mideenar]

Hi Will,

Greetings from Syncfusion.

We have prepared a sample with custom renderer to achieve your requirement. Please use the sample from the below link,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomRendererSample1866388161

Please check the same and let us know if you have any concerns.

Regards,
Rabhia Beham K.

[Will Autio]

Hello Rabhia Beham K,

Thanks for the sample program.

Using a Renderer is way more work than I expected to do for this. A simple Radius = "10" would have done well. 

Having said that, the demo program can be made to work for Android (and I expect for iOS - I have not tried it there yet). For Android, I need to ensure that the BackgroundColor of the combobox matches that of the form BackgroundColor. Otherwise the combo box looks like a regular rectangle - no rounded corners - unless you look very closely, then you may see some rounded border.

In UWP, it tries top work, but doesn't. If the page has a black background and I set the ComboBox to have a black background like in Android, then all I see is black - and if I look really closely, a thin line that looks like a border for the box that has a nice rounded look to it. Unfortunately, everything else is black so I see nothing.

This is illustrated in the attached screen shot from UWP.

Thanks for looking into this further.

Regards,

Will

Attachment: 2020_07_31_10_17_02_Combo_Hidden.UWP_a4bca292.7z

[Suganya Sethuraman]

Hi Will,

Currently, we don't have the CornerRadius support for SfComboBox.  Hence, we have logged the feature request for this. You can track the status of the feature from below link,

Feedback: https://www.syncfusion.com/feedback/16614 

Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we committed with already planned work. So, this feature will be available for any of our upcoming releases.

If you have any more specifications/suggestions to the feature request, you can add it as a comment in the portal.

We have achieved your requirement in two ways, 

·       Using the Custom Renderer 

·       Using the SfComboBox in the SfTextInputLayout 

Please have the sample by using custom renderer from the below link,

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_Sample_2173598930

We have achieved your requirement by setting ContainerType property of SfTextInputLayout as Outlined. Please have the sample,

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextInputLayout_ComboBox-2025760135

Please check the same and let us know if you have any concerns.

Regards,
Suganya Sethuraman 

 

[Will Autio]

Hello Suganya Sethuraman,

I see some cool things that you have done in the two links that you included. 

In the one, if I set the page background to black and the combobox background to white, I get white leaking past the rounded corners of the combobox - which does not happen in the components from other companies. See the code additions below:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Combo_Hidden.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:combobox="clr-namespace:Syncfusion.XForms.ComboBox;assembly=Syncfusion.SfComboBox.XForms"
    xmlns:local="clr-namespace:Combo_Hidden"
    BackgroundColor="Black">  <!-- add this line-->

    <ContentPage.BindingContext>
        <local:EmployeeViewModel />
    </ContentPage.BindingContext>

    <StackLayout Padding="30">
        <local:CustomComboBox
            x:Name="comboBox"
            DataSource="{Binding EmployeeCollection}"
            DisplayMemberPath="Name"
            HeightRequest="40"
            IsEditableMode="True"
            BackgroundColor="White">   <!-- add this line-->
            <local:CustomComboBox.DropDownButtonSettings>
                <combobox:DropDownButtonSettings Width="25" Height="30" />
            </local:CustomComboBox.DropDownButtonSettings>
        </local:CustomComboBox>

    </StackLayout>

</ContentPage>

In the other sample, adding page background color of black and BackgroundColor="White" like this:

        <inputLayout:SfTextInputLayout ContainerType="Outlined" Hint="User name" BackgroundColor="White">

also adds white outside the boundary of the combobox so that it does not look like the other components.

Regards,

Will

[Suganya Sethuraman]

Hi Will,

We have now achieved your requirement using the SfBorder control. We can get the round corner of SfComboBox using CornerRadius property of the SfBorder. Please use the sample from the below link,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_Border_Sample-987829614 

Please get back to us if you need any further assistance.

Regards,
Suganya Sethuraman  

[Will Autio]

Looks great - thanks!

Will

[Suganya Sethuraman]

Hi Will,

Thanks for the update.

Please get back to us if you need any further assistance.

Regards,
Suganya Sethuraman.