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.
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.
- A solid
Ellipse used for the background color, filled using SolidColorBrush
- An
Ellipse with a RadialColorBrush with the brush skewed upwards for the bottom highlight section
- 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.
