Click here to Skip to main content
Licence CPOL
First Posted 28 May 2011
Views 9,102
Downloads 1,285
Bookmarked 13 times

Office 2010 Button

By | 29 May 2011 | Article
This article describes how to extend a system button to achieve the Office 2010 button look and feel.

Office2010ButtonPreview.png

Introduction

This article demonstrates extending the system button control to achieve an Office 2010 button look and feel.

Basics

The first step in creating a user interface is to choose the right base component that offers complete functionality and extendibility. The ButtonBase class would be the right choice for implementing a button control; this sample uses Button as the base class for simplicity.

Key points:

  • inherit from the base.
  • override the essential methods and properties for custom implementations.

This example inherits from the Button class and overrides the Paint method to make the Office 2010 button appearance.

Using the code

The cardinal part of the OfficeButton class is the overridden Paint method, which completely ignores the paint implementation of the base and provides its own implementation.

protected override void OnPaint(PaintEventArgs pevent)
{
    PaintButtonBackground(pevent);
    PaintImageAndText(pevent);
    PaintButtonBorder(pevent);
}

Image and text are available in all the three states of the button and are painted in the same way all the time with PaintEventArgs, whereas background painting is different for all the three states. The GetBackgroundGradientBrush method gets the appropriate brush and fills the background.

private void PaintButtonBackground(PaintEventArgs e)
{
    ButtonState state = GetButtonState();

    using (LinearGradientBrush brush = GetBackgroundGradientBrush(state))
    {
        e.Graphics.FillRectangle(brush, this.ClientRectangle);
    }
}

GetBackgroundGradientBrush returns the appropriate blended brush based on the button state.

private LinearGradientBrush GetBackgroundGradientBrush(ButtonState buttonState)
{
    Color gradientBegin = Color.Empty;
    Color gradientEnd = Color.Empty;

    switch (buttonState)
    {
        ...
        ...
        ...
                
    case ButtonState.Selected:
        LinearGradientBrush brush = new LinearGradientBrush(
          this.ClientRectangle, gradientEnd, gradientBegin,
        LinearGradientMode.Vertical);
        this.SelectionBlend.Colors = this.InterpolationColors;
        brush.InterpolationColors = this.SelectionBlend;
        return brush;
    }
    
    return new LinearGradientBrush(this.ClientRectangle, gradientEnd,
        gradientBegin, LinearGradientMode.Vertical);
}

Hope this gives you a better idea of extending system controls to meet your requirements.

License

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

About the Author

VallarasuS

Software Developer

India India

Member

Follow on Twitter Follow on Twitter
I code!

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
GeneralMy vote of 3 PinmemberR. Hoffmann7:28 31 May '11  
GeneralRe: My vote of 3 Pinmembervallarasus7:17 1 Jun '11  
GeneralMy vote of 2 PinmemberMario Majcica1:58 30 May '11  
GeneralRe: My vote of 2 Pinmembervallarasus7:19 1 Jun '11  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web03 | 2.5.120517.1 | Last Updated 29 May 2011
Article Copyright 2011 by VallarasuS
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid