This project is read-only.

How to Make a New Theme, Skin for this Ribbon Programmatically



Default Theme


Black Theme


Purple Theme


Note: A Theme Builder is included in the Demo App, you can obtain it at Download. You can Build new Theme easily with Theme Builder. In new released, Ribbon (13 Jan 2013), Ribbon can write and read a theme file.

1. To make your own color theme, create another class and inherit RibbonProfesionalRendererColorTable.

2. Change all the color objects into your desired colors.

Example: (the first five colors have been filled for your reference).In this example, we'll name the new theme MyCoolThemeSkin.
using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;

namespace System.Windows.Forms
{
    public class MyCoolThemeSkin
        : RibbonProfesionalRendererColorTable
    {
        public MyCoolThemeSkin()
        {
            #region Fields

            OrbDropDownDarkBorder = Color.Yellow;
            OrbDropDownLightBorder = Color.FromKnownColor(KnownColor.WindowFrame);
            OrbDropDownBack = Color.FromName("Red");
            OrbDropDownNorthA = FromHex("#C2FF3D");
            OrbDropDownNorthB = Color.FromArgb(201, 100, 150);
            OrbDropDownNorthC = 
            OrbDropDownNorthD = 
            OrbDropDownSouthC = 
            OrbDropDownSouthD = 
            OrbDropDownContentbg = 
            OrbDropDownContentbglight = 
            OrbDropDownSeparatorlight = 
            OrbDropDownSeparatordark = 

            Caption1 = 
            Caption2 = 
            Caption3 = 
            Caption4 = 
            Caption5 = 
            Caption6 = 
            Caption7 = 

            QuickAccessBorderDark = 
            QuickAccessBorderLight = 
            QuickAccessUpper = 
            QuickAccessLower = 

            OrbOptionBorder = 
            OrbOptionBackground = 
            OrbOptionShine = 

            Arrow = 
            ArrowLight = 
            ArrowDisabled = 
            Text = 

            RibbonBackground = 
            TabBorder = 
            TabNorth = 
            TabSouth = 
            TabGlow = 
            TabText = 
            TabActiveText = 
            TabContentNorth = 
            TabContentSouth = 
            TabSelectedGlow = 
            PanelDarkBorder = 
            PanelLightBorder = 
            PanelTextBackground = 
            PanelTextBackgroundSelected = 
            PanelText = 
            PanelBackgroundSelected = 
            PanelOverflowBackground = 
            PanelOverflowBackgroundPressed = 
            PanelOverflowBackgroundSelectedNorth = 
            PanelOverflowBackgroundSelectedSouth = 

            ButtonBgOut = 
            ButtonBgCenter = 
            ButtonBorderOut = 
            ButtonBorderIn = 
            ButtonGlossyNorth = 
            ButtonGlossySouth = 

            ButtonDisabledBgOut = 
            ButtonDisabledBgCenter = 
            ButtonDisabledBorderOut = 
            ButtonDisabledBorderIn = 
            ButtonDisabledGlossyNorth = 
            ButtonDisabledGlossySouth = 

            ButtonSelectedBgOut = 
            ButtonSelectedBgCenter = 
            ButtonSelectedBorderOut = 
            ButtonSelectedBorderIn = 
            ButtonSelectedGlossyNorth = 
            ButtonSelectedGlossySouth = 

            ButtonPressedBgOut = 
            ButtonPressedBgCenter = 
            ButtonPressedBorderOut = 
            ButtonPressedBorderIn = 
            ButtonPressedGlossyNorth = 
            ButtonPressedGlossySouth = 

            ButtonCheckedBgOut = 
            ButtonCheckedBgCenter = 
            ButtonCheckedBorderOut = 
            ButtonCheckedBorderIn = 
            ButtonCheckedGlossyNorth = 
            ButtonCheckedGlossySouth = 

            ItemGroupOuterBorder = 
            ItemGroupInnerBorder = 
            ItemGroupSeparatorLight = 
            ItemGroupSeparatorDark = 
            ItemGroupBgNorth = 
            ItemGroupBgSouth = 
            ItemGroupBgGlossy = 

            ButtonListBorder = 
            ButtonListBg = 
            ButtonListBgSelected = 

            DropDownBg = 
            DropDownImageBg = 
            DropDownImageSeparator = 
            DropDownBorder = 
            DropDownGripNorth = 
            DropDownGripSouth = 
            DropDownGripBorder = 
            DropDownGripDark = 
            DropDownGripLight = 

            SeparatorLight = 
            SeparatorDark = 
            SeparatorBg = 
            SeparatorLine = 

            TextBoxUnselectedBg = 
            TextBoxBorder = 

            #endregion
        }     

        public Color FromHex(string hex)
        {
            if (hex.StartsWith("#"))
                hex = hex.Substring(1);

            if (hex.Length != 6) throw new Exception("Color not valid");

            return Color.FromArgb(
                int.Parse(hex.Substring(0, 2), System.Globalization.NumberStyles.HexNumber),
                int.Parse(hex.Substring(2, 2), System.Globalization.NumberStyles.HexNumber),
                int.Parse(hex.Substring(4, 2), System.Globalization.NumberStyles.HexNumber));
        }   
    }
}

3. Redraw the ribbon:

Theme.ColorTable = new MyCoolThemeSkin();
ribbon1.Refresh();
this.Refresh();

Examples of changing a few colors:

Below shows an example of changing color of a few elements of the ribbon.
We create 3 classes. Namely, RibbonRed, RibbonGreen, RibbonYellow.

using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;

namespace System.Windows.Forms
{
    public class RibbonRed : RibbonProfesionalRendererColorTable
    {
        public RibbonRed()
        {
            ButtonSelectedBgOut = Color.Red;
            ButtonSelectedBgCenter = Color.Red;
            ButtonSelectedBorderOut = Color.Red;
            ButtonSelectedBorderIn = Color.Red;
            ButtonSelectedGlossyNorth = Color.Red;
            ButtonSelectedGlossySouth = Color.Red;
        }
    }

    public class RibbonGreen : RibbonProfesionalRendererColorTable
    {
        public RibbonGreen()
        {
            ButtonSelectedBgOut = Color.Green;
            ButtonSelectedBgCenter = Color.Green;
            ButtonSelectedBorderOut = Color.Green;
            ButtonSelectedBorderIn = Color.Green;
            ButtonSelectedGlossyNorth = Color.Green;
            ButtonSelectedGlossySouth = Color.Green;
        }
    }

    public class RibbonYellow : RibbonProfesionalRendererColorTable
    {
        public RibbonYellow()
        {
            ButtonSelectedBgOut = Color.Yellow;
            ButtonSelectedBgCenter = Color.Yellow;
            ButtonSelectedBorderOut = Color.Yellow;
            ButtonSelectedBorderIn = Color.Yellow;
            ButtonSelectedGlossyNorth = Color.Yellow;
            ButtonSelectedGlossySouth = Color.Yellow;
        }
    }
}

Changing the color of the ribbon:

private void ChangeRibbonButtonColor(string newcolor)
{
    if (newcolor == "Red")
    {
        Theme.ColorTable = new RibbonRed();
    }
    else if (newcolor == "Green")
    {
        Theme.ColorTable = new RibbonGreen();
    }
    else if (newcolor == "Yellow")
    {
        Theme.ColorTable = new RibbonYellow();
    }
    ribbon1.Refresh();
    this.Refresh();
}

Last edited Nov 23, 2013 at 12:22 PM by adriancs, version 5

Comments

No comments yet.