Auto size a BindingNavigator when contents grow

[YF]

I want to keep the BindingNavigator centered, so I placed it inside a TableLayoutPanel without any docking or anchor, the column is set to auto size.

When the items in the BindingNavigator grow, mainly when the CommandBarLabel's value gets updated, the last button gets hidden from the screen.

How can I make the navigator itself to grow and shrink with its items?

I am on 2022 R3.

[Hristo]

Hi YF,

The RadBindingNavigator control is intended to be used docked to the Top of the form to which it has been added. As you have set the Dock property to None and also there are no anchors, it will be necessary to manually update the control's size. 

Basically, it's necessary to adjust the size of the control depending on the change of the size of the element holding the text label. As the UI is updated asynchronously we are performing the calculations with a delayed execution:

public partial class Form1 : Telerik.WinControls.UI.RadForm
{
    private List<MyClass> list = new List<MyClass>();

    private int textLength = 0;

    public Form1()
    {
        InitializeComponent();

        for (int i = 0; i < 99; i++)
        {
            list.Add(new MyClass() { Id = i });
        }

        this.bindingSource1.DataSource = list;
        this.radBindingNavigator1.BindingSource = this.bindingSource1;

        this.radBindingNavigator1.BindingNavigatorElement.PageLabel.TextChanged += PageLabel_TextChanged;
    }

    protected override void OnShown(EventArgs e)
    {
        base.OnShown(e);

        this.textLength = this.radBindingNavigator1.BindingNavigatorElement.PageLabel.BoundingRectangle.Width;
    }

    private void PageLabel_TextChanged(object? sender, EventArgs e)
    {
        System.Windows.Forms.Timer timer = new System.Windows.Forms.Timer();
        timer.Interval = 10;
        timer.Tick += (t, args) =>
        {
            timer.Stop();
            int newLength = this.radBindingNavigator1.BindingNavigatorElement.PageLabel.BoundingRectangle.Width;
            this.radBindingNavigator1.Width += (newLength - this.textLength);
            this.textLength = newLength;
        };

        timer.Start();            
    }
}

public class MyClass
{
    public int Id { get; set; }
}

I am also attaching a short gif file demonstrating the result on my end:

Please test carefully the suggested solution as it is only a sample approach and may not handle all possible scenarios.

I hope this will help. Let me know if you have other questions.

Regards,
Hristo
Progress Telerik

[YF]

Thanks Hristo, handling it in a simple TextChanging event worked for me, I was just checking if there's no way to auto size could handle it automatically.

Based on your suggestion I tried to dock the navigator and use alignment & stretch settings on the CommandBarRow and CommandBarStrip to have them centered. In the designer it looks like it's working. But when I run it, it aligns to the left.

// 
// radBindingNavigator1
// 
this.radBindingNavigator1.Dock = System.Windows.Forms.DockStyle.Bottom;
this.radBindingNavigator1.Location = new System.Drawing.Point(0, 98);
this.radBindingNavigator1.Name = "radBindingNavigator1";
this.radBindingNavigator1.Rows.AddRange(new Telerik.WinControls.UI.CommandBarRowElement[] {
this.commandBarRowElement1});
this.radBindingNavigator1.Size = new System.Drawing.Size(865, 48);
this.radBindingNavigator1.TabIndex = 1;
this.radBindingNavigator1.ThemeName = "MaterialBlueGrey";
// 
// commandBarRowElement1
// 
this.commandBarRowElement1.Alignment = System.Drawing.ContentAlignment.TopCenter;
this.commandBarRowElement1.AutoSize = true;
this.commandBarRowElement1.AutoSizeMode = Telerik.WinControls.RadAutoSizeMode.WrapAroundChildren;
this.commandBarRowElement1.CommandRole = Telerik.WinControls.UI.RadCommandBarRole.RowElement;
this.commandBarRowElement1.MinSize = new System.Drawing.Size(25, 25);
this.commandBarRowElement1.Name = "commandBarRowElement1";
this.commandBarRowElement1.Strips.AddRange(new Telerik.WinControls.UI.CommandBarStripElement[] {
this.commandBarStripElement1});
// 
// commandBarStripElement1
// 
this.commandBarStripElement1.Alignment = System.Drawing.ContentAlignment.TopCenter;
this.commandBarStripElement1.CommandRole = Telerik.WinControls.UI.RadCommandBarRole.FirstStrip;
this.commandBarStripElement1.DisplayName = "commandBarStripElement1";
this.commandBarStripElement1.EnableDragging = false;
// 
// 
// 
this.commandBarStripElement1.Grip.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
this.commandBarStripElement1.Items.AddRange(new Telerik.WinControls.UI.RadCommandBarBaseItem[] {
this.commandBarButton1,
this.commandBarSeparator1,
this.commandBarButton2,
this.commandBarSeparator2,
this.commandBarTextBox1,
this.commandBarLabel1,
this.commandBarSeparator3,
this.commandBarButton3,
this.commandBarSeparator4,
this.commandBarButton4});
this.commandBarStripElement1.MinSize = new System.Drawing.Size(0, 0);
// 
// 
// 
this.commandBarStripElement1.OverflowButton.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
this.commandBarStripElement1.StretchHorizontally = false;
this.commandBarStripElement1.StretchVertically = true;
// 

Designer:

Actual:

[Hristo]

Hi YF, 

The RadBindingNavigator is designed to be docked and this way to occupy the available space. The inner elelents of the control are left aligned. If you want it centered and to grow and shrink its size its necessary to use an approach similar to the one alraedy discussed.

Regards,

Hristo