13,797,987 members
Tip/Trick
alternative version

Stats

6.9K views
9 bookmarked
Posted 8 Aug 2017
Licenced CPOL

, 8 Aug 2017

Introduction

By applying bevels, you can add depth to flat objects, it simulates the nicety of a real beveled shape. This article briefly explains how to design and implement the ability to paint the bevel onto a panel and how to apply the soft shadow for this control.

Background

The bevel effect is the simulation of two layers. The bottom layer should contain the shape, which will be split diagonally. Each half has to be filled with light and dark color. This will create edges effect. The upper level should create shape with the smaller size for the panel main area. The pictures below give detailed explanation.

Implementation

The bottom shape in the given control was drawn as a rounded rectangle with linear gradient filling. To split the area by diagonal, component uses ` Blend `function.

```private void DrawEdges(Graphics g, ref Rectangle edgeRect)
{
Rectangle lgbRect = edgeRect;
lgbRect.Inflate(1, 1);

var edgeBlend = new Blend();
switch (Style)
{
case BevelStyle.Lowered:
edgeBlend.Positions = new float[] { 0.0f, .49f, .52f, 1.0f };
edgeBlend.Factors = new float[] { .0f, .6f, .99f, 1f };

break;
case BevelStyle.Raised:
edgeBlend.Positions = new float[] { 0.0f, .45f, .51f, 1.0f };
edgeBlend.Factors = new float[] { .0f, .0f, .2f, 1f };
break;
}

using (var edgeBrush = new LinearGradientBrush(lgbRect,
edgeColor1,
edgeColor2,
{
edgeBrush.Blend = edgeBlend;
}
}```

The top shape is the simple rounded rectangle.

```private void DrawPanelStyled(Graphics g, Rectangle rect)
{
using (Brush pgb = new LinearGradientBrush(rect, _startColor, _endColor,
{
}
}```

This control uses ` PathGradientBrush `with transparent outline color.

```using (PathGradientBrush shadowBrush = new PathGradientBrush(path))
{
shadowBrush.CenterPoint = new PointF(rect.Width / 2,
rect.Height / 2);

// Set the color along the entire boundary
Color[] color = { Color.Transparent };

// Set the center color

}```

The described technique gives control with the following features:

• Bevel Effect
• Rounded corners
• Edge thickness

History

• 8th August, 2017: Initial post

Share

 Software Developer Latvia
I specialize in .Net with C#.
MSc in Computer Science, Daugavpils University

You may also be interested in...

 First Prev Next
 comment avisal10-Aug-17 5:38 avisal 10-Aug-17 5:38
 Good useful trick Member 1086218010-Aug-17 4:35 Member 10862180 10-Aug-17 4:35
 OK I Guess, But... Kevin Marois9-Aug-17 11:52 Kevin Marois 9-Aug-17 11:52
 Re: OK I Guess, But... Yury Yuhno9-Aug-17 20:17 Yury Yuhno 9-Aug-17 20:17
 Last Visit: 13-Dec-18 5:49     Last Update: 13-Dec-18 5:49 Refresh 1