SideButton

A retractable animated button that can be used to expand or collapse other panels.

The side button is a useful control that is also quite common in modern web applications. It adds a small button elastic button to a container. It can be docked to the left or the right and expand in the opposite direction (similar to the GMail options vertical bar).

wisej-extensions/Wisej.Web.Ext.SideButton at 3.5 · iceteagroup/wisej-extensionsGitHub

SideButton Source Code

Code Example

public partial class Page1 : Page
{
    public SideButton sideButton1;
    public Panel panel1;
    public Page1()
    {
        InitializeComponent();

        sideButton1 = new SideButton();
        sideButton1.Size = new System.Drawing.Size(40, 40);
        sideButton1.BackColor = System.Drawing.Color.White;

        panel1 = new Panel();
        panel1.BackColor = System.Drawing.Color.Blue;
        panel1.Controls.Add(sideButton1);
        panel1.Dock = Wisej.Web.DockStyle.Right;
        panel1.Size = new System.Drawing.Size(150, 400);
        this.Controls.Add(panel1);

        sideButton1.Click += new System.EventHandler(sideButton1_Click);
    }
        private void sideButton1_Click(object sender, EventArgs e)
    {
        var collapsed = !sideButton1.Collapsed;
        sideButton1.Collapsed = collapsed;
        panel1.Width = collapsed ? 50 : 150;
    }
}

This code snippet creates a SideButton and a Panel. The SideButton is a child of the Panel. The Click Event of the SideButton is attached to and the Collapsed property of the sidebutton is toggled when clicked. Note that this line of code: panel1.Width = collapsed ? 50 : 150; changes the width of the panel based on the collapsed property of the SideButton. See below for what happens when the SideButton is clicked.

How to Use

The SideButton extension can be added to a Wisej.NET project using NuGet Package Manager.

Wisej-3-SideButton 3.5.35nuget

It has a collapsed property that is used in the NavigationBar sample to show/hide a FlexLayoutPanel. This FlexLayout can contain any kind of elements, in this sample it just hosts 2 picture boxes. We also dropped 2 animation extenders on the page so we are able to define sliding effects when the panel is shown/hidden: