Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / WPF
Article

A Microsoft Office Style WPF Application Button

Rate me:
Please Sign up or sign in to vote.
3.38/5 (10 votes)
22 Mar 2008CPOL4 min read 100.9K   3.1K   36   4
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Rail Research UK
United Kingdom United Kingdom
I originally studied for a masters in engineering of software engineering at The University of Birmingham during 2000-2004, of which I received a 2:1. I continued at Birmingham University working with Civil Engineering and Rail Research UK where I am currently in my final year of a 3 year PhD project developing a Computational Intelligent Approach to Railway Intervention Planning. Although my work has a significant focus on railway engineering and associated practices much of my work is with data mining (on SQL Server 2008) and computational intelligence (CI) techniques. My key areas of expertise in CI are clustering algorithms (including Rival Penalised Competitive Learning) and evolutionary algorithms.

Outside of my formal work I enjoy testing the latest technologies such as .NET 3.5 and the many frameworks of which it comprises (mainly WPF). I have several projects on the go including a .NET and DirectX port of Quake 3 and many utility libraries. I also maintain an extensive website coded in Cold Fusion which is regularly updated; more information is available about me there.

Comments and Discussions

 
GeneralMy vote of 2 Pin
mark_shiffer9-Apr-10 5:20
mark_shiffer9-Apr-10 5:20 
GeneralI cant do it work Pin
Felipe V. Rigo25-Nov-08 13:13
Felipe V. Rigo25-Nov-08 13:13 
GeneralTets App not running Pin
StevenHawkes5-Feb-08 12:48
StevenHawkes5-Feb-08 12:48 
AnswerRe: Tets App not running Pin
Derek Bartram5-Feb-08 14:44
Derek Bartram5-Feb-08 14:44 

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.