How to customize a Flow Layout Panel with Bunifu's beautiful Scroll Bars - Bunifu Framework | Empowering software developers craft great user experiences in less time. Productivity tools for C# & VB.NET UX/UI design

How to customize a Flow Layout Panel with Bunifu’s beautiful Scroll Bars

The ultimate guide to creating a beautiful booking dashboard
April 21, 2018
Adding items to drop down from a database
How to add items to dropdown from database or any other datasource
May 24, 2018
Show all

How to customize a Flow Layout Panel with Bunifu’s beautiful Scroll Bars

flat vertical and horizontal scroll bars

If you’re like me, wishing to just get rid of those standard Windows Forms Scroll Bars which really never seem to get away from some (or most) controls, then here’s a big one for you… It’s actually possible to hide the Scroll Bars and replace them with Bunifu’s Scroll Bars, both the horizontal and the vertical scrolls.

Here’s a short and quick tutorial on this:

  • Launch Visual Studio and create a new C# or VB.NET WinForms Project.
  • Once the project has been created, copy and paste the Bunifu.UI.WinForms.BunifuScrollBar.dll control to Visual Studio’s ToolBox; here, I’ve pasted the control’s DLL inside the General tab:

  • Then, go to the Toolbox and select the FlowLayoutPanel control then drag it inside your Form; you can make it leave some space for the Bunifu Vertical ScrollBar to fit right beside it:

  • Now add some controls (or one control multiple times) inside the FlowLayoutPanel until some of the controls disappear or cannot be seen. You can do this by simply adding, say a Button control, then copy-pasting it multiple times until you achieve an overflow of controls inside the FlowLayoutPanel. Here’s a preview of what this would look like:

  • Finally, add a Bunifu Vertical ScrollBar to your Form right beside the FlowLayoutPanel control:

  • Now let’s get to writing some code… Select the Form and go to the Properties Tab, then select the Lightning icon  to view the list of available events. You can then navigate to the Shown event and double-click on it to create the Form’s shown event. After the event is created, the Form’s code-window will be opened. Write the code below:

[C#]

[VB.NET]

  • After that, go back to the Form’s design window and double-click on the Bunifu Vertical ScrollBar you added to create the Scroll event; now add the following code:

[C#]

[VB.NET]

Once that is set and done, run your Project, and move the scroll’s thumb downwards. You can also resize the Form’s height have a better feel of the FlowLayoutPanel’s movements.

That’s it! Plus don’t forget that you can also customize the Bunifu Vertical ScrollBar to look something like this:

The above design has been achieved through changing the ScrollBarColor, ScrollBarBorderColor, and the ThumbColor properties.

You can likewise try integrating the scroll bar with a Panel as essentially nothing changes. There’s quite a lot you can come up with if you think of all the design use-cases that can be improved.

Have fun as more features come your way with Bunifu’s Vertical and Horizontal ScrollBar.

Wilfred Kimura
Wilfred Kimura
Software developer, UX/UI enthusiast.

1 Comment

  1. Andreas Kraeuchi says:

    Nice but its not working for me.
    I use a Panel and I need to set AutoScoll = True but then the old Scrollbar does also appear…
    How can we fix this?

    Andy

Leave a Reply

Your email address will not be published. Required fields are marked *