Improved and Recoded RibbonMenuButton

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:

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:

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 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

About the Author

Juan Pablo G.C.

Software Developer

Spain

Member

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

I'm developing with WPF4, SL4 MVVM, MVC3 Razor and WP7 projects, more info at my websites. Improving with Android and IOS.

Websites:
MemCards
Mareinsula

Take a look to my blog Juan Pablo G.C.
Mareinsula

Article Top

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
	Profile popups Noise Layout Per page

Tab key press

piyush7419820

20:21 5 May '08

I have placed two textbox and one this button. Now when i move from one control to another by Tab key press the button don't get focus. Whey you replace this button with normal button, the normal button get focus and it show this by border around button. But this button don't. Can you help me ?
Sign In·View Thread·Permalink	3.50/5 (3 votes)

strip menu does not work by me

trupik

20:14 27 Feb '08

When I set ContextStripMenu to a Ribbon menu and click the button, the menu does not render itself correctly. It just is all black. In design time, when I click the Type here area in the RibbonMenu to add a new menu item, the UI stucks in some kind of endless cycle. Am I the only one having this trouble???
Sign In·View Thread·Permalink	1.50/5 (2 votes)

Found a bug on right clicking a button... [modified]

Octopod

5:50 10 Jan '08

Its easy to reproduce, simply right click in the right part (the contextual part with the arrow) of the button named "Paste History Menu".

Then try to click another button... it's now stuck.

The same bug occurs with all buttons that have same kind of contextuel part ("Write & Close" for example).

Anyway, pretty cool control, really good work.

Alexis.

modified on Monday, January 14, 2008 5:20:39 PM

so cool

JackChen1987

22:11 7 Jan '08

Thank you I love you so much
Sign In·View Thread·Permalink

I'm confused

tcsoccerman

13:49 4 Dec '07

First i'd like to say that this is the control that many many many many many people are looking for. It includes may features of lots of seperate controls out there. Someone made a split button (a boring one too). someone made a glowing one. someone made a colorful one. You joined all that together. Now people like me can have a common button throughout their app and still have all the functions they need. Thank you.

Second, I can't quite figure out a few things. First of all, i can't seem to get the arrow to point right, even though that's what i set it as. Second, the color part is a little confusing, can you discribe that a little more? What does ispressed and keepressed mean and theres just a few things that don't seem to be working visually. The Grouppos for example.

Another CPU bug

Jordiproatec

2:30 29 Nov '07

When I click the ribbonmenubutton lots of OnPaint events was send by the "set" method in the ColorBase, ColorOn and ColorPress properties:

        public Color ColorBase

        {

            get { return _baseColor; }

            set

            {

                    _baseColor = value;

                    R0 = _baseColor.R;

                    B0 = _baseColor.B;

                    G0 = _baseColor.G;

                    A0 = _baseColor.A;

                    RibbonColor hsb = new RibbonColor(_baseColor);

                    if (hsb.BC < 50)

                    {

                        hsb.SetBrightness(60);

                    }

                    else

                    {

                        hsb.SetBrightness(30);

                    }

                    if (_baseColor.A > 0)

                        _baseStroke = Color.FromArgb(100, hsb.GetColor());

                    else

                        _baseStroke = Color.FromArgb(0, hsb.GetColor());

 here--->           this.Invalidate();

            }

        }

I fix this executing the set code only when the property change:

  public Color ColorBase

        {

            get { return _baseColor; }

            set

            {

                if (_baseColor != value)

                {

                    _baseColor = value;

                    R0 = _baseColor.R;

                    B0 = _baseColor.B;

                    G0 = _baseColor.G;

                    A0 = _baseColor.A;

                    RibbonColor hsb = new RibbonColor(_baseColor);

                    if (hsb.BC < 50)

                    {

                        hsb.SetBrightness(60);

                    }

                    else

                    {

                        hsb.SetBrightness(30);

                    }

                    if (_baseColor.A > 0)

                        _baseStroke = Color.FromArgb(100, hsb.GetColor());

                    else

                        _baseStroke = Color.FromArgb(0, hsb.GetColor());

                    this.Invalidate();

                }

            }

        }

Thanks for reading and excuse my poor English

3 bug fixes (includin CPU issues)

gpgemini

11:01 13 Oct '07

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

{

    this.Refresh();

}

Obviously the timer went out of control, so I added a timer1.Stop() statement before this.Refresh():

else

{

    timer1.Stop();

    this.Refresh();

}

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

{

    if (i_factor == 0)

        timer1.Stop();

    this.Refresh();

}

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) {

    if (mouse & this.SplitButton == e_splitbutton.Yes) {

        xmouse = PointToClient(Cursor.Position).X;

        ymouse = PointToClient(Cursor.Position).Y;

        this.Refresh();

    }

    base.OnMouseMove(mevent);

}

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)

{

    if (mouse & this.SplitButton == e_splitbutton.Yes)

    {

        prev_xmouse = xmouse;

        prev_ymouse = ymouse;

        xmouse = PointToClient(Cursor.Position).X;

        ymouse = PointToClient(Cursor.Position).Y;

        if (prev_xmouse != xmouse || prev_ymouse != ymouse)

            this.Refresh();

    }

    base.OnMouseMove(mevent);

}

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.

TextAlign requests are ignored

GrantM

10:19 2 Oct '07

TextAlign requests are being ignored, even in the demo application. Any suggestions? They don't shift at all from their current locations. Other than that, I love it!
Sign In·View Thread·Permalink	3.29/5 (6 votes)

How to unable a RibbonMenuButton?

ivanchain@hotmail.com

14:43 16 Sep '07

I want to do this:
Unable a button, that means, the button could not be clicked and the image on it is showed as grey-color.

I tried to set the RibbonMenuButton.enable to false, the result is: yes, the button could not be clicked, BUT, the image on it is still a colorful one, just looks like a common button.

So If I don't click it, I can't tell an enable button or an unable button from appearance. I thinks this is not good.

thanks!

123

Hi, about the icons

ivanchain@hotmail.com

3:44 11 Sep '07

Hi, I read your answers that you get the icons from the gnome.

Sorry for my stupid, I don't know how to download the icons there. Could you tell me?

For example, I found an icons set at:
http://art.gnome.org/themes/icon/1112
I tried to download it, but the .rar package could not be opened(report an error). and The context seem to be .tar file, not the icon file. How do you get the png out?

thanks.

123

Re: Hi, about the icons

Alpha Nerd

7:32 24 May '08

Some are icons from the Tango theme. They have a normal RAR file, which I have decompressed with WinRAR suceesfully.
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Using this button as toolstripbutton

Vincent_ws

17:09 10 Sep '07

Hi nice work! I'd like to put the ribbon menu button in my toolstrip. Anyone has any suggestion how to do it? Thanks in advance! Any way this is really a brilliant control!!
Sign In·View Thread·Permalink	5.00/5 (1 vote)

missing Ribbon Menu

Kamalmostofi

11:40 31 Aug '07

Hi, I have added the reference and the control to my toolbox, but I don't have RibbonMenu control in my toolbox! How can I add it to my project? Thanks for your help, Kamal
Sign In·View Thread·Permalink	1.00/5 (1 vote)

Re: missing Ribbon Menu

qien

22:32 15 Oct '07

hello you should add the RibbonMenuButton.cs into the SolutionExplorer, then reset it.
Sign In·View Thread·Permalink	1.67/5 (3 votes)

Image clipping

joncle123

7:50 12 Aug '07

Hi there,

Many thanks for this control; we need more people in the community that contribute stuff like this.

I'm sure this is trivial, but I'm not sure where to start. If I set an image for the button (which gets scaled down to fit quite nicely), which has a radius of 25, the top left of it gets 'rounded' correctly; however, the top right remains rectangular. I'd send you a screen shot, but I'm not sure how on this thing.

Any suggestions, or further clarification by me, please let me know.

Many thanks again,

Jon.

The words of the prophets are written on the subway walls...

CPU problems

Roey C

11:05 4 Aug '07

hi, first of all, this project is great and the look and feel is very professional.
but! when you're working on graphics, thing that takes a lot of cpu power you have to make a close look on the performances issues.

i saw that the worst problem with your code is that when you start timers, you refresh the controls even if it's not needed. this thing is simple to solve, here are two methods:
1. refresh it only if the painting parameters has changed.
2. stop the timer when the colors transformations has been completed.

i would go on to 2, since it's more elegant and frugal.

i hope you make a new release with fixed peroformance.

Roey

Don't believe to what you hear on the news...

Re: CPU problems

Roey C

11:07 4 Aug '07

one more thing, i was talking about you're reounded buttons... Don't believe to what you hear on the news...
Sign In·View Thread·Permalink	2.00/5 (1 vote)

IsPressed = true paint bug [modified]

alleph

9:51 26 Jul '07

it's not paint the ribbonbutton at the begining when its IsPressed property is set true and that's the solution;



protected override void OnCreateControl()

{

     base.OnCreateControl();

     .......

     if (_keeppress && _ispressed) this.UpdateEnter();//Add this line into this Method.

}

 

protected override void OnMouseEnter(EventArgs e)

{

     base.OnMouseEnter(e);

     UpdateEnter();//Extracted Method Calling

}

 

//This method extracted from the OnMouseEnter method

public void UpdateEnter()

{

     _colorStroke = ColorOnStroke;

     _tempshowbase = _showbase;

     _showbase = e_showbase.Yes;

     i_mode = 1;

     xmouse = PointToClient(Cursor.Position).X;

     mouse = true;

     A0 = 200;

     if (i_factor == 0)

     {

          R0 = _onColor.R; G0 = _onColor.G; B0 = _onColor.B;

     }

     timer1.Start();

}

-- modified at 19:23 Thursday 26th July, 2007

Ismail SEZEN
Physicist

Bug?

jdem

5:33 26 Jul '07

Hi

very very nice Button. I think I found a small bug. When you set the ImageLocation to "Left", SplitButton to "Yes" and the Arrow to "ToDown" and then klick on the part of the Button which should open the context menu I ve geht an exception.

The problem ist in file "RibbonMenuButton.cs" in the "ClickSplit" region. I think this

if (_arrow == e_arrow.ToDown)
{
if (this.ContextMenuStrip != null)
this.ContextMenuStrip.Opacity = 1.0;
this.ContextMenuStrip.Show(this, 0, this.Height);
}

has to be this

if (_arrow == e_arrow.ToDown)
{
if (this.ContextMenuStrip != null)
{
this.ContextMenuStrip.Opacity = 1.0;
this.ContextMenuStrip.Show(this, 0, this.Height);
}
}

Best regards,
Bastian

about Office 2007 UI Licence

alleph

21:43 24 Jul '07

Altough My English is not very well, I read an article about Office 2007 UI Licensing and I wonder whether or not it's possible to use this nice-look buttons on our products without Office 2007 UI Licence? Microsoft suggests some guidelines how to implement a ribbon controls as office 2007 UI style. But this ribbon buttons are made without this guideline. Anybody can give more explanation about this issue? below some links about this subject.
Licensing the 2007 Microsoft Office User Interface
Office 2007 UI License

Ismail SEZEN
Physicist

Re: about Office 2007 UI Licence

Praded

3:26 5 Aug '07

If you're interested, that had been already discussed on other article of Juan Pablo about Ribbon Form and Round button
Sign In·View Thread·Permalink

mistake ,deadliness

qingtianyu9

19:43 11 Jul '07

I set attribute Radius = 0 (default : 6),then report mistake,deadliness
Sign In·View Thread·Permalink

the code..

Seishin#

5:00 19 Jun '07

Hi!
first of all i'd like you to know that your control looks really great. all this stuff like split button, group pos is really cool..
but when i look at the code hell begins..

public enum e_splitbutton

        {

            No, Yes

        }

isn't this something like bool but more memory consuming??

public enum e_showbase

        {

            Yes, No

        }

...
set { _showbase = value; this.Refresh(); }i guess Invalidate() would be more appropriate
if (A + A0 > 255) { A = 255; } else { A = A + A0; }A = Math.Min(255, A + A0); just look better..

xmouse = PointToClient(Cursor.Position).X;

ymouse = PointToClient(Cursor.Position).Y;

xmouse and ymouse could be a Point.. and you call PointToClient(Cursor.Position) twice :/..

and so on..
on my machine (Sempron3000+ 1GiB DDR400) with 7 buttons when hovering cpu goes up to 80%...
the title of your article is "Improved and Recoded RibbonMenuButton".. man.. i wonder how it looked before..

my suggestion - work on the performance of the button, because as I said, it looks just great!!

life is study!!!

Re: the code.. [modified]

Mario M.

5:15 16 Sep '07

It also has a bug in click handling, when you click a ribbonbutton which opens a dialog, then you close that dialog the button sends the message again and it opens the dialog again, you close that dialog again and then it sends the message to it's parent too.
Sign In·View Thread·Permalink	2.00/5 (1 vote)