Ribbon-AppButton

[Waescher]

Hi Phil,

I know, you've got many important things to do, but i think it would be nice if you could take a further look on your AppButton:

First:
It looks pretty different as the original appbutton from office does. I took a screenshot in which you can see the Office-AppButton, your one (KryptonRibbonAppButton) and an AppButton from the DevExpress-RibbonControl. As you can see, the DevExpress-one looks nearly as the original does.

To be fair - the DevExpress-Ribbon is much more expensive as the Krypton one and (as far as I know) the DevExpress-Ribbon renders itself with predefined images (it's a real performance-killer). So you may probably not be able to draw a aquivalent button with your GDI-technique (btw: I'm happy you use an other technique as DevExpress does ;).
Anyway ... what do you think? Is it possible to adapt the original appbutton in the KryptonRibbon?

Second:
Maximize a KryptonForm with an AppButton. If you play a little bit with hover- and presseffects on the AppButton, you can (at least I can) see an unattractive drawing-delay. First, the lower part of the button ist drawn, then the upper rest follows.
May that be the effect by splitting the AppButton into 2 parts (the upper part on the form-border)?

Third:
At the moment there is a massive focus-problem if you click the AppButton. There are no hovereffects in the appearing popupmenu (I think this will be solved in the 2.7-release (ApplicationMenus))

Thanks a lot,
Waescher

[Phil Wright]

Thanks for the feedback.

First
You make a fair point that the button does not look as nice as the rest of the ribbon control and certainly does not look as good as the original Office 2007, or some other products. As you noted, at the moment I use GDI+ drawing to create the button. So I draw various circles with gradient brushes to get the effect seen.

I have never been entirely happy with the look and tried a couple of times to find a way to draw it better, less pixelated. But that is the best I have managed so far. The only way I can think to make it better is to either cache bitmaps which can then be drawn or try again to draw it better using GDI+. I do not think I can do any better with the GDI+ approach.

Use cached images would be fine for the Blue, Silver, Black schemes because they are fixed colors. The system palette reacts to the system settings and so that would need to be GDI+ in approach. I will consider doing cached bitmaps for the next release if I get time.

I someone knows how to create it using Adobe Illustrator or some other package then I could translate the drawing actions into GDI+ operations and get a better look. Sadly my design skills are not that good.

Second
You are right. The actual app button is draw by two halfs. The top half is usually in the window caption area and the bottom half in the actual ribbon control. So drawing the button involves two windows messages, one for the caption are and another for the ribbon control. Because they are not part of the same single windows message you see a flicker because one half is painted a fraction before the other. Not sure how to improve on that.

Third
Once I have a ribbon app button implemented I hope to get the app button looking selected during the lifetime of the app menu showing. We will have to wait and see!

Keep the feedback coming!

[Waescher]

Hi Phil,

thanks for your response.

First
As I wrote: I'm aware of the GDI+-problem. And I know the problem with the images, etc.
Just a suggestion. I think that most of the developers looking for an office-like RibbonControl pay attention to such pretty obvious things like the AppButton. It's still an eyecatcher.
By the way: I think the KryptonRibbon is the best RibbonControl by now. It's very beautiful, very fast and close to the office-one (excepting the AppButton)

Second
Okay, just as I thought. Not really a problem for me

Third
It's not about the AppButton itself. The problem is the popupmenu which misses the focus (in most of the cases).

Best Regards,
Waescher

[jarekz]

There is a superb icon drawing program called Icon Workshop by Axialis.
In the 6.0 version they introduced very simple mechanism for constructing glassy icons by using separate png layers - works amazingly!
Maybe this would be a clue...

[Phil Wright]

I notice it has a 30 day trial version. I will give it a go, thanks.

[Waescher]

Hi,

I was just playing a little bit with some gradients and ellipses an managed to do a button like this with GDI in C#.
There are some details I'll try to fix in the future (like the horizontal line in the middle and the resulting heavy border through the button).
By the way: the hover- and presseffect look a little bit strange by now

Here ist a little screenshot:


What do you think Phil? If these things are done, I'd like to send you the sourcecode if you want!


Best regards,
Waescher

[Phil Wright]

Looks really nice, when can I have it !!!!

[Waescher]

I would like to enhance it a little bit first - are you going to release a new version in the next days/weeks?

[Phil Wright]

No, not till the end of the year.

[Waescher]

Hi again,

I don't want to spam your forums but I slightly updated the AppButton.
The disturbing line is gone and I added a litte additional glow-effect (zoomed region).



To be continued ...

[Phil Wright]

Looking good, now you just need to be able to parameterise it with a color so you can draw tracking and pressed versions.

[Waescher]

At the moment I use 6 colors for each state (normal, hovered and pressed). I may reduce them, when the final rendering is done.
The hover- and pressed-states are already rendered, but they differ a bit from the original by now.

I've added a screenshot with both buttons hovered:


Still some things to enhance ... In the first step I was working on the appearance in normal state

[Phil Wright]

Looks pretty darn close to me. Six colors is not so bad. You can probably auto calculate some of those.

[Waescher]

Hey Phil,

some days have passed an I just wanted to give you a short impression on the current state of your appbutton

I've created a test-form to take a look at the button placed on a ribbon

Please note, that the icon is copied from office07 so it's in poor quality.

Now take a look at the 'naked' button:


I know there are still things to improve but it keeps going ...
The pressed-effect has to be redone, but I think the rest is pretty close to the office one.

Best regards,
Waescher

[Waescher]

Hi Phil,

there was another little update. I'va added a further glow (on the top of the button) and furbished the code a little bit (still sth. to do).
Additionally I've added the function of color palettes and defined two standards (Office2007Blue and Office2007Silver/Office2007Black (same colors)).

The two buttons on the left are drawn in the new Silver/Black-style.



The pressed state looks much more 3-dimensional and the whole button shines in a nicer gloss-effect.

There won't be a lot of changes in future concerning the appaerance, I think. Perhaps I'm going to redo the border a little bit ...

Best regards,
Waescher

[Phil Wright]

Looks really nice. Don't spend to long gold plating the code, I need to make a release at the end of the year!!!

[Waescher]

I don't! But the code doesn't look very beautiful by now because I was trying with a lot of colors and GDI-functions as I needed them. So it's a little bit unstructured.
I'll do some improvement and send you the code in near future.

[Waescher]

The code has left my outbox

[Waescher]

Hi Phil,

I've tried to implement the AppButton in the KryptonRibbon. Here is how it looks like by now:


I don't know if you've already did it, but if not, please take a look at these points:

1) The rect is too small for the button. For the exact Office07-size, you'll need a rect with 38x38 pixels to draw the shadows on the lower right side.

2) please check the drawing of the shadows. They're very important for the threedimensional effect (in this pic the border isn't drawn completely)

3) there are two functions (originally called 'drawButtonGlowCenter' and 'drawButtonGlowUpperHalfBottom') which need to be modified. The rectBottomGlow's X and Y are calculated on the base 0. I just needed to add the original rect.X and rect.Y (the param-rect) --> rectBottomGlow.X = rect.X + (... calculation ...)

4) you may take a look at the glow drawn in the function 'drawButtonGlowUpperHalfBottom'. As you can see in the picture the glow looks very round. Much more than on the office AppButton.

Hope, I can support you a bit in doing this conversion
Waescher

[Phil Wright]

Thanks for the feedback. I will be looking at integrating the code once I have finished documentating all the recent changes. So it will be another week before I get a chance to look into it.