Bunifu Shadow Panel

Overview

Bunifu Shadow Panel, just like the standard Windows Forms Panel, is used to group a collection of controls, but more to that is its ability to customize and create a raised, sunken, surrounded, or forward-diagonal shadow effect. This is inspired by Material Design's Elevation principle which gives your panel designs a beautifully modern look and feel.

Here are some examples of what this looks like:

Getting Started

This section will guide you on using Bunifu Shadow Panel via the designer and code approach.

Adding Bunifu Shadow Panel at design time

Bunifu Separator can be added to a form at the designer level by locating or searching BunifuShadow in your toolbox and drag it to your form as shown below.

Adding Bunifu Shadow Panel at run time

To add Bunifu Shadow Panel at run time we will use the Load event handler of the form and render the shadow panel. Write the following code:

private void Form1_Load(object sender, EventArgs e)
{
    //instantiate Bunifu Shadow control using Bunifu.UI.WinForms
    BunifuShadowPanel bunifuShadowPanel = new BunifuShadowPanel();
    //set the  size for the control
    bunifuShadowPanel.Size = new Size(330, 195);
    //set the location for the control
    bunifuShadowPanel.Location = new Point(210, 120);
    //set the shadow color of the panel control'
    bunifuShadowPanel.ShadowColor = Color.DodgerBlue;
    //add the control to the form
    this.Controls.Add(bunifuShadowPanel);

}

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	'instantiate Bunifu Shadow control using Bunifu.UI.WinForms
	Dim bunifuShadowPanel As New BunifuShadowPanel()
	'set the  size for the control
	bunifuShadowPanel.Size = New Size(330, 195)
	'set the location for the control
	bunifuShadowPanel.Location = New Point(210, 120)
	'set the shadow color of the panel control'
	bunifuShadowPanel.ShadowColor = Color.DodgerBlue
	'add the control to the form
	Me.Controls.Add(bunifuShadowPanel)

End Sub

Border Properties

1. BorderColor

This property allows you to get or set a color value for the panel's border. It supports the use of RGB or HEX color values.

2. BorderRadius

This property lets you get or set the radius value (integer) for the panel's edges. The greater the value, the more rounded the border corners become.

3. BorderThickness

This property gets or sets the thickness value of the panel's border. The border becomes thicker as the value increases.

4. Style

This property allows you to get or set the bevel style (enumeration) of the panel's border. The style enumeration defines the following values: Lowered, Raised, and the Flat value, which is the default value.

Background Properties

1. PanelColor

This property allows you to get or set the color value for the panel's background. It supports the use of RGB and HEX color values. In a gradient setting, it allows you to get or set the first color value of the gradient mix.

2. PanelColor2

This property allows you to get or set the second color value for a gradient panel background.

3. FillStyle

This property allows you to get or set the fill mode (enumeration) for the panel's background. The fill mode enumeration defines the following values: Gradient and Solid being the default value.

4. GradientMode

This property allows you to get or set the gradient style (enumeration) for a gradient background. The gradient mode enumeration defines the following values:

Shadow Properties

1. ShadowColor

This property allows you to set a color value for the panel's shadow. It is compatible with both RGB and HEX color values.

2. ShadowDepth

This property allows you to set a depth value (integer) for the panel's shadow. The shadow spreads more on a form's surface as the value increases.

3. ShadowStyle

This property allows you to set a preset style (enumeration) for the panel's shadow. The shadow style enumeration defines the following: Surrounded, Dropped and ForwardDiagonal.

Methods

Remarks

We hope that you have gained insights into using Bunifu Shadow Panel and that it will help you create a better user experience for your users.

Should you have feedback or suggestions, please send them to us via chat on the bottom right corner of the screen.