Multiple SplitPanel Collapse button

[Dinda]

I can change split panel collapse direction to left or right like this. But can I have both splitter buttons (left and right direction) on RadSplitContainer with only 2 SplitPanels?

I noticed that if the RadSplitContainer had more than 3 panels, the splitter button showed 2 buttons (left and right direction)

 

[Hristo]

Hi Dinda,

Thank you for writing.

The example in the mentioned other thread changes the direction. Since you need to have both of the splitter buttons visible you need to use the suggested approach for the hidden button. 

I have extended the example to handle a scenario with multiple panels. Please see below: 

public partial class RadForm1 : RadForm
{
    public RadForm1()
    {
        InitializeComponent();

        this.radSplitContainer1.EnableCollapsing = true;
        this.radSplitContainer1.UseSplitterButtons = true;

        this.radSplitContainer1.PanelCollapsing += radSplitContainer1_PanelCollapsing;
    }

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

        SplitterElement firstSplitter = this.radSplitContainer1.Splitters[0];
        firstSplitter.Tag = "First";
        firstSplitter.NextNavigationButton.PropertyChanged += NextNavigationButton_PropertyChanged;
        firstSplitter.NextNavigationButton.Visibility = ElementVisibility.Visible;

        SplitterElement lastSplitter = this.radSplitContainer1.Splitters[2];
        lastSplitter.Tag = "Last";
        lastSplitter.PrevNavigationButton.PropertyChanged += PrevNavigationButton_PropertyChanged;
        lastSplitter.PrevNavigationButton.Visibility = ElementVisibility.Visible;
    }

    private void PrevNavigationButton_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        RadButtonElement btn = sender as RadButtonElement;
        if (e.PropertyName == "Visibility" && btn.Class == "PrevDownSplitterThumb")
        {
            if (btn.Visibility == ElementVisibility.Collapsed)
            {

                btn.Visibility = ElementVisibility.Visible;
                btn.AngleTransform = 0f;
            }
        }
    }

    private void NextNavigationButton_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        RadButtonElement btn = sender as RadButtonElement;
        if (e.PropertyName == "Visibility" && btn.Class == "NextUpSplitterThumb")
        {
            if (btn.Visibility == ElementVisibility.Collapsed)
            {

                btn.Visibility = ElementVisibility.Visible;
                btn.AngleTransform = 0f;
            }
        }
    }

    private void radSplitContainer1_PanelCollapsing(object sender, RadSplitContainer.PanelCollapsingEventArgs e)
    {
        SplitterElement splitter = (SplitterElement)sender;
        if (splitter.Tag == null)
        {
            return;
        }

        if ((e.Direction == RadDirection.Right && splitter.Tag == "First"))
        {
            splitter.NextNavigationButton.AngleTransform = 180f;
        }

        if (e.Direction == RadDirection.Left && splitter.Tag == "Last")
        {
            splitter.PrevNavigationButton.AngleTransform = 180f;
        }
    }
}

I am also attaching a short video showing the result on my end.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik by Progress

[Dinda]

Hi Hristo,

Thank you for your detailed answer. It works!!

[Rohit]

The sample code above works if we have multiple splitters. I have only two splitpanels and one splitter between them. How can I add spliiter button for other direction.

Thanks.

[Hristo]

Hi Rohit,

Thank you for writing.

You can refer to the other thread discussing a scenario with a single splitter: https://www.telerik.com/forums/change-splitpanel-collapse-direction.

I hope this helps.

Regards,
Hristo
Progress Telerik

[Rohit]

With two splitpanels and one splitter, how can I have the expand/collapse button for both directions at the same time. The linked thread only changes the direction of the button but does not add a second button.

[Hristo]

Hello Rohit,

Thank you for writing back.

Since you are having a single splitter and you would like to display both of the collapse buttons, you can use a similar but simpler approach to the one already discussed in the thread: 

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

        this.radSplitContainer1.EnableCollapsing = true;
        this.radSplitContainer1.UseSplitterButtons = true;

        this.radSplitContainer1.PanelCollapsing += radSplitContainer1_PanelCollapsing;
    }

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

        SplitterElement firstSplitter = this.radSplitContainer1.Splitters[0];
        firstSplitter.NextNavigationButton.PropertyChanged += NextNavigationButton_PropertyChanged;
        firstSplitter.NextNavigationButton.Visibility = ElementVisibility.Visible;
    }

    private void NextNavigationButton_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        RadButtonElement btn = sender as RadButtonElement;
        if (e.PropertyName == "Visibility" && btn.Class == "NextUpSplitterThumb")
        {
            if (btn.Visibility == ElementVisibility.Collapsed)
            {

                btn.Visibility = ElementVisibility.Visible;
                btn.AngleTransform = 0f;
            }
        }
    }

    private void radSplitContainer1_PanelCollapsing(object sender, RadSplitContainer.PanelCollapsingEventArgs e)
    {
        SplitterElement splitter = (SplitterElement)sender;
        if (e.Direction == RadDirection.Right)
        {
            splitter.NextNavigationButton.AngleTransform = 180f;
        }
    }
}

The attached project also features a similar solution when the panels are oriented horizontally.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik

[Rohit]

Hi Hristo

Thanks for your code. It worked perfectly.

[Rohit]

Hi Hristo

I am currently working with RadDock and want to have the splitter with collapse functionality in both directions.

Since RadDock derives from RadSplitContainer the approach suggested in your answer works for RadDock too, but when I float any documentWindow and then re-dock it, the collapse button for other direction does not appear. How can I have the collapse button for both directions for Horizontal and Vertical splitters for RadDock. 

My application looks as shown in the attached image, with four documentWindow , all of which can float.

 

[Hristo]

Hello Rohit,

Please note that the required functionality is not directly supported and my previous answer discusses the RadSplitContainer control and it may not handle all possible scenarios. The properties related to the splitter buttons are inherited in RadDock from the split container indeed. The dock control, however, is not intended to be operated through this inherited API so the discussed approach is not applicable to it.

You can refer to our documentation discussing in details RadDock and in what scenarios it can be used: https://docs.telerik.com/devtools/winforms/dock/overview.

Let me know if you have other questions.

Regards,
Hristo
Progress Telerik