# 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](https://material.io/design/environment/elevation.html#elevation-in-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:

![Bunifu Shadow Panel designs.](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-M8tUpVbF7UE7SOOWSyK%2F-M8tYvso9GXfqIlCpnvW%2Fbunifu-shadow-panel-designs.png?alt=media\&token=d5f04697-b2e1-4bba-919d-69fd947c2ea8)

![Bunifu Shadow Panel designs with colors.](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-M8tUpVbF7UE7SOOWSyK%2F-M8tZz_9LnCHD2Et8ru9%2Fbunifu-shadow-panel-shadow-colors.png?alt=media\&token=a304f0d9-f98a-4f77-811f-4a8b93aafcfe)

## 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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mi0icoSsUmf6Ronymmy%2F-Mi1RKq51cG3bTRBFkvT%2Fsh01.gif?alt=media\&token=70feda59-4944-471c-b485-d3c079577be1)

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

{% tabs %}
{% tab title="C#" %}

```csharp
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);

}
```

{% endtab %}

{% tab title="VB.NET" %}

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

```

{% endtab %}
{% endtabs %}

{% hint style="success" %}
Let's take a deep dive and get insights into the available properties on Bunifu Shadow Panel.
{% endhint %}

## 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.

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mi1_fJ1BqIVHnHcVj6D%2F-Mi5cSAZqPMNCEDnh1rv%2Fsh05.gif?alt=media\&token=e03a8a70-38ca-4ce5-abec-a32857906ef2)

## 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. 

{% hint style="info" %}
This property only works when the **`FillStyle`** property is set to **Gradient**
{% endhint %}

### `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. |

{% hint style="info" %}
This property is applicable only if the `FillStyle` property is set to **Gradient** and the `PanelColor1` and `PanelColor2` properties contain two distinct colors.
{% endhint %}

![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mi1_fJ1BqIVHnHcVj6D%2F-Mi5jKq-X5_Nwlbds-JF%2Fsh07.gif?alt=media\&token=1d05cb80-0dc2-482b-bcaa-028929448693)

## 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

| Method      | Description                    |
| ----------- | ------------------------------ |
| `Refresh()` | Redraws the control's surface. |

## 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.