Bunifu Shadow Panel

Better panel displays with smooth, elegant shadow effects to use when organizing controls in your UI designs

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

Let's take a deep dive and get insights into the available properties on Bunifu Shadow Panel.

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.

This property only works when the FillStyle property is set to Gradient

`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:

Enumeration

Description

Vertical

Gradient colors are rendered in a top-down direction on the panel.

Horizontal

Gradient colors are rendered in a left-right direction on the panel.

ForwardDiagonal

Gradient colors are rendered from the top-left side of the panel to its bottom-right side.

BackwardDiagonal

Gradient colors are rendered from the top-right side of the panel to its bottom-left side.

This property is applicable only if the FillStyle property is set to Gradient and the PanelColor1 and PanelColor2 properties contain two distinct colors.

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.