This is a migrated thread and some comments may be shown as answers.

Multiple SplitPanel Collapse button

9 Answers 128 Views
SplitContainer
This is a migrated thread and some comments may be shown as answers.
Dinda
Top achievements
Rank 1
Dinda asked on 22 Nov 2016, 09:45 AM

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)

 

9 Answers, 1 is accepted

Sort by
0
Accepted
Hristo
Telerik team
answered on 23 Nov 2016, 01:48 PM
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
Telerik UI for WinForms is ready for Visual Studio 2017 RC! Learn more.
0
Dinda
Top achievements
Rank 1
answered on 24 Nov 2016, 04:24 AM

Hi Hristo,

Thank you for your detailed answer. It works!!

0
Rohit
Top achievements
Rank 1
answered on 05 Jan 2018, 09:08 AM

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.

0
Hristo
Telerik team
answered on 05 Jan 2018, 09:51 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rohit
Top achievements
Rank 1
answered on 08 Jan 2018, 07:33 AM
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.
0
Hristo
Telerik team
answered on 08 Jan 2018, 11:43 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Rohit
Top achievements
Rank 1
answered on 13 Jan 2018, 08:57 AM

Hi Hristo

Thanks for your code. It worked perfectly.

0
Rohit
Top achievements
Rank 1
answered on 31 Jan 2018, 09:22 AM

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.

 

0
Hristo
Telerik team
answered on 31 Jan 2018, 11:58 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
SplitContainer
Asked by
Dinda
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Dinda
Top achievements
Rank 1
Rohit
Top achievements
Rank 1
Share this question
or