Change SplitPanel collapse direction

5 posts, 0 answers
  1. Rodrigo Cesar
    Rodrigo Cesar avatar
    3 posts
    Member since:
    Oct 2014

    Posted 12 Dec 2014 Link to this post

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

    Posted 15 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Rodrigo Cesar
    Rodrigo Cesar avatar
    3 posts
    Member since:
    Oct 2014

    Posted 18 Dec 2014 Link to this post

    It works!
    Thanks a lot!
  5. Daniel
    Daniel avatar
    2 posts
    Member since:
    Jun 2010

    Posted 06 Feb 2015 Link to this post

    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.
  6. Hristo Merdjanov
    Admin
    Hristo Merdjanov avatar
    712 posts

    Posted 10 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WinForms is Visual Studio 2017 Ready