Char Ribbon

• Download sample and source code - 66.95 KB

Background

Hello! This is my first article, and I'm a medium-level beginner in C#. I had nothing to do one day so I thought it would be nice to create a basic Office 2007 Style Ribbon with all 3 styles. I hope you enjoy this. I can't seem to render some of the ribbons though, and it usually flickers when you mess with it. This contains a couple of controls, so I'll walk you through some of them.

The CharCheckBox

The CharCheckBox was an easy control to render. To create the DarkBlue outline when it is hovered on, we need to guess the X and Y coordinates of the checkbox itself. We also need to guess the width and height of the checkbox. The example in code 1 does this. Code 2 gives us an 'orangish' effect when we hover over the control as well.

// Code 1
Pen p = new Pen(Color.MidnightBlue);
Rectangle rect = new Rectangle(0, 1, 12, 12);
g.DrawRectangle(p, rect);
p.Dispose();

// Code 2
LinearGradientBrush HLin = new LinearGradientBrush(
new Point(1, 0),
new Point(0, 1),
Color.FromArgb(59, Color.Orange.R, Color.Orange.G, Color.Orange.B),
Color.FromArgb(59, Color.OrangeRed.R, Color.OrangeRed.G, Color.OrangeRed.B));
Graphics g = this.CreateGraphics();
Rectangle HRect = new Rectangle(0, 1, 12, 12);
g.FillRectangle(HLin, HRect);

This is very similar to the CharCheckBox. Except this time, we have to draw our 'radiobutton'. The source code in code 3 takes care of this.

// Code 3
Graphics g = this.CreateGraphics();
g.SmoothingMode = SmoothingMode.AntiAlias;
if (this.Checked)
{
Pen BrPen = new Pen(Color.FromArgb(74, 107, 150));
g.FillEllipse(BrPen.Brush, 2, 4, 7, 7);
BrPen.Dispose();
}

The RibbonPanelTab

This is where things get cool. We have an enum called "Style". This enum takes care of all three styles for us, which include: Office2007Black, Office2007Blue & Office2007Silver. To do this is simple, all we do is make a switch containing each style, and 3 float and Color arrays for our style blend (LinearGradientBrush lg is our target to blend). The code below shows how this works:

Color[] Silvercol = new Color[] { 
Color.FromArgb(238, 241, 246), Color.FromArgb(226, 229, 234),
Color.FromArgb(238, 244, 244) };
float[] Silverpos = new float[] { 0.0f, 0.4f, 1.0f };
Color[] SBlue = new Color[] {
Color.FromArgb(205, 210, 217), Color.FromArgb(190, 196, 204),
Color.FromArgb(228, 234, 235) };
float[] Bluepos = new float[] { 0.0f, 0.4f, 1.0f };
Color[] col = new Color[] { 
Color.FromArgb(220, 231, 244), Color.FromArgb(204, 220, 238),
Color.FromArgb(216, 232, 245) };
float[] pos = new float[] { 0.0f, 0.4f, 1.0f };
ColorBlend blend = new ColorBlend();
if (Style == e_Style.Office2007Blue)
{
blend.Colors = col;
blend.Positions = pos;
}
if (Style == e_Style.Office2007Black)
{
blend.Colors = SBlue;
blend.Positions = Bluepos;
}
if (Style == e_Style.Office2007Silver)
{
blend.Colors = Silvercol;
blend.Positions = Silverpos;
}
LinearGradientBrush lg = new LinearGradientBrush(
this.ClientRectangle, Color.White, Color.White, (float)90, false);
lg.InterpolationColors = blend;
e.FillRectangle(lg, this.ClientRectangle);

To get our arc shape, we simply draw our round rectangle as a GraphicsPath (see below).

// Round Rectangle
float radius2 = new float(); radius2 = (float)2;
float X2 = new float(); X2 = 0;
float Y2 = new float(); Y2 = this.Height / 2 + this.Height / 2 - 15;
float width2 = new float(); width2 = this.Width - 1;
float height2 = new float(); height2 = 15;
GraphicsPath gp3 = new GraphicsPath();
gp3.AddLine(X2 + radius2, Y2, X2 + width2 - (radius2 * 2), Y2);
gp3.AddArc(X2 + width2 - (radius2 * 2), Y2, radius2 * 2, radius2 * 2, 270, 90);
gp3.AddLine(X2 + width2, Y2 + radius2, X2 + width2, Y2 + height2 - (radius2 * 2));
gp3.AddArc(X2 + width2 - (radius2 * 2), Y2 + 
	height2 - (radius2 * 2), radius2 * 2,radius2 * 2, 0, 90);
gp3.AddLine(X2 + width2 - (radius2 * 2), Y2 + height2, X2 + radius2, Y2 + height2);
gp3.AddArc(X2, Y2 + height2 - (radius2 * 2), radius2 * 2, radius2 * 2, 90, 90);
gp3.AddLine(X2, Y2 + height2 - (radius2 * 2), X2, Y2 + radius2);
gp3.AddArc(X2, Y2, radius2 * 2, radius2 * 2, 180, 90);
gp3.CloseFigure();

and then Fill it:

Pen arcpen = new Pen(Color.Transparent);
switch (this.Style)
{
case e_Style.Office2007Blue:
LinearGradientBrush Styleblue = new LinearGradientBrush(
this.ClientRectangle,
Color.FromArgb(194, 216, 240),
Color.FromArgb(194, 217, 240), (float)90, false);
arcpen.Brush = Styleblue;
break;
case e_Style.Office2007Black:
LinearGradientBrush StyleBlack = new LinearGradientBrush(
this.ClientRectangle,
Color.FromArgb(184, 185, 185),
Color.FromArgb(158, 160, 160), (float)90, false);
arcpen.Brush = StyleBlack;
break;
case e_Style.Office2007Silver:
LinearGradientBrush StyleSilver = new LinearGradientBrush(
this.ClientRectangle,
Color.FromArgb(222, 226, 238),
Color.FromArgb(197, 201, 211), (float)90, false);
arcpen.Brush = StyleSilver;
break;
}
e.FillPath(arcpen.Brush, gp3);

The CharStatusStrip

Almost the same as the ribbonPaneltab, except we ain't drawing an arc, and we are using different blend colours.

The End

Yeah, there's the ribbon I could discuss but it's basically the same as ribbonPaneltab, but with a tabcontrol and we are rendering tabs. I hope you've enjoyed this, it is free to edit, contribute and add controls to the control collection.

History

• March 1^st 2008 - Release