How to integrate a BunifuVScrollBar with BunifuCustomDataGrid

“ Design is a solution to a problem. Art is a question to a problem.”~ John Maeda

In this article, I’ll demystify how you can replace a standard scrollbar with a BunifuVScrollBar in BunifuCustomDataGrid.

BUT First, let talk about you. I hope that if you’re reading this you have installed the latest version of Bunifu UI for WinForms in Visual Studio.

“I need to add a custom scroll vertical scrollbar in a BunifuDataGridView.”

I hear ya. You’re not alone. Do yourself a huge favour: Read this article, the documentation, and don’t try to force things. I will show you a very easy way to integrate and make it work.

How about a quick look at what we are going to achieve by the end of this article:

The UX design process:

• First, we set the width and height of our form to be 1075, 505 in the size property
• Then set the font property of the form to be Segoe UI, 12pt
• Drag a BunifuCustomDataGrid to the form

Customizing BunifuCustomDataGrid

• Set the AutoSizeColumnMode property to fill
• Have the EnableHeaderVisualStyle set to false
• Then set the GridColor property to be the ControlLight color
• Set the SelectionMode property to FullRowSelect
• The HeaderBgColor will have an R.G.B color of 103, 89, 122 and the HeaderForeColor to have a color of white
• Go ahead to the DefaultCellStyle property and click the three little dots when the property is on focus. Here are the following properties you’ll give unto it when the dialog appears:

• The next property to set is to set the Background color of BunifuCustomDataGrid to white
• Move on to CellBorderStyle property and set it to SingleHorizontal
• Then set the ScrollBars property to None

Customizing the column header cells of BunifuCustomDataGrid

• Set the ColumnHeadersBorderStyle to none
• Go ahead to the CellHeadersBorderStyle and click the three dots that appear when the property is on focus.
• Set the following properties on the dialog box that shows up:

• Click ok once done setting the properties then go ahead to the ColumnHeadersHeightSizeMode property and set it to enableRisizing
• Having enabled resizing we can set the ColumnHeadersHeightSize to a value “52”

Tweaking the rows:

• Click the three little dots of the AlternatingRowsDefaultCellStyle property when on focus and set the following properties:

• Click ok and go ahead to set RowHeadersVisible property to false.
• Next, click the little plus(+) icon on the property named RowTemplate and set the height property to 41

Using the BunifuVScrollBar with the DataGrid:

Drag the BunifuVScrollBar to the DataGrid and dock it to the right position of the DataGrid.

Let’s tweak the scrollbar: 😉

1. Set its BackColor, ScrollBarBorderColor, ScrollBarColor properties to have a Control color
2. Make the ThumbColor property to have a Silver color
3. Also, make sure that the ThumbStyle is set to Inset

Rendering data to BunifuCustomDataGrid

This implementation is done with the C# language but the language logic could just as easily be implemented as with the VB.NET language.

• Add a new class named Persons to your project and write the following get and set properties to it:
• Head to your design form and press F7 to view code.
• In your form’s constructor, we’ll make a list of the type Persons class and assign the list to the DataSource of BunifuCustomDataGrid.
• Here’s the code:

Here are the three basic logic for making the BunifuVScrollBar scroll through the data:

1. Get the total number of rows from BunifuCustomDataGrid and assign it to an int variable.
2. Use the int variable to set the Maximum property of BunifuVScrollBar.

3. Then we’ll use the Scroll event to capture the scrolling movements of BunifuVScrollBar

“So what other purposes shall we do with this Scroll event ?”

• We’ll get the values from the ScrollEventArgs object and assign it to an int variable.
• Then the value will be used to set a value to the property named FirstDisplayedScrollingRowIndex of BunifuCustomDataGrid.
• This will then perform the magic of scrolling up and down on runtime on the data displayed from the DataGrid.
• Here’s the scroll event code:

Take Away

You made it here! Thank you for taking the time to read this. I hope you learned something and that it has been an awesome tutorial for you. I really look forward to reading your comments.

Have a happy and cheerful coding 👊