Hide border of CollapsiblePanel

[Gabriele]

Hi all,

I am pretty sure it is very easy to achive but I just can't find it.

I have an application that uses quite a lot of CollapsiblePanels but it also uses Tabs and so the layout has a lot of borders that make the whole stuff look a bit... restless.
So I want to hide the border of the CollapsiblePanels without having to mess with the theme (the tool uses a theme manager and the user can switch between some of the custom themes) so I need to hide the borders in general.

How can I do that?

Kind regards,
Gabriele

[George]

Hello Gabriele,

Thank you for writing.

You can hide the border by setting the Visibility of the BorderPrimitive of the controls container to Collapsed​:

collapsiblePanel.ControlsContainer.PanelElement.Border.Visibility = ElementVisibility.Collapsed;

Let me know, should you have further questions.

Regards,
George
Telerik

 

 

[Tim]

For some reason using your code still show the border in my application.

I did this and the border is now hidden.

cpnlLessUsedFields.ControlsContainer.PanelContainer.BorderStyle = BorderStyle.None;
cpnlLessUsedFields.ControlsContainer.PanelElement.Border.Visibility = ElementVisibility.Collapsed;

[George]

Hello Tim,

Thank you for your reply.

By default the BorderStyle of the PanelContainer is set to None, so if you have changed it, then setting it back to None in combination with the Visibility of the Border is correct.

Do not hesitate to let me know, should you have any other questions.

Regards,
George
Telerik

 

 

[Martin]

Where can i set it in the "Visual Style Builder"?

I cant change the border of the CollapsiblePanelLayoutElement.

[Dess | Tech Support Engineer, Principal]

Hello, Martin,

Note that CollapsiblePanelControlsContainer is a derivative of RadScrollablePanel.

It inherits the theme of the RadScrollablePanel. Hence, if you need to manipulate the border of the CollapsiblePanelControlsContainer, feel free to customize the border for RadScrollablePanel in Visual Style Builder:

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Martin]

Thank you Dess, that was the missing information ;-)

Now i have the wanted behavior.

When the expand-animation starts the bottom is shown during it opened, but i think there is no solution.

[Dess | Tech Support Engineer, Principal]

Hello, Martin,

I am glad that the provided information was helpful.

As to the animation, I am not sure whether I understand your requirement correctly. However, if you need to disable the animation and show the whole content at once, you need to set the RadCollapsiblePanel.EnableAnimation property to false via code. This property is not available in Visual Style Builder. 

    this.radCollapsiblePanel1.EnableAnimation = false;

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Martin]

Hi Dess,

 

sorry you misunderstand me! :-)

I mean at runtime when the animation starts the header-bottom-border is shown during the animation and disappears only when the panel is expanded.

[Dess | Tech Support Engineer, Principal]

Hello, Martin,

I am really sorry for the misunderstanding. The provided clarification is greatly appreciated. However, I am not sure what exactly you mean with header-bottom-border. This is actually the border of the container which is collapsed in this state:

When you expand RadCollapsiblePanel, it gets stretched vertically and the border moves to the bottom of the container.

I have attached my sample project with a RadCollapsiblePanel using the default theme. Could you please specify the exact steps how to reproduce the problem? 

Alternatively, you can submit a support ticket from your Telerik account and modify the project in a way which demonstrates the missing border in expanded state. Thus, we would be able to investigate the precise case and assist you further. Thank you in advance.

I am looking forward to your reply.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Martin]

Thank you for your reply.

Your Header-Element need a border! And from this the bottom-border is show only in collapsed-state.

That is how i defined it in my theme.

And when the animation (expand) starts this border is hide when the animation finished, so you see 2 bottom-borders during the animation.

I hope now it´s clear! ;-)

[Dess | Tech Support Engineer, Principal]

Hello, Martin,

I have updated my sample project to show a border for the header element as follows: 

            this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.DrawBorder = true;
            this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderBoxStyle = BorderBoxStyle.SingleBorder;
            this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderColor = Color.Red;
            this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderGradientStyle = GradientStyles.Solid;

However, the border is displayed properly when collapsing/expanding the panel. Please refer to the attached gif file. Am I missing something? Do I need to perform any changes to the project in order to replicate the double or missing border?

Would it be possible for you to submit a support ticket from your account and provide a sample project demonstrating the undesired behavior? So I can investigate the precise case. Thank you in advance. 

I am looking forward to your reply.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Martin]

Hi Dess,

sorry but we our license not include dedicated support.

I made a gif to show the problem!

There is no space between the Header and the PanelElement. And the Header has no bottom-border in the "expand"-state.

[Dess | Tech Support Engineer, Principal]

Hello, Martin,
 
According to the provided gif file, the bottom border of the container stays for a few milliseconds during the expand animation before the complete expanded state is achieved. However, I am still unable to observe the same behavior on my end. Please refer to the attached sample project and give it a try? Is the problem reproducible in it on your end? What changes as code do I need to perform in order to replicate the undesired border? What is the theme that is applied to RadCollapsiblePanel in your gif file?

If you need to display/hide bottom border of the header element in RadCollapsiblePanel, not the container that hosts the inner control, feel free to manipulate the CollapsiblePanelElement.HeaderElement's border properties as it was previously demonstrated in my previous code snippet.

Off topic, if you don't have a license, I would recommend you to download a trial license which will enable 30 days support package. Thus, you will be able to test the support service that we offer and decide whether this controls suite would be appropriate for achieving your results and buy a license.

 

I am looking forward to your reply.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Martin]

When you edit the load-form to the following snippet you will see my problem.

Use the tssp-File i send you in the ticket 1443243.

ThemeResolutionService.LoadPackageFile(@"ESN_Theme.tssp");
ThemeResolutionService.ApplicationThemeName = "ESN_Theme";
InitializeComponent();
/*
this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.DrawBorder = true;
this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderBoxStyle = BorderBoxStyle.SingleBorder;
this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderColor = Color.Red;
this.radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.BorderGradientStyle = GradientStyles.Solid;
*/

[Dess | Tech Support Engineer, Principal]

Hello, Martin,

Thank you for providing the theme. 

Now, I was able to observe the bottom border while the panel is expanding. I have noticed that for the CollapsiblePanelHeaderElement you set the bottom border to transparent with width 0 when the control is expanded. When it is collapsed there is 1px blue bottom border. Note that the element state is changed at the end of the expand/collapse operation. While an animation is ongoing you will see the applied style for the previous state. The attached gif file illustrates better what I mean.

Actually, the observed visible bottom border while the expand animation is ongoing as due to the enabled animation and the delay of the state applying.

The possible solution that I can suggest is to disable the animation by setting the RadCollapsiblePanel.EnableAnimation property to false.

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Martin]

I feared it. Ok thanks.

Maybe i find another solution! ;-)