Char Ribbon

• Download CharRibbonSample and Source code - 121.11 KB

Background

Hello! This is my first article, and I'm a medium-level begginer at C#. I has 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 ribbon 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 its self. We also need to guess the width and Height of the checkbox. Example in Code 1 does this. Code 2 gives us '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);

Very similiar to the CharCheckBox. Except this time we have to draw our 'radiobutton'. 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 a 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 out 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 simpley draw our roundrectangle as a GraphicsPath(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 controlcollection.

History

March 1st 2008 - Release.