RadCollapsiblePanel - Header

4 posts, 1 answers
  1. Robert
    Robert avatar
    3 posts
    Member since:
    Jan 2014

    Posted 18 Jun 2015 Link to this post

    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.

  2. Dimitar
    Admin
    Dimitar avatar
    1404 posts

    Posted 19 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Robert
    Robert avatar
    3 posts
    Member since:
    Jan 2014

    Posted 19 Jun 2015 in reply to Dimitar Link to this post

    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;

  5. Answer
    Dimitar
    Admin
    Dimitar avatar
    1404 posts

    Posted 22 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top