Change SplitPanel collapse direction

[Rodrigo Cesar]

How can I change SplitPanel collapse direction.
Using RadSplitContainer with 2 panels I need panel 2 collapsable to down, not up, hidding panel 1!

[Hristo]

Hi Rodrigo,

Thank you for writing.

The SplitterElement class defines buttons responsible for collapsing and expanding the SplitPanel element. In your case we need to override the default behavior of the buttons in the SplitterElement. We can achieve that by subscribing to PropertyChanged and PanelCollapsing events. Please see the code snippet below:

public Form1()
{
    InitializeComponent();

    this.Load += Form1_Load;
    this.radSplitContainer.PanelCollapsing += radSplitContainer_PanelCollapsing;

    this.radSplitContainer.EnableCollapsing = true;
    this.radSplitContainer.UseSplitterButtons = true;
}

private void Form1_Load(object sender, EventArgs e)
{
    var splitter = this.radSplitContainer.Splitters.First();

    splitter.NextNavigationButton.PropertyChanged += NextNavigationButton_PropertyChanged;
    splitter.NextNavigationButton.Visibility = ElementVisibility.Collapsed;

    splitter.PrevNavigationButton.PropertyChanged += NextNavigationButton_PropertyChanged;
    splitter.PrevNavigationButton.Visibility = ElementVisibility.Visible;
}

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

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

    }

    if (e.PropertyName == "Visibility" && btn.Visibility == ElementVisibility.Visible && btn.Class == "NextUpSplitterThumb")
    {
        btn.Visibility = ElementVisibility.Collapsed;
    }
}

private void radSplitContainer_PanelCollapsing(object sender, Telerik.WinControls.UI.RadSplitContainer.PanelCollapsingEventArgs e)
{
    var splitter = this.radSplitContainer.Splitters.First();
    splitter.PrevNavigationButton.AngleTransform = 180f;
}

I hope that this information will help. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Telerik

 

 

[Rodrigo Cesar]

It works!
Thanks a lot!

[Daniel]

And how can i change it if collapse direction are horizontal?.
I tried this code up/down and it worked, but it doesn't left/right.

Thanks for help.

[Hristo]

Hi Daniel,

Thank you for writing back.

You could use the approach as suggested in my previous answer, where we had reversed the direction of vertically stacked panels. Now we can follow the same logic and perform slight modifications when hiding the buttons:

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

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

        this.Load += Form1_Load;
        this.radSplitContainer1.PanelCollapsing += radSplitContainer1_PanelCollapsing;
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        SplitterElement splitter = this.radSplitContainer1.Splitters.First();

        splitter.NextNavigationButton.PropertyChanged += NextNavigationButton_PropertyChanged;
        splitter.NextNavigationButton.Visibility = ElementVisibility.Visible;

        splitter.PrevNavigationButton.PropertyChanged += NextNavigationButton_PropertyChanged;
        splitter.PrevNavigationButton.Visibility = ElementVisibility.Collapsed;
    }

    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;
            }
        }

        if (e.PropertyName == "Visibility" && btn.Visibility == ElementVisibility.Visible && btn.Class == "PrevDownSplitterThumb")
        {
            btn.Visibility = ElementVisibility.Collapsed;
        }
    }

    void radSplitContainer1_PanelCollapsing(object sender, RadSplitContainer.PanelCollapsingEventArgs e)
    {
        SplitterElement splitter = this.radSplitContainer1.Splitters.First();
        splitter.NextNavigationButton.AngleTransform = 180f;
    }
}

I am also sending you gif file with 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

 

 

[Ras Ran]

hiii....i have a problem with SplitContainer  SplitPanel....my SplitContainer  containing three SplitPanels...i set each panel size mode to "Absolute"....i this case expand and collapse of a split panel is working perfectly....but when i am closing the rad form i kept Split panel absolute height and width to a xml....when i am reopening my rad form i set absolute height and width from xml....i this case expand and collapse of a split panel is not working properly....i there any way to solve this problem

Please check the attached gif image 

Regards 

Ras Ran

 

 

[Hristo]

Hi Ras Ran, 

The reported behavior does not appear to be related to the discussed in the thread scenario. From your message I understand that you are persisting the layout of the split container and upon recreating the form you are restoring it. If that is the case, please check if you are also setting the SizeMode property of the panels to be Absolute.  In case the issue persists and you would like us to investigate it, please open a support ticket and send us an example reproducing the behavior on your end.

I hope this will help. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik

[Ras Ran]

Hii Hristo, i hope u understand my question....iam setting the panel container size programmatically ...i just want to change the splitter button direction(if its expended or collapsed ) programmatically at the run time....who you please give a Sollution for this ? 

Iam using telerik 2015 version 

regards ,

Ranees

[Hristo]

Hi Ranees,

The approach discussed in the thread suggests a possible solution. Please note, however, that this is custom behavior which is not by design supported by the control. In this respect it may not cover all possible cases. If not already, please give it a try. If you are experiencing issues you can share a code snippet according to your local setup.

Regards,
Hristo
Progress Telerik

[Tiago]

Hi Hristo,

How can I have a minimum width on my SplitPanel and close it all the way when I click the collapse button?

I tried to set minimum width on PanelCollapsing event but with no success

[Dess | Tech Support Engineer, Principal]

Hello, Tiago, 

In order to enable the collapsing buttons, it is necessary to set the EnableCollapsing and the UseSplitterButtons property to true. As to the question about sizing the SplitPanel, it is suitable to use SplitPanelSizeMode.Absolute and specify the SplitPanel.SizeInfo.MinimumSize. However, this will prevent the panel from collapsing.

The possible solution in this case is to use the following approach which result is illustrated in the attached gif file:

        private void RadForm1_Load(object sender, EventArgs e)
        {
            this.radSplitContainer1.EnableCollapsing = true;
            this.radSplitContainer1.UseSplitterButtons = true;
            this.splitPanel1.SizeInfo.SizeMode = SplitPanelSizeMode.Absolute;
            this.splitPanel1.SizeInfo.AbsoluteSize= new Size(30, 0);

            this.radSplitContainer1.PanelCollapsing+=radSplitContainer1_PanelCollapsing;
              
        } 
        private void radSplitContainer1_PanelCollapsing(object sender, RadSplitContainer.PanelCollapsingEventArgs e)
        {
            this.radSplitContainer1.PanelCollapsing -= radSplitContainer1_PanelCollapsing;

            this.splitPanel1.SizeInfo.SizeMode = SplitPanelSizeMode.Auto;
            this.radSplitContainer1.MoveSplitter(this.radSplitContainer1.Splitters[0], RadDirection.Left);
            this.radSplitContainer1.MoveSplitter(this.radSplitContainer1.Splitters[0], RadDirection.Left);
            this.radSplitContainer1.PanelCollapsing += radSplitContainer1_PanelCollapsing;
        }

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Tiago]

Hi Dess, thanks for the response,

In example gif that you attached I want to collapse the red panel and when it's not collapse I want it to have a minimum width.

resetting the minimum size in _PanelCollapsing event *this.splitPanel1.SizeInfo.MinimumSize = new Size();* does the trick to collapse it, but setting again the minimum size inside _PropertyChanged event in the code that Hristo supplied breaks the collapse

[Dess | Tech Support Engineer, Principal]

Hello, Tiago, 

In order to collapse the red panel in a similar way and keep a minimum width for it, it is suitable to follow an identical approach: 

        private void RadForm1_Load(object sender, EventArgs e)
        {
            this.radSplitContainer1.EnableCollapsing = true;
            this.radSplitContainer1.UseSplitterButtons = true;
            this.splitPanel3.SizeInfo.SizeMode = SplitPanelSizeMode.Absolute;
            this.splitPanel3.SizeInfo.AbsoluteSize= new Size(30, 0);

            this.radSplitContainer1.PanelCollapsing+=radSplitContainer1_PanelCollapsing;
              
        } 
        private void radSplitContainer1_PanelCollapsing(object sender, RadSplitContainer.PanelCollapsingEventArgs e)
        {
            this.radSplitContainer1.PanelCollapsing -= radSplitContainer1_PanelCollapsing;

            this.splitPanel3.SizeInfo.SizeMode = SplitPanelSizeMode.Auto;
            this.radSplitContainer1.MoveSplitter(this.radSplitContainer1.Splitters[1], RadDirection.Right );
            this.radSplitContainer1.MoveSplitter(this.radSplitContainer1.Splitters[1], RadDirection.Right);
            this.radSplitContainer1.PanelCollapsing += radSplitContainer1_PanelCollapsing;
        }

The obtained result is illustrated in the gif file. Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify and extend it in a way which suits your requirements best. Additional information about sizing panels in RadSplitContainer is available here: 
https://docs.telerik.com/devtools/winforms/controls/splitcontainer/building-a-layout-of-radsplitcontainers-programmatically
https://docs.telerik.com/devtools/winforms/controls/splitcontainer/building-advanced-layouts

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Tiago]

Hi Dess,
I can't get it to work with you code :/ 

I made an empty project with the splitter container and the default settings and added you code, the panel wont collapse :/

 

[Dess | Tech Support Engineer, Principal]

Hello, Tiago, 

I have attached my sample project containing the white, green and red split panels which achieved result was illustrated in the gif file from my previous reply.  

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Tiago]

Hi Dess,

Your example works with 3 panels, but if you remove one it no longer works, also the AbsoluteSize does nothing for the minimum width  right? the user can still change its width below 30

[Dess | Tech Support Engineer, Principal]

Hello, Tiago,  

The SplitPanel.MinimumSize property is inherited from the base class RadControl. It is necessary to set the SplitPanel.SizeInfo.MinimumSize instead. Please refer to the attached gif file: 

            this.splitPanel3.SizeInfo.MinimumSize = new Size(30, 0);
            this.splitPanel3.SizeInfo.SizeMode = SplitPanelSizeMode.Absolute;
            this.splitPanel3.SizeInfo.AbsoluteSize = new Size(30, 0);

If you have only two SplitPanels, you will notice that the splitter direction is opposite compared to the case with three panels. Hence, you can collapse the yellow panel in this case:

That is why the layout is different in this case and the obtained behavior accordingly. Feel free to use three panels in case you want the right panel to be collapsed via the splitter considering the correct direction. You can always manage the middle panel's size in such a way that it would be invisible.

I believe that you find this information helpful for build your custom layout.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik