RadCollapsiblePanel - Header

[Robert]

Hi,

I am hoping someone can help me. I am trying to implement a collapsible panel. I have done so far is set the HorizontalHeaderAlignment to the right. I have added header text and an image. I then set the horizontal stretch property to true. So, at this point I have almost achieved my goal. What I would like, is to have image and header text left justified. I can't seem to find any other properties that will help me do this. Is this doable? I have included a screenshot of what I have been able to do so far. Thanks.

[Dimitar]

Hello Robert,

Thank you for writing.

To achieve the desired alignment you should set the text element properties as follows: 

radCollapsiblePanel1.HorizontalHeaderAlignment = Telerik.WinControls.UI.RadHorizontalAlignment.Right;
radCollapsiblePanel1.ShowHeaderLine = false;
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.TextAlignment = ContentAlignment.MiddleLeft;
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.Image = Image.FromFile(@"C:\img\delete.png").GetThumbnailImage(20, 20, null, IntPtr.Zero);
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.ImageAlignment = ContentAlignment.MiddleLeft;
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.StretchHorizontally = true;
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderLineElement.StretchHorizontally = false;
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.ImageLayout = ImageLayout.None;
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.TextImageRelation = TextImageRelation.ImageBeforeText;

I hope this helps. Should you have any other questions do not hesitate to ask.

 

Regards,
Dimitar
Telerik

[Robert]

Hi,

Thank you for the quick response.

So I tried the example code you posted and it did quite do what I am looking for. And I think that is my fault. After reviewing my original post, I don't believe it conveyed what my goal was. So, my apologies. Ultimately, what I am trying to achieve is to have the image and text in the header left justified to the far left edge and the collapse button at the far right edge.

 So I played around with the various properties and achieved what I wanted. But I had to do some really funky stuff to get there. Basically, I reversed all the settings and somehow it worked.

Please see below for a code sample. Please note, I have taken your example from above and modified it to show you what I did. I have marked new lines or changes with a comment. As you can see it is a roundabout way to achieve my goal. I would prefer to use your method...if there was a way to justify the image and header text to the far left edge.

I have included a screenshot of my results. The top collapsible panel is what I was able to do with all my so-called reversed settings. The bottom panel is the result when implementing your code sample.

 

// update to Stretch
radCollapsiblePanel1.HorizontalHeaderAlignment = Telerik.WinControls.UI.RadHorizontalAlignment.Stretch;radCollapsiblePanel1.ShowHeaderLine = false;

// new line
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.RightToLeft = True;

// update to MiddleRight
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.TextAlignment = ContentAlignment.MiddleRight;radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.Image = Image.FromFile(@"C:\img\delete.png").GetThumbnailImage(20, 20, null, IntPtr.Zero);

// update to MiddleRight
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.ImageAlignment = ContentAlignment.MiddleRight;

radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.StretchHorizontally = true;

radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderLineElement.StretchHorizontally = false;

radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.ImageLayout = ImageLayout.None;

// update to TextBeforeImage
radCollapsiblePanel1.CollapsiblePanelElement.HeaderElement.HeaderTextElement.TextImageRelation = TextImageRelation.TextBeforeImage;

[Dimitar]

Hello Robert,

Thank you for writing back.

In this cases setting the RightToLeft property reverses the layout elements alignment and this is why you had to reverse all properties values in order to achieve the desired layout. Nevertheless do not hesitate to contact us if you have other questions.

Regards,
Dimitar
Telerik