Applying Visual Styles in WinForms

May 22 2012

When it comes to styling Windows Forms we kept it simple. Studio for WinForms has several built-in visual styles that mimic popular Microsoft application UIs. You can set a visual style by just setting one property on any control. When you set the VisualStyle property on a parent control it will apply to all children that support that style as well. There are several tips and important things to know about visual styles in Studio for WinForms. Continue reading and you’ll be on your way to professional styling in just seconds! Tip #1: Use C1RibbonForm as your MainForm. It supports all of the visual styles and will be a parent to every control in your application. It also provides a completely styled frame that gives your app that professional look-and-feel. To use the C1RibbonForm class follow these steps.

Add a reference to C1.Win.C1Ribbon, or drop a C1Ribbon control to your page to add the reference automatically.
In your Form’s code-behind, replace the inherited class name with C1.Win.C1Ribbon.C1RibbonForm like this.


using C1.Win.C1Ribbon;  

public partial class MainForm : C1RibbonForm  
{  
    public MainForm()  
    {  
        InitializeComponent();  
    }  
}

Now your Form is of type C1RibbonForm and has support for the VisualStyle property. Fill your form with some ComponentOne controls and set the VisualStyle property to see this in action. Tip #2: If you’d like to give your users the option to change the visual style, you can easily persist this information using a user setting. It’s very easy to add a user setting to your project. Open up your application properties page, and on the Settings tab add a property named “VisualStyle.” Then browse to C1.Win.C1Ribbon.VisualStyle for the Type column. It’s then very simple to access, modify and save the setting in code.


// change visual style at runtime and save  
MyProject.Properties.Settings.Default.VisualStyle = C1.Win.C1Ribbon.VisualStyle.Office2007Black;  
MyProject.Properties.Settings.Default.Save();

If and how you allow the user to change the style is up to you. Tip #3: Use C1Ribbon and/or C1StatusBar to frame your application. Of course, only use C1Ribbon if it makes sense in your application, but C1StatusBar is a great alternative to the standard StatusStrip. In addition to providing built-in visual styles, Studio for WinForms also includes several controls that mimic parts of popular Microsoft applications. For instance, C1NavBar is a navigation bar identical to the one used in Microsoft Outlook. C1Ribbon makes it easy to duplicate the Office 2007 and 2010 Ribbon UI in your applications. Tip #4: You can further customize the style of some individual controls depending on what styling capabilities are provided. Below are some notes on creating custom visual styles for certain controls.

C1Chart – You can adjust the background colors and gradients of all the chart areas including legend, plot area. Use the ColorGeneration property to change the color palette.
C1Editor – The provided toolbars use the standard ToolStrip control so they do not support the ComponentOne Visual Styles. You can use C1Ribbon or C1Toolbar to create your own toolbars. We provide a sample called C1WordX.
C1FlexGrid – Adjust the colors using the Styles collection of properties.
C1NavBar – Use the Theme properties to set your own colors.
C1PrintPreviewControl – This control uses standard toolstrip so it does not support the ComponentOne visual styles. You can replace the built-in toolstrip and tabs with your own custom one using C1Toolbar and C1DockingTab that do support visual styles. We provide a sample called RibbonPreview.
C1Scheduler – Under the (Theme) property you can choose (Customize…) to open a special Visual Style editor for this control.
C1TrueDBGrid – Like C1FlexGrid, you can adjust all grid style through the Styles collection editor.

By using the built-in visual styles you can turn your battleship grey applications into beautiful, professional looking Office applications in mere seconds!

Greg Lutz