Are there any samples or documentation on how to draw the background for the
Office Button (i.e., the button that replaces the File menu) in Office 2007?
I really like the glossy look of this item in Office 2007 and I want to
implement a similar looking item in my app.

Thanks for any help!
Lance

Hello ljlevend2,

I don't think there are any samples as such, but there's a guideline that
Microsoft makes available to those programmers wishing to reproduce any
part of the Office 2007 UI in their applications. This comes with a
license that you have to agree to (AFAIK there's no way around that, note
I'm not a lawyer). Of course you still have to write the code, but they
tell you pretty precisely what the result has to be.

Having said all the above, if you're actually looking at an application
you're writing (as opposed to creating your own Office 2007 UI library),
you should probably use one of the 3rd party libraries that already have
all this functionality. Even the drawing code for that button alone is
pretty complex, and it won't make your application look anything like
Office 2007 without all the other elements of the Ribbon UI.

I work for Developer Express, so it may not surprise you that I would
recommend XtraBars as a 3rd party product that provides this functionality
(http://www.devexpress.com/Products/N...ars/Index.xml). But
my more general recommendation is to look for any such 3rd party product
instead of writing all that code yourself.


Oliver Sturm
--
http://www.sturmnet.org/blog

Lance,
I've been looking, but have not found any. All the examples I've found are
how to do it in PhotoShop, such as this one:

http://www.pslover.com/click/160

My thinking is to translate the PhotoShop instructions into the equivalent
GDI+ calls. Of course this means figuring out how to do "Inner glow", "Inner
Shadow" and other effects. From what I've figured out so far it needs to be
a "multi-layer" operation, fill the back ground, fill glow highlight, fill
shadow highlight, fill the...

I expect that companies such as Developer Express & others that offer an
Ribbon implementation have figured out the GDI+ calls to do the gradient.
Understandable they may choose not to share this intellectual property or
they share it for a fee$ with restrictions. Alternatively they are simply
relying on an image for the background; causing you to use a tool such as
PhotoShop to draw the background. IMHO relying on an image for the
background hinders a scalable UI (read changing DPI of your display).

Code Plex has a project that suggests the Ribbon, but I'm not sure if they
offer the Office Button background.

http://www.codeplex.com/Project/Proj...TagName=Ribbon

--
Hope this helps
Jay B. Harlow [MVP - Outlook]
..NET Application Architect, Enthusiast, & Evangelist
T.S. Bradley - http://www.tsbradley.net


"ljlevend2" <ljlevend2 (AT) nospam (DOT) nospam> wrote

I've created a routine to draw GelDrops which you may be able to modify to
suit your needs.

The routine is VB.net and I've not translated to C# as I don't need it in
C#.

It would be nice to add a Glass distortion routine for a Background Image,
but that's something I've not tried to implement as yet.

\\\
Public Shared Sub DrawGelDrop(ByVal g As Graphics, _
ByVal bounds As RectangleF, _
ByVal colorIn As Drawing.Color, _
ByVal shadow As Boolean)

Dim scale As New SizeF(bounds.Width / 100, bounds.Height / 100)

g.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias

Dim gelPath As New Drawing2D.GraphicsPath

If shadow Then
gelPath.AddEllipse(bounds)
bounds.Width -= 3 * scale.Width
bounds.Height -= 3 * scale.Height
gelPath.AddEllipse(bounds)

Dim shadowBrush As New SolidBrush(Color.FromArgb(64, Color.Black))
g.FillPath(shadowBrush, gelPath)
shadowBrush.Dispose()
Else
gelPath.AddEllipse(bounds)
End If

Dim gelBrush As New Drawing2D.PathGradientBrush(gelPath)
gelBrush.CenterPoint = New PointF(bounds.Left + (bounds.Width / 2), _
bounds.Bottom + (33 * scale.Height))
gelBrush.CenterColor = LightenColor(colorIn, 60)
gelBrush.SetSigmaBellShape(0.96)

Dim gelColor As Color = colorIn
If gelColor.GetBrightness >= 0.8 Then
gelColor = ExtendedDrawing.DarkenColor(gelColor, 16)
End If

gelBrush.SurroundColors = New Color() {gelColor}
g.FillEllipse(gelBrush, bounds)
gelBrush.Dispose()
gelPath.Dispose()

Dim hiliteBounds As RectangleF = bounds
hiliteBounds.Height -= bounds.Height / 2
hiliteBounds.Inflate(-16 * scale.Width, -3 * scale.Height)

Dim hiliteBrush As New Drawing2D.LinearGradientBrush(hiliteBounds, _
LightenColor(gelColor, 80), color.Empty, _
Drawing2D.LinearGradientMode.Vertical)

hiliteBounds.Height -= 1 * scale.Height

Dim b As New Drawing2D.Blend(2)
b.Positions = New Single() {0, 0.9, 1}
b.Factors = New Single() {0, 1, 1}
hiliteBrush.Blend = b

g.FillEllipse(hiliteBrush, hiliteBounds)
hiliteBrush.Dispose()

Dim linePen As New Pen(ExtendedDrawing.DarkenColor(colorIn, 8))
g.DrawEllipse(linePen, bounds)
linePen.Dispose()

End Sub
////

.... and the two helper methods in ExtendedDrawing which Lighten/Darken the
color whilst preserving Alpha.

\\\
Public Shared Function LightenColor(ByVal colorIn As Color, _
ByVal percent As Single) As Color
'This method returns White if you lighten by 100%
If percent < 0 OrElse percent > 100 Then
Throw New ArgumentOutOfRangeException("percent")
End If

Dim a, r, g, b As Int32

a = colorIn.A
r = colorIn.R + CInt(((255 - colorIn.R) / 100) * percent)
g = colorIn.G + CInt(((255 - colorIn.G) / 100) * percent)
b = colorIn.B + CInt(((255 - colorIn.B) / 100) * percent)

Return Color.FromArgb(a, r, g, b)
End Function

Public Shared Function DarkenColor(ByVal colorIn As Color, _
ByVal percent As Single) As Color
'This method returns Black if you Darken by 100%

If percent < 0 OrElse percent > 100 Then
Throw New ArgumentOutOfRangeException("percent")
End If

Dim a, r, g, b As Int32

a = colorIn.A
r = colorIn.R - CInt((colorIn.R / 100) * percent)
g = colorIn.G - CInt((colorIn.G / 100) * percent)
b = colorIn.B - CInt((colorIn.B / 100) * percent)

Return Color.FromArgb(a, r, g, b)
End Function
///

--
Mick Doherty
http://dotnetrix.co.uk/nothing.html


"Jay B. Harlow [MVP - Outlook]" <Jay_Harlow_MVP (AT) tsbradley (DOT) net> wrote in
message news:008F6F33-8DA2-4BBE-9338-4D6BA4D6B8B4 (AT) microsoft (DOT) com...

Thank you all so much for your feedback. I worked on it a bit and figured
out a solution that looks almost identical to the Office Button. Jay, you
were right that it requires a multi-layer approach.

Special thanks to Mick for sharing your code. That was very generous.

Best regards,
Lance