Click here to Skip to main content
13,145,068 members (54,833 online)
Click here to Skip to main content
Add your own
alternative version

Stats

3.3K views
207 downloads
8 bookmarked
Posted 8 Aug 2017

Beveled Panel with Shadow Effect

, 8 Aug 2017
Rate this:
Please Sign up or sign in to vote.
A panel that has rounded borders, gradients, edges/bevels and a shadow

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.

Sample Image - maximum width is 600 pixels

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,
                                        LinearGradientMode.ForwardDiagonal))
    {
        edgeBrush.Blend = edgeBlend;
        RoundedRectangle.DrawFilledRoundedRectangle(g, edgeBrush, edgeRect, _rectRadius);
    }
}

The top shape is the simple rounded rectangle.

private void DrawPanelStyled(Graphics g, Rectangle rect)
{
    using (Brush pgb = new LinearGradientBrush(rect, _startColor, _endColor,
        (LinearGradientMode)this.BackgroundGradientMode))
    {
        RoundedRectangle.DrawFilledRoundedRectangle(g, pgb, rect, _rectRadius);
    }
}

The basic idea for the soft shadow effect was described in this article.

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 };
    shadowBrush.SurroundColors = color;

    // Set the center color 
    shadowBrush.CenterColor = _shadowColor;
    graphics.FillPath(shadowBrush, path);

    shadowBrush.FocusScales = new PointF(0.95f, 0.85f);
    graphics.FillPath(shadowBrush, path);

}

The described technique gives control with the following features:

  • Bevel Effect
  • Rounded corners
  • Gradients
  • Soft shadow
  • Edge thickness
  • Shadow depth

History

  • 8th August, 2017: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Yury Yuhno
Software Developer Axon Cable
Latvia Latvia
No Biography provided

You may also be interested in...

Comments and Discussions

 
Questioncomment Pin
avisal10-Aug-17 4:38
professionalavisal10-Aug-17 4:38 
QuestionGood useful trick Pin
Member 1086218010-Aug-17 3:35
memberMember 1086218010-Aug-17 3:35 
QuestionOK I Guess, But... Pin
Kevin Marois9-Aug-17 10:52
professionalKevin Marois9-Aug-17 10:52 
AnswerRe: OK I Guess, But... Pin
Yury Yuhno9-Aug-17 19:17
memberYury Yuhno9-Aug-17 19:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170915.1 | Last Updated 8 Aug 2017
Article Copyright 2017 by Yury Yuhno
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid