Move Strip element to new row on resize

[Mark]

I am using the RadCommandBar, and for the strip elements I have the overflow visibility set to collapse, as I don't want the user to turn the command items off or hide them.  When I resize, the Controls in the strip elements disappear and only a reduced-sized footprint of the right-most strip elements appear (see attached),  with no ability to select the control contained within.

I think the best solution would be to automatically move these to a new row in the CommandBar as the size of the form is reduced, then move them back to the top row as form is expanded again.  I assume I could do this in the form.resize event, checking the width of command bar, but i'm not sure all the nested properties I would need to manipulate to accomplish this.

Please let me know how to accomplish this, or if there is a setting I am missing that might achieve my described desired result.  Basically, I'm looking for a solution that prevents the user from hiding the buttons or strip elements, but still provide access to the buttons when the form is resized.

Thanks

[Dess | Tech Support Engineer, Principal]

Hello, Mark,  

Indeed, when you shrink RadCommandBar, the elements which don't fit the available size got hidden. Usually, they appear in the oveflow drop down indicating that they exist but there is not enough space to be shown completely. 

Note that each CommandBarStripElement offers the ItemOverflowed event which is fired when an item is moved to the overflow panel. Then, you can implement any custom logic for inserting a new CommandBarRowElement for example and adding the overflown CommandBarStripElement there in order to keep it visible. There is no automatic mechanism for that but you can implement it via code. You can insert a new CommandBarRowElement when all items get overflown in a certain strip element or move the strip element back to its original row once the RadCommandBar is resized to a width that the strip fits the original location. Note that it is important to specify the DesiredLocation of the CommandBarStripElement in order to be properly positioned. The DesiredLocation coordinates shouldn't exceed the bounding rectangle of RadCommandBar.

You can find below a sample approach which demonstrates how to move the strip to a new row. Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirements best:

public RadForm1()
{
    InitializeComponent();

    this.commandBarStripElement3.ItemOverflowed += commandBarStripElement3_ItemOverflowed;
}

private void commandBarStripElement3_ItemOverflowed(object sender, EventArgs e)
{
    if (this.commandBarStripElement3.Items.Count == 0)
    {
        CommandBarRowElement row1 = new CommandBarRowElement();
        this.commandBarStripElement3.DesiredLocation = new PointF(0, 0);
        row1.Strips.Add(this.commandBarStripElement3);
        this.radCommandBar1.Rows.Add(row1);
    }
}

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