Stretching an Item in ToolBarAdv

[Jun]

Hello,
I'd like to stretch an item in syncfusion WPF ToolBarAdv control.
I searched and found following post.
https://www.syncfusion.com/forums/47041/stretch-a-bar-item
It's likely the same I want to achieve.(but WPF)
But the sample is no longer available.
So I want to ask again.

Thank you.

Edit:
If possible, I'd like to set MinWidth to the item stretched so that items can overflow when ToolBar is shrinked smaller than the item can be.
Thank you.

[Vijayalakshmi Roopkumar]

Hi Jun 

 

Thank you for contacting Syncfusion Support 

 

Query : I'd like to stretch an item in syncfusion WPF ToolBarAdv control. 

 

We could understand that you want to stretch the ToolBarItem to the available size of WPF ToolBarAdv control, it can be achievable using HorizontalAlignment property of ToolBarAdv.  If does not meet your requirement,  please brief about it by providing screenshot , so that we can analyze and provide you the solution accordingly. 

 

Query :If possible, I'd like to set MinWidth to the item stretched so that items can overflow when ToolBar is shrinked smaller than the item can be. 

 

The Overflow items will be visible when theToolbar size is small.  

 

Please refer the below link: 

https://help.syncfusion.com/wpf/toolbar/dealing-with-toolbaradv-control#toolbaradv-with-overflow-items 

 

If our understanding on your requirement is different, please provide us the requested details such as screenshot or video, it would be helpful for us to provide you the accurate solution on this. 

 

Regards, 

Vijayalakshmi VR 

[Jun]

Hello,

Thank you for your reply.
But I'm sorry, it's not the answer I want.

I tried HorizontalAlignment, but it does not work.
I think it probably set position of the ToolBarAdv itself relative to its parent control(not items in it).
I also tried HorizontalContentAlignment, but not work.

(HorizontalAlignment and HorizontalContentAlignment property does not seem to be ToolBarAdv's peoprty.
It's FrameworkElement's property or Control's property it inherit from.)

What I want to achieve is same as the post below.
https://www.syncfusion.com/forums/47041/stretch-a-bar-item

I have a few items in ToolBarAdv, (for example, a button and a combobox.)
I want one of the item(combobox) to strech(fill) the remaining space.
(But the button width is fixed. not stretch.)

And, if possible, I don't want the combobox's width to be smaller than MinWidth when ToolBarAdv size is quite small, so some of the items overflow.

If it does not make sense, please don't hesitate to ask.

Thank you.

Edit:

I want to create a control like browser navigation bar(Chrome, Firefox, etc). Its url textbox grow and shrink according to its window size.

Edit:

I had tried to set HorizontalAlignment of inner combobox(ComboBoxAdv) to Stretch, but it was not worked.

Sorry that I didn't mention above.

[Jun]

I attached screenshot and sample (not working).

Attachment: ToolBarAdvStretchItem_b52dbf91.zip

[Vijayalakshmi Roopkumar]

Hi Jun, 

 

We have checked the reported behavior with ToolBarAdv and we could understood that you want to stretch one of the item in ToolBarAdv alone , but other items to be maintained with the same fixed size. Currently we are looking for the possibility to meet this requirement and we provide you the complete details by 14th Sep, 2020 

 

Please let us know if you have any other concerns. 

 

Regards, 

Vijayalakshmi VR 

[Vijayalakshmi Roopkumar]

Hi Jun 

Thank you for your patience. 

We could understood that you want to maintain some width while resizing the toolbar and the combobox size should be change according to the text selected.  If this your requirement, you need to manually maintain the width of ComboBoxAdv . This can be handled by using the Sizechanged event of ToolBarAdv.  

 

Code: 

 

 

// Handling the size of toolbarItems 

private void toolbaradv_SizeChanged(object sender, SizeChangedEventArgs e) 

{ 

double toolbarwidth; 

toolbarwidth = this.Width; 

double customizingwidth; 

customizingwidth = toolbarwidth - 2 * 100 - 40; 

if (customizingwidth > 0) 

{ 

 

comboboxadv.Width = toolbarwidth - 2 * 100 - 40; 

} 

} 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/157709/ze/ToolBarsize411990528 

 

Video : https://www.syncfusion.com/downloads/support/forum/157709/ze/ToolBarsize411990528 

 

 

Note: In ToolBarAdv, there is no direct support to achieve the above requirement. It can only be done by handling the SizeChanged event. 

 

Please try this solution and let us know if it meets your requirement.  

 

Regards, 

Vijayalakshmi VR 

 

[Jun]

Hello,

Thank you for your reply and code sample.

Probably the link for Sample is mistaken. It's the same as Video's.

But your code sample was very helpful for me.
So I finally achieved exactly what I want.
Thank you so much!

For your reference, the complete code looks like this.

Edit:
I found a bug in my code below, so fixed it.

---
using Syncfusion.Windows.Tools.Controls;
using System;
using System.Windows;
using System.Windows.Controls;

public class ToolBarAdvEx : ToolBarAdv
{
    public ToolBarAdvEx() : base()
    {
        LayoutUpdated += ToolBarAdvEx_LayoutUpdated;
        SizeChanged += ToolBarAdvEx_SizeChanged;
    }

    const double ToolBarHandlerWidth = 9 + 13;
    double ControlsWidth = 0;
    ComboBox ComboBox = null;
    private void ToolBarAdvEx_LayoutUpdated(object sender, EventArgs e)
    {
        if (!IsVisible || ControlsWidth > 0)
            return;
        bool beforeComboBox = true;
        foreach (Control c in Items)
        {
            if (c is ComboBox combo)
            {
                ComboBox = combo;
                SetOverflowMode(c, Syncfusion.Windows.Tools.Controls.OverflowMode.Never);
                beforeComboBox = false;
            }
            else
            {
                ControlsWidth += c.ActualWidth + c.Margin.Left + c.Margin.Right;
                c.Width = c.ActualWidth;
                if (beforeComboBox)
                    SetOverflowMode(c, Syncfusion.Windows.Tools.Controls.OverflowMode.Never);
            }
        }
        ToolBarAdvEx_SizeChanged(this, null);
    }

    private void ToolBarAdvEx_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (ComboBox == null)
            return;
        double toolbarwidth = (e == null ? ActualWidth : e.NewSize.Width);
        double customizingwidth = toolbarwidth - ControlsWidth - ToolBarHandlerWidth;
        customizingwidth = Math.Max(ComboBox.MinWidth, customizingwidth);
        ComboBox.Width = customizingwidth;
    }
}

[Vijayalakshmi Roopkumar]

Hi Jun, 

 

Thank you for your update. 

 

We are glad that our solution has helped to meet your requirement.  However, please find the sample from attachment for reference, that we have missed in our last update. 

 

Sample : https://www.syncfusion.com/downloads/support/forum/157709/ze/ToolBarAdvStretchModifiedItem-103676185 

 

Please let us know if you need any further assistance. 

 

Regards, 

Vijayalakshmi VR