Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

A Microsoft Office Style WPF Application Button

0.00/5 (No votes)
22 Mar 2008 8  
An article presenting ApplicationButton used in creating round buttons as per Microsoft Office Style application buttons
Demo Screenshot

Introduction

This article presents the ApplicationButton class and its use in creating round buttons for WPF use, specifically for application buttons as per Microsoft Office applications.

Background

The application button in Microsoft Office applications is used for opening application wide options such as Save, Open, and Exit; it is analogist to the start button of Microsoft Windows. The following screenshot of Microsoft Office Word indicates the application button via a red box. While the source code was created as part of a larger library for recreating the Microsoft Office application button functionality, this control may easily be used in any context support WPF.

Microsoft Office Word Screenshot

Using the code

To add the control itself is straightforward, requiring similar initialisation and connection to the standard WPF Button, however in addition to the expected methods and properties are the following properties to allow simple restyling of the button;

  • BaseColor; the default background color
  • BaseHoverColor; the background color when the mouse is over the control, smoothly animated too and from BaseColor
  • BasePressedColor; the background color when the mouse is pressed on the button (returning to the BaseHoverColor as soon as the mouse button is released, or to the BaseHoverColor to the BaseColor if the mouse pointer leaves the control
  • HighlightColor; the default highlights color, i.e. the lighter sections on the previews. Note that alpha transparencies are automatically set when applying the color to the control, therefore any alpha channel set when setting this color are ignored
  • HighlightHoverColor; the highlights color when the mouse is over the control, smoothly animated too and from HighlightColor
  • HighlightPressedColor; the highlights color when the mouse is pressed on the button (returning to the HighlightHoverColor as soon as the mouse button is released, or to the HighlightHoverColor to the HighlightColor if the mouse pointer leaves the control
  • Image; used to set the icon image for the control. In the context of Microsoft Office this would be set to the four squares motif

Note, the button will automatically update its colours when the relevant properties are set. In addition to the above properties, autoGenerateHighlightColors() exists to automate the process of selecting highlight colors. The default styling of the button produces a button as styled above as the large central button (i.e. blue with light blue highlights, hovering to orange, and pressing to dark orange).

To set a button image use the Image property; the property supports transparent images (Portable Network Graphics, PNG, recommended).

Button Structure

The button structure is relatively simplistic, however not immediatly apparent without a high resolution larger copy; grateful thanks to Juan Pablo for his work RibbonRoundButton 1.0, on which this work is loosely based. The following diagram illustrates how the button is structured.

Application Button Structure

  1. A solid Ellipse used for the background color, filled using SolidColorBrush
  2. An Ellipse with a RadialColorBrush with the brush skewed upwards for the bottom highlight section
  3. A Path in a crescent moon shape, with a RadialColorBrush with the outer values having less transparency than the inner

3 overlays 2 overlays 1. Finally an Image is overlaid. The button has a non-uniform margin to account for the drop down shadow bitmap effect.

Points of Interest

Oddly none of the control structure for Microsoft Office is currently available in the .NET 3.5 framework, despite Microsoft offering significant selects of the Office user interface royalty free (even for commercial applications)*. Future work will extend the library to deliver similar functionality to Microsoft Office for free**; shortly coming is a Window replacement allowing easy access to the non-client area regions, a title menu control box, and a file menu window.

* Under license, with a non-disclose agreement, compulsory design guidelines, and a non-competitive clause.
** For non-commercial, and not for profit.

History

Version 1.0.0.0 - Initial build

Additional Licensing Notes

Please feel free to use this in your work, however please be aware that a modified The Code Project Open License (CPOL) is in use; basically it is the same as the standard license except that this code must not be used for commercial or not-for-profit commercial use without prior authorisation. Please see license.txt or license.pdf in the included source and demo files.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here