This is a migrated thread and some comments may be shown as answers.

RadDropDownList rounded corners

1 Answer 281 Views
Themes and Visual Style Builder
This is a migrated thread and some comments may be shown as answers.
Graeme Lynch
Top achievements
Rank 1
Graeme Lynch asked on 31 May 2011, 11:43 AM
We are trying to round off the corners of the majority of controls in all themes.
We are finally getting there by setting different backgrounds as transparent but we are having a problem with the raddropdownlist.

When the control drops down we are seeing the white background behind the list.

I have attached an image which hopefully shows what I mean.

How do we set the background of this dropdown to be transparent and rounded.

I thought you may be using the radlistcontrol but this is set to be rounded and transparent and works.
Radpanel is also transparent and rounded which also works.

We have also found that if you set the 
RadDropDownList
     RadDropDownListElement
           RadDropDownListEditableAreaElement
                  BackColor   to be transparent in the style builder, this effect is not brought through to the front end when the theme is loaded.

Hope someone can shed some light on this.

Regards,

Graeme.

1 Answer, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 03 Jun 2011, 09:57 AM
Hi Graeme,

Thank you for the writing.

I can confirm this behavior - currently you cannot make RadDropDownList corners rounded. We will try to provide a fix for this in one of our next releases.

Do not hesitate to contact us if you have other questions.

Best wishes,

Peter
the Telerik team
Q1’11 SP1 of RadControls for WinForms is available for download; also available is the Q2'11 Roadmap for Telerik Windows Forms controls.
Ishank
Top achievements
Rank 1
Iron
commented on 09 Aug 2024, 09:31 AM

Hi,

Is this functionality added as I'm having similar problems ?
If yes, can you please explain how we can achieve this.

Thanks,
Ishank

Dinko | Tech Support Engineer
Telerik team
commented on 09 Aug 2024, 12:46 PM

With the latest versions of our controls, you can apply shape to our controls and their elements. You can read the Shapes Overview article to get familiar with the shape types and how to apply them. In your case, you can use the following code to round the corners of the RadDropDownList and its popup part:

RoundRectShape roundRectShape = new RoundRectShape();
roundRectShape.Radius = 10;
this.radDropDownList1.RootElement.ApplyShapeToControl = true;
this.radDropDownList1.DropDownListElement.Shape = roundRectShape;
this.radDropDownList1.DropDownListElement.EditableElement.Margin = new Padding(2);
this.radDropDownList1.DropDownListElement.EditableElement.TextBox.Shape = roundRectShape;
this.radDropDownList1.DropDownListElement.EditableElement.Shape = roundRectShape;
this.radDropDownList1.RootElement.Shape = roundRectShape;

RoundRectShape dropDownButtonShape = new RoundRectShape();
dropDownButtonShape.Radius = 5;
dropDownButtonShape.BottomLeftRounded = false;
dropDownButtonShape.TopLeftRounded = false;
this.radDropDownList1.DropDownListElement.ArrowButton.Shape = dropDownButtonShape;
this.radDropDownList1.DropDownListElement.ArrowButton.Margin = new Padding(0,0,3,0);

this.radDropDownList1.DropDownListElement.ListElement.Shape = new RoundRectShape(5);
this.radDropDownList1.DropDownListElement.ListElement.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
this.radDropDownList1.DropDownListElement.ListElement.EnableElementShadow = true;
this.radDropDownList1.DropDownListElement.ListElement.Margin = new Padding(3);
this.radDropDownList1.Popup.DropShadow = false;
this.radDropDownList1.Popup.BackColor = this.BackColor;

 

Ishank
Top achievements
Rank 1
Iron
commented on 12 Aug 2024, 10:08 AM

Hi,

I tried with the above suggested code but this white background is not going away. Not able to figure our which component/element this is.

My Code:

this.comboBox_Result.RootElement.ApplyShapeToControl = true;
this.comboBox_Result.RootElement.Shape = new RoundRectShape(10);

this.comboBox_Result.ListElement.Shape = new RoundRectShape(10);
this.comboBox_Result.DropDownListElement.Shape = new RoundRectShape(10);

this.comboBox_Result.DropDownListElement.EditableElement.Shape = new RoundRectShape(10);
this.comboBox_Result.DropDownListElement.EditableElement.Margin = new System.Windows.Forms.Padding(2);
this.comboBox_Result.DropDownListElement.EditableElement.TextBox.Shape = new RoundRectShape(10);

this.comboBox_Result.DropDownListElement.ListElement.Shape = new RoundRectShape(10);
this.comboBox_Result.DropDownListElement.ListElement.Margin = new System.Windows.Forms.Padding(2);
this.comboBox_Result.DropDownListElement.ListElement.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
this.comboBox_Result.DropDownListElement.ListElement.EnableElementShadow = true;
            
this.comboBox_Result.DropDownListElement.EditorElement.Shape = new RoundRectShape(10);
this.comboBox_Result.DropDownListElement.TextBox.TextBoxItem.Shape = new RoundRectShape(10);

this.comboBox_Result.Popup.BackColor = Color.Red;
this.comboBox_Result.Popup.DropShadow = false;



Could really use your help with this. This is a common control used across the application and same issue everywhere.
Dinko | Tech Support Engineer
Telerik team
commented on 12 Aug 2024, 02:21 PM

Different themes have different settings. Can you share which theme is applied in your application so that I can check the approach on my side?
Ishank
Top achievements
Rank 1
Iron
commented on 13 Aug 2024, 05:29 AM | edited

Not using a default theme, it's a custom theme which we have mostly handled programmatically, but this behavior is similar across other themes we have as well. Also I believe the theme settings should be overridden even if a default theme is used, by manual code.

I tried this into a separate sample code as well, same observation there too.

Here some or the other parent/element is definitely not getting set properly. If we can just identify that.
The element in question is RadListElement, we are setting it's shape and it's taking the rounded corners too. But then what is the parent for this RadListElement, that is still as a container having a background which is showing white color ?

I tried this in Visual Style Builder too, I set the the Rounded corners in RadListControl - RadListElement, so it reflects in RadDropDownList, but there too I can see some white color in the corners. See below image for reference.

Dinko | Tech Support Engineer
Telerik team
commented on 13 Aug 2024, 11:03 AM

Is it possible to share the custom theme file? Can you also share which theme the custom one is based on? I have tested my approach by applying FluentDark and it seems to work on my side.

As I mentioned, different themes have different settings. Probably additional customization is required in the custom theme.

Ishank
Top achievements
Rank 1
Iron
commented on 13 Aug 2024, 11:44 AM

It is not allowing me to upload the TSSP file here. (says invalid file extension). Is there any other way to share that ?

 

Dinko | Tech Support Engineer
Telerik team
commented on 14 Aug 2024, 10:41 AM

You can try to wrap the tssp file into an archive (ZIP) and try to attach it again.
Ishank
Top achievements
Rank 1
Iron
commented on 14 Aug 2024, 10:51 AM

Thanks for the suggestion. I've attached a zip containing Light and Dark theme (custom) files here. Please have a look.
Dinko | Tech Support Engineer
Telerik team
commented on 14 Aug 2024, 11:30 AM

Thank you for the custom theme files that were provided. I was able to observe the described behavior. You will need to set the Popup.BackColor property of the control to the color of the currently applied theme. 

this.radDropDownList1.Popup.BackColor = this.BackColor;

Changing the value of the Form BackColor will not change the value of the Popup.BackColor property automatically. That is why when you switch the themes runtime the BackColor of the popup stays white. Here is what I have in mind:

private void radButton1_Click(object sender, EventArgs e)
{
    ThemeResolutionService.ApplicationThemeName = "AlteryxDark";
    this.radButton1.ButtonElement.ButtonFillElement.BackColor = Color.Green;
    this.radButton2.ButtonElement.ButtonFillElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
    this.radDropDownList1.Popup.BackColor = this.BackColor;
}

private void radButton2_Click(object sender, EventArgs e)
{
    ThemeResolutionService.ApplicationThemeName = "AlteryxLight";
    this.radButton2.ButtonElement.ButtonFillElement.BackColor = Color.Green;
    this.radButton1.ButtonElement.ButtonFillElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local);
    this.radDropDownList1.Popup.BackColor = this.BackColor;
}

I am also attaching my sample project which I used to test your scenario. I hope that the suggested approach above will work for you.

Ishank
Top achievements
Rank 1
Iron
commented on 14 Aug 2024, 02:17 PM

Actually I have a button which opens up a RadForm (like a popup/dialog) which contains the Dropdown I'm working on. So this opens up after the Theme is loaded already.
So we are creating a new object every time we are opening this RadForm. 
I can only set this code in the constructor of the Form when every object is initializing.
Or in the constructor of the RadDropDownList itself.
So no additional button action is involved, But either way this case is not working

ThemeResolutionService.ApplicationThemeName = Theme.Get().Theme.ThemeName; //Gets/Sets the theme name
this.DropDownListElement.ListElement.Shape = new RoundRectShape(5);
this.DropDownListElement.ListElement.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
this.DropDownListElement.ListElement.EnableElementShadow = true;
this.DropDownListElement.ListElement.Margin = new Padding(2);
this.Popup.DropShadow = false;
this.Popup.BackColor = Color.Transparent; // hoping the color get transparent and take whatever is in the background.

Still I'm getting like this only:

Dinko | Tech Support Engineer
Telerik team
commented on 15 Aug 2024, 10:46 AM

To confirm that we are on the same page, the form is shown and while it is shown, the theme name is changed. In this way, indeed, the BackColor property won't be updated. What you can try is to subscribe to the ThemeResolutionService.ApplicationThemeChanged event in that form. In the event handler ,you can set the BackColor property of the this.radDropDownList1.Popup again.

 ThemeResolutionService.ApplicationThemeChanged += ThemeResolutionService_ApplicationThemeChanged;

private void ThemeResolutionService_ApplicationThemeChanged(object sender, ThemeChangedEventArgs args)
{
    this.radDropDownList1.Popup.BackColor = this.BackColor;
}

If that does not work, can you modify my test project to mimic your set-up and send it back to me so that I can take a closer look at the reported behavior.

 

Ishank
Top achievements
Rank 1
Iron
commented on 15 Aug 2024, 03:51 PM

ThemeResolutionService.LoadPackageResource
ThemeResolutionService.ApplicationThemeName

We are setting the above when the application launches and the main page is loaded. Then we perform a button click operation to open another RadForm like a dialog where the dropdown control is present.  So the theme is already set by the time we get to open this form. 

[We do call these theme methods when we change the Theme in Runtime but that operation we are not performing in this case.]

Moreover, we have a Custom class for RadDropDownList which we are using everywhere. So when the form opens this object in initialized and the code executes for a new instance. I tried adding the same code there but it is not working.
attaching it for your reference. Please have a look at it.

Dinko | Tech Support Engineer
Telerik team
commented on 16 Aug 2024, 10:51 AM

I have examined the code and what I notice is that in the custom RadDropDownList there is a method ApplyTheme(). In this method,  the ThemeResolutionService.ApplicationThemeName property is set. I don't have the full code and I am not sure if this method is not called more than once as there is a ThemChanged method. This is why I will need to the full implementation to examine what could break the logic. Also, I am not sure about setting the ThemeResolutionService.ApplicationThemeName property when the control is initialized is a good idea. As you mentioned, this control is used across your application and each time a control is initialized the global theme will be set which could override other logic for that. You could examine this in your application.

In addition, I have modified my project and added the AlteryxDropDownList custom control.

Ishank
Top achievements
Rank 1
Iron
commented on 16 Aug 2024, 10:57 AM | edited

This [ThemeResolutionService.ApplicationThemeName], I'm setting in custom class only after you suggested to add this. This is originally not present in our code except for at the start of application or when we change the theme through a manual action.

Adding this additional ThemeController class for your understanding how the ThemeChanged method works. This lets every control/class register to this.

Dinko | Tech Support Engineer
Telerik team
commented on 21 Aug 2024, 09:20 AM

I think I wasn't clear in my previous replies. Setting the ThemeResolutionService.ApplicationThemeName while the control is initializing was not in my intentions. In general, I assume that the theme of your application has been changed on a global level. 

I see that you want to create a generic solution for this and change the color of the popup in the custom AlteryxComboBox control. However, the approach with the BackColor will require changing its value when the theme is changed which will make it hard to get the value of the color in the custom class. The only thing that cames up to my mind in this particular case is to change the BackColor of the Popup when it is opened. I understand this is will hardcode the values but so far I wasn't able to find a better generic solution for your custom scenario:

private void AlteryxDropDownList_PopupOpened(object sender, EventArgs e)
{
    if (ThemeResolutionService.ApplicationThemeName == "AlteryxDark")
    {
        this.Popup.BackColor = Color.Black;
    }
    else
    {
        this.Popup.BackColor = Color.Transparent;
    }
}

Tags
Themes and Visual Style Builder
Asked by
Graeme Lynch
Top achievements
Rank 1
Answers by
Peter
Telerik team
Share this question
or