Click here to Skip to main content
Click here to Skip to main content

Char Ribbon

, 1 Mar 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
A simple Ribbon Control Library
CharRibbonSample

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 1st 2008 - Release

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bubblez

Unknown
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 Pinmemberdezio17-Jun-13 11:43 
GeneralMy vote of 1 PinmemberSarnaaa7-May-10 6:06 
GeneralMy vote of 1 PinmemberRiku Hayashi8-Dec-09 14:22 
GeneralGood Start PinmemberDerek Bartram7-Mar-08 12:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141216.1 | Last Updated 2 Mar 2008
Article Copyright 2008 by Bubblez
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid