Click here to Skip to main content
15,888,340 members
Articles / Programming Languages / Visual Basic
Article

Improved and Recoded RibbonMenuButton

Rate me:
Please Sign up or sign in to vote.
4.93/5 (160 votes)
5 Jun 2007CPOL4 min read 357.4K   14.8K   493   86
A new version with many functionalities
Screenshot - presentation.png

Introduction

First of all, thanks to everyone. I am grateful to know that people value this effort. I remember like yesterday when I was sixteen, more or less, and I saw many types of software, apps and games. For me, it was impossible to access and develop software then. I have learned a lot since, however, and I realize that it's now one million times easier to access this kind of software. Furthermore, if I can help anyone to create eye-candy apps, I've decided that they can use my code freely.

Background

I was thinking about how to make a fully customizable button and about how difficult it was changing RGB components. I decided to make RibbonColor, which has many options to operate with colors. If you play the demo app, you will understand quickly as you move the Hue, Sat and Brightness track bar. I have to admit that I have approximately 70% of the new RibbonControl library finished. However, as people are anxious to have improved code and have told me that I did not explain practically anything about my code, I've decided to do this like for dummies. So, here we go.

How to Use the Code

First of all, create a new Windows application. From the Solution Explorer, choose the option Add Existing Item. Then choose RibbonMenuButton.cs and Rebuild the project. Now, if you go to the form1 designer, in the toolbox you will have RibbonMenuButton. Drag it to the form. You will see a control without sense, but let's play with the properties. First, set properties for the RibbonMenuButton:

Screenshot - ribbonmenubuttonprops.png

When you have set the properties, add an image, set the text you want and set the font to Segoe UI if you have it. You will have something like this:

Screenshot - trialbutton.png

If you have compiled the project and you get this, the next step is to change the properties of the control. Let's see what each property represents. I recommend that you look at the button's Properties settings in the demo project:

  • Arrow: Paints an arrow ToRight or ToDown; this only paints, as the double functionality is in another property.
  • Colors: I think this doesn't need explanation; I recommend you to use the PlayGround app to choose your colors.
  • FadingSpeed: This facilitates fading between colors; choose 0 to avoid fading.
  • GroupPos: This is to make round corners on the Left, Right, Center (None), Top or Bottom.
  • ImageLocation: To put the image on the Left, Right, Top or Bottom.
  • ImageOffset: To offset from the borders.
  • MaxImageSize: To make buttons larger with a scaling image limit.
  • Radius: The corner radius.
  • ShowBase: If you want to show the BaseColor and BaseStroke color where Transparent is a color and makes fading. If set to No, it doesn't make fading.
  • SplitButton: Creates a double function button; the arrow section opens the associated ContextMenu and the other section, the main event.
  • SplitDistance: How big the arrow section button is.
  • Title: If you set this different from "", it automatically puts the title bold and under the text.
  • Text: If you have a title and want two lines of text, add \n to the text to make two lines.
  • KeepPress, IsPressed: If KeepPress is active on some buttons, when one of them is pressed, it keeps the press and the others in the containers lose the IsPress.

I have tried to crash the app, but it always works. So, I think the code is effectively error-free.

Points of Interest

If you want to learn more about these controls, I recommend that you take a look at:

  • this.Region: That's a good way to avoid matters of transparency.
  • LinearGradient With multiple colors, that makes the gradients easy.
  • MeasureString: That's a good method to position the text because you have to take away the base.OnPaint -> you have to do everything, including write the text.
  • TransformColors Method including the alpha opacity.
  • DrawArc method: As you can see, with the radius you can make smooth corners.
  • OnMouseUp: Here you can see what happens when the SplitButton is activated and IsPressed activated.
  • RibbonColor: I took the formulas from Wikipedia and Gimp. The System.Drawing.Color.GetHue, Sat and Brightness don't work well.

History

  • 5 June, 2007. 1.6 - Solved Repaint, ChangingSize and excessive CPU consumption. Added KeepPress and IsPress functionality.
  • 16 May, 2007. 1.5 - Because I had to recode everything when I learned how to use Hue, Saturation and Brightness.

License

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


Written By
Software Developer Expediteapps
Spain Spain
I'm Electronic Engineer, I did my end degree project at Astrophysical Institute and Tech Institute. I'm HP Procurve AIS and ASE ,Microsoft 3.5 MCTS
I live in Canary Islands ,developing customized solutions

Deeply involved in Xamarin Forms LOB (including Azure Cloud with offline support, custom controls, dependencies) projects, WP8.1 & W10 projects, WPF modern styled projects. Portable libraries like portablePDF, portableOneDrive, portableReports and portablePrinting (using Google Printing API).


Web and apps showcase at:
Expediteapps


Take a look to my blog
Blog

Comments and Discussions

 
GeneralRe: Fix the bugs Pin
xitour7-May-12 20:52
xitour7-May-12 20:52 
GeneralTab key press Pin
piyush74198205-May-08 20:21
piyush74198205-May-08 20:21 
Generalstrip menu does not work by me Pin
trupik27-Feb-08 20:14
trupik27-Feb-08 20:14 
GeneralFound a bug on right clicking a button... [modified] Pin
Octopod10-Jan-08 5:50
Octopod10-Jan-08 5:50 
Generalso cool Pin
JackChen19877-Jan-08 22:11
JackChen19877-Jan-08 22:11 
GeneralI'm confused Pin
tcsoccerman4-Dec-07 13:49
tcsoccerman4-Dec-07 13:49 
GeneralAnother CPU bug Pin
Jordiproatec29-Nov-07 2:30
Jordiproatec29-Nov-07 2:30 
General3 bug fixes (includin CPU issues) Pin
gpgemini13-Oct-07 11:01
gpgemini13-Oct-07 11:01 
Hi,

First of all - Jaun, I LOVE your control, it's probably one of the best in CodeProject.

But as soon as I started using it, i noticed it has CPU consumption issues (I always have SiMeter on, so noticing it was a breeze).
It has two CPU problems, first is that moving the mouse around the buttons causes major CPU usage, which probably happens due to over-painting the buttons (and should be fixed by optimizing the code), and second that it has bursts of massive CPU usage with no user/mouse interaction. The latter is obviously a bug.

all bugs/fixes here relate to the RibbonMenuButton.cs file.
(fixed file is linked at the end of the post)

Bug #1: when moving the mouse quickly over a split button, or two non-split buttons, the CPU usage jumps to 100% until the mouse is moved over the buttons again (do it too many times and you are stuck with 100%).
This is a major application killer, and obviously cannot be left unfixed.
To locate the CPU leakage, I went to the immediate suspect: OnPaint().
Added a WriteLine("Paint" + DateTime.Millisecond) to see each time a button is painted, and I saw it was bombarding with OnPaint() calls for no reason.
Add a breakpoint AFTER the bombardment has started and you find the perpetrator:
timer1_Tick() is being called, and executes the following in the "Leaving" region:
else<br />
{<br />
    this.Refresh();<br />
}

Obviously the timer went out of control, so I added a timer1.Stop() statement before this.Refresh():
else<br />
{<br />
    timer1.Stop();<br />
    this.Refresh();<br />
}

And what do you know, the bug is gone.
Hurray !
But obviously this timer is good for something ...
Since I only use non-fading buttons (I want maximum performance) I tried the fix on a fading button, and sadly it broke.
So I tested to see if the bug is unique to non-fading buttons, or affects all buttons, and turns out it only happens with non-fading buttons.
So I patched the fix to affect only non-fading buttons:
else<br />
{<br />
    if (i_factor == 0)<br />
        timer1.Stop();<br />
    this.Refresh();<br />
}


Bug #1 fixed.

Bug #2: When the mouse is hovering over a button, periodic OnPaint() calls are executed.
With the WriteLine() thing in OnPaint I was able to notice a weird behavior, that had little effect on CPU usage but was clearly a bug - a hovering non-moving mouse over a button was producing OnPaint() calls, slowly but constantly (around 2-10 per second), with varying effect on different buttons.
To catch this, I added a breakpoint in OnPaint that hit after 50 passes (to avoid regular OnPaint calls) and put the mouse over a button. After a few seconds I found the second perpetrator:
The overrriden OnMouseMove() method.
protected override void OnMouseMove(MouseEventArgs mevent) {<br />
    if (mouse & this.SplitButton == e_splitbutton.Yes) {<br />
        xmouse = PointToClient(Cursor.Position).X;<br />
        ymouse = PointToClient(Cursor.Position).Y;<br />
        this.Refresh();<br />
    }<br />
    base.OnMouseMove(mevent);<br />
}

After taking a look at it, I found nothing wrong about it (except the really weird way to get xmouse and ymouse, why not use the mevent.X and mevent.Y values ?).
The only suspicious thing was using this.Refresh() inside a OnMoueMove() event handler.
So I tested it in a small program outside, and indeed, calling this.Refresh() (or this.Invalidate()) inside a OnMouseMove() handler is a BAD idea - it causes the OnMouseMove() event to be called repeatedly and indefinitely.
It's probably some internal WinForms bug/feature (or maybe it's an abuse of the API), but either way I fixed it by checking that the mouse has ACTUALLY moved, before calling this.Refresh():
protected override void OnMouseMove(MouseEventArgs mevent)<br />
{<br />
    if (mouse & this.SplitButton == e_splitbutton.Yes)<br />
    {<br />
        prev_xmouse = xmouse;<br />
        prev_ymouse = ymouse;<br />
        xmouse = PointToClient(Cursor.Position).X;<br />
        ymouse = PointToClient(Cursor.Position).Y;<br />
        if (prev_xmouse != xmouse || prev_ymouse != ymouse)<br />
            this.Refresh();<br />
    }<br />
    base.OnMouseMove(mevent);<br />
}


Bug #2 fixed.

Bug #3: This one is a non-CPU related, when RIGHT-clicking the arrow of a split-button, AND then clicking outside the opened context menu, ALL the RibbonButtons stop reacting to mouse events (except click events) until the context menu is clicked properly.
This one was obviously related to mouseDown and mouseUp events, so I cheched them out.
I found that when clicking the button, there is a check in the MouseUp event if the click was inside the arrow area (hmmmm, suspicious already) and if so, the conetxt menu is opened under the button, if not, the event is passes to the base.
First attempt: lets pass the event to the base either way. Quickly enough it turned out to be a bad idea. But why ? Since this causes the context menu to open under the mouse, and then in a split of a second to move under the button. Taking another look at the problem I noticed that when right-clicking the button NOT in the arrow area, the context menu is opened under the mouse, and in the arrow area it is overridden and is opened under the button. But in the latter case, the base class event handler is never called. The mouseUp event never reaches the base class and the mouse state is messed up.
To fix this, I added a check in the MouseUp method, if the click is a RIGHT-click, pass the event to the base class and return, the effect of this is that the context menu is opened naturally and all is good, if the click is a LEFT-click the context menu is opened manually under the button, and all is good.

Bug #3 fixed.


Ce tout.
The fixed file is here:
http://gpgemini.googlepages.com/RibbonMenuButton.zip
Notice that these are plain patches to the found bugs, I hope Juan takes a look at them and fixes them properly in the next release.
GeneralTextAlign requests are ignored Pin
GrantM2-Oct-07 10:19
GrantM2-Oct-07 10:19 
QuestionHow to unable a RibbonMenuButton? Pin
ivanchain@hotmail.com16-Sep-07 14:43
ivanchain@hotmail.com16-Sep-07 14:43 
GeneralHi, about the icons Pin
ivanchain@hotmail.com11-Sep-07 3:44
ivanchain@hotmail.com11-Sep-07 3:44 
GeneralRe: Hi, about the icons Pin
The Cake of Deceit24-May-08 7:32
The Cake of Deceit24-May-08 7:32 
GeneralUsing this button as toolstripbutton Pin
Vincent_ws10-Sep-07 17:09
Vincent_ws10-Sep-07 17:09 
Generalmissing Ribbon Menu Pin
Kamalmostofi31-Aug-07 11:40
Kamalmostofi31-Aug-07 11:40 
AnswerRe: missing Ribbon Menu Pin
qien15-Oct-07 22:32
qien15-Oct-07 22:32 
QuestionImage clipping Pin
joncle12312-Aug-07 7:50
joncle12312-Aug-07 7:50 
GeneralCPU problems Pin
Roey C4-Aug-07 11:05
Roey C4-Aug-07 11:05 
GeneralRe: CPU problems Pin
Roey C4-Aug-07 11:07
Roey C4-Aug-07 11:07 
QuestionIsPressed = true paint bug [modified] Pin
alleph26-Jul-07 9:51
alleph26-Jul-07 9:51 
QuestionBug? Pin
jdem26-Jul-07 5:33
jdem26-Jul-07 5:33 
Generalabout Office 2007 UI Licence Pin
alleph24-Jul-07 21:43
alleph24-Jul-07 21:43 
AnswerRe: about Office 2007 UI Licence Pin
Praded5-Aug-07 3:26
Praded5-Aug-07 3:26 
Generalmistake ,deadliness Pin
qingtianyu911-Jul-07 19:43
qingtianyu911-Jul-07 19:43 
Generalthe code.. Pin
Seishin#19-Jun-07 5:00
Seishin#19-Jun-07 5:00 
GeneralRe: the code.. [modified] Pin
Mario M.16-Sep-07 5:15
Mario M.16-Sep-07 5:15 

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.