setting border around titleBar

[ornus]

I encountered a problem using RadTitleBar with ShapedForm. When docked to the top it coveres window border... makes it look pretty ugly.

So, I found several ways to work around this problem, and as I couldn't find any documentation on how to solve it I thought I'd post what I found for people who encounter the same kind of problem.

Solution #1, simplest
Just make the border to be the same color as your title bar. This is very easy. It works ok, but if the window is on top of another window with similar colors it might be hard to actually see the edges of the window. Here's a sample of what it looks like: http://www.telerik.com/support/kb/article/b454K-ttk-b454T-ckd-b454c-ckd.aspx

Solution #2
simulate border around title bar using padding, background color and Shape

here's a code example:

public partial class Form1 : ShapedForm
{
    public Form1()
    {
        InitializeComponent();

        RoundRectShape shape = new RoundRectShape( 5 );
        shape.DeserializeProperties( "5, False, True, False, True" );

        this.Shape = shape;

        int borderSize = 1;
        RootRadElement titleRoot = this.radTitleBar1.RootElement;
        titleRoot.Padding = new Padding( borderSize, borderSize, 50, 0 );
        titleRoot.BackColor = Color.Black;

        RadElement rootChild = titleRoot.Children[0];
        rootChild.Margin = new Padding( 0, 0, borderSize, 0 );
        rootChild.Shape = shape;
    }
}

It sets shape for the current form, then shape for the title bar and uses padding to move title bar slightly and sets background color to show the color (black in this case).

Couple of things to note:

1. Setting right padding on the title root element has no effect (I have 50 and it acts like it's 0). To overcome that I set right padding on the 1st child of the title bar.
2. I use deserialize properties to set rounder corners only for top left/right corners. I "borrowed" the idea from the QSF source code. It's not documented anywhere it seems.... how many more hidden gems are there in rad framework?
3. If you want to use status bar... well, don't, it's hard to get it to work.
4. I tried padding the form instead of the title bar, but it didn't work as well.
5. Why does this have to be so hard? Why not just create a special ChromeForm class in addition to ShapedForm that would have title bar (or ribbon), with borders, with status bar, all taken care of? It feels too much like I'm hacking, just the way I hack with CSS...

Well, hope this is helpful.

[Mike]

Hello ornus,

Thank you very much for sharing your solution with the Telerik Community! Your help is much appreciated and we have updated your account with 1,500 Telerik points as a token of our appreciation.

As to your notes resolving those issues, they seem quite reasonable:

1. Even though the Padding property is introduced in RadElement, it is used by the Layout panel where the element is placed. There are also several other layout properties that control the layout behavior. In this particular case, the control does not calculate its size corresponding to root element's box layout settings.
    
2. The DeserializeProperties method is generally intended to be used by RadControls theme serializer and that's why it is not documented. On the other side the RoundRectShape just lacks public properties for setting those values. I will add those to our ToDo list for the next release. Thank you for noticing this.
    
3. We have plans for introducing a RadStatusStrip control that should resolve at least part of the related issues: http://www.telerik.com/community/forums/thread/b311D-mmcmd.aspx
    
4. I am not sure if I got this right, but I tried setting the padding of the Form and it worked fine. I posted a demo in this thread: http://www.telerik.com/community/forums/thread/b311D-mhedh.aspx
    
5. You are right that this should be easier and I will discuss with the team whether we should introduce such a form as a new control, or as a public resource (KB article or a Code Library project). Either way we understand the need for an easier solution and it is a matter of time until we introduce one.

Thank you again and keep it up! The comments in your post have been great!
 

All the best,
Mike
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[ornus]

Hey, thanks.

Padding didn't work because I used 1 points instead of 2 and so of the form got cut of (where they were rounded). What you did works much better than padding the title bar and it works with ribbon.

For anybody interested here's the code provided by Mike (slightly modified to have black border):

public Form1()
{
    InitializeComponent();

    this.BorderColor = Color.Black;
    this.BackColor = Color.FromArgb( 191, 219, 254 );

    this.Padding = new Padding( 2, 2, 2, 2 );
    this.Shape = new RoundRectShape( 5 );
}

You can specify all those properties in form designer properties window.