# Visual Styles

Learn more about the different predefined visual styles supported in C1Scheduler control.

## Content

The [C1Schedule](/componentone/docs/win/online-schedule/) and the [C1Calendar](/componentone/docs/win/online-schedule/) controls support Visual Styles. In addition to Visual Styles, Scheduler for WinForms also supports **C1ThemeController** so you can choose from many predefined themes using [Themes for WinForms](https://developer.mescius.com/componentone/docs/win/online-themes/overview.html).

## .NET Core

In .NET, Scheduler and Calendar provide three basic types of Visual Styles such as Default, System and Custom.

| **Visual Styles** | **Description** |
| ------------- | ----------- |
| Default | Uses the predefined theme of the Default type. |
| System | Uses the current desktop settings. |
| Custom | Uses Custom visual style. |

You can access the themes in different Visual Styles using the code snippet below:

```csharp
c1Schedule1.Theme = ScheduleTheme.System;
c1Calendar1.Theme = CalendarTheme.System;
```

The Calendar control with default Visual Style looks like this:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/calendar-default-themes.png)

The Schedule control with default Visual Style looks like this:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/scheduler-default-theme.png)

The Calendar control with System Visual Style looks like this:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/calendar-system.png)

The Schedule control with System Visual Style looks like this:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/system-theme.png)

Also, in .Net, the Scheduler control provides the **ScheduleTheme** that can be edited from the property grid as depicted below:
![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/theme-scheduler-propertygrid.png)
With the ScheduleTheme class, you can change the Appointment, AppointmentCornerRadius, BaseFont, CurrentPalette, CurrentTime, CurrentTime, VerticalDay, ViewDayName, DayViewHeader, DayViewHeaderSelected etc.

The following image depicts the Scheduler control with the following properties modified using **ScheduleTheme** in the Properties grid:

| **Properties** | **Values** |
| ---------- | ------ |
| Appointment BackColor2 | OrangeRed |
| BaseFont | Rockwell |
| Button | Coral |
| Common BackColor | Lavender |
| MonthDayHeader | PowderBlue |

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/scheduler-themes.png)

Also, in .Net Core, the Calendar control provides the **CalendarTheme** that can be edited from the property grid as depicted below:
![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/calendar-propertygrid.png)

With the CalendarTheme class, you can change the BaseFont, Day, DayBold, DayHeader, DaySelected, DaySelectedBold, DayToday, DayTrail, DayWeekend, Header properties etc.

The following image depicts the Calendar control with the following properties modified using CalendarTheme in the Properties grid:

| Properties | Values |
| ---------- | ------ |
| BaseFont | Pristina |
| Button | Red |
| Common Backcolor | LemonChiffon |
| Day BackColor | PeachPuff |

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/calendar-themes.png)

## .NET FRAMEWORK

There are several predefined Visual Styles for .NET framework:

| Visual Style | Description |
| ------------ | ----------- |
| System | Uses the current desktop settings. |
| Office 2007 Black | Mimics the Microsoft Office 2007 Black theme. |
| Office 2007 Blue | Mimics the Microsoft Office 2007 Blue theme. |
| Office 2007 Silver | Mimics the Microsoft Office 2007 Silver theme. |
| Office 2010 Black | Mimics the Microsoft Office 2010 Black theme. |
| Office 2010 Blue | Mimics the Microsoft Office 2010 Blue theme. |
| Office 2010 Silver | Mimics the Microsoft Office 2010 Silver theme. |

Visual Styles can be set in the smart designers, smart tags, or in code. You cannot edit predefined Visual Styles, but you can create new Visual Styles. At design-time, Visual Styles can be saved to an XML file or previously saved Visual Styles can be loaded.

>type=note
> **Note**: Clicking the **Save** button will save all of the custom Visual Styles added to the Visual Style dialog box to an XML file. Clicking the **Load** button will load all of the custom Visual Styles in the XML file.**System Visual Style**

The following image displays the System Visual Style:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/system-netframework.png)

**Office 2007 Black Visual Style**

The following image displays the Office 2007 Black Visual Style:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/office-2007black.png)

**Office 2007 Blue Visual Style**

The following image displays the Office 2007 Blue Visual Style:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/office-2007blue.png)

**Office 2007 Silver Visual Style**

The following image displays the Office 2007 Silver Visual Style:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/office-2007silver.png)

**Office 2010 Black Visual Style**

The following image displays the Office 2010 Black Visual Style:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/office-2010black.png)

**Office 2010 Blue Visual Style**

The following image displays the Office 2010 Blue Visual Style:

![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/office-2010bue.png)

**Office 2010 Silver Visual Style**
The following image displays the Office 2010 Silver Visual Style:
![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/office-2010silver.png)

## Predefined Styles

You can define a Visual Style by setting the **VisualStyle** property for both the **Calendar** and **Schedule** controls either in the smart designers, tasks menu, or in code. For descriptions of the available Visual Styles, see [Visual Styles](/componentone/docs/win/online-schedule/visualstyles).

**In the Smart Designer**
To set the **VisualStyle** property using the smart designers, complete the following steps:

1. On the **C1Calendar Smart Designer**, click the **Visual Style** button. For more information on accessing the **C1Calendar Smart Designer**, see [C1Calendar Smart Designer](/componentone/docs/win/online-schedule/concepts/scheduer-views/designtimesupport/schedulerforwinforms5/c1calendarsmartdesig).
2. In the **Visual Style** dialog box, select **Office 2007 Black** in the drop-down box.
    ![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/add-copy-visualstyle.png)
3. Close the dialog box.
4. On the **C1Schedule Smart Designer**, click the **Visual Style** button. For more information on accessing the **C1Schedule Smart Designer**, see [C1Schedule Smart Designer](/componentone/docs/win/online-schedule/concepts/scheduer-views/designtimesupport/schedulerforwinforms5/c1schedulesmartdesig).
5. In the **Visual Style** dialog box, select **Office 2007 Black** in the drop-down box.
6. Close the dialog box.

**In the Tasks menu**
To set the **VisualStyle** property using the Tasks menu, complete the following steps:

1. Open the **C1Calendar Tasks** menu. For more information on accessing the **C1Calendar Tasks** menu, see [C1Calendar Tasks Menu](/componentone/docs/win/online-schedule/concepts/calendar-control/c1calendartasksmenu).
2. Click the drop-down arrow in the **Visual Style** box, and select **Office 2007 Black**.
3. Close the **C1Calendar Tasks** menu.
4. Open the **C1Schedule Tasks** menu. For information on accessing the **C1Schedule Tasks** menu, see [C1Schedule Tasks Menu](/componentone/docs/win/online-schedule/concepts/scheduer-views/designtimesupport/schedulerforwinforms4/c1scheduletasksmenu).
5. Click the drop-down arrow in the **Visual Style** box, and select **Office 2007 Black**.
6. Close the **C1Schedule Tasks** menu.

**In Code**
Add the following code to the **Form\_Load** event to set the visual styles for the C1Calendar and C1Schedule controls to [Office2007Black](/componentone/docs/win/online-schedule/):

```csharp
this.c1Calendar1.VisualStyle = C1.Win.C1Schedule.UI.VisualStyle.Office2007Black;
```

## Custom Styles

### Creating Custom Style

To create a custom Visual Style, add a copy of the selected Visual Style in the **Visual Style** dialog box:

>type=note
> **Note**: Selecting **Customize** from the drop-down menu in the **C1Schedule Tasks** menu, **C1Calendar Tasks** menu, or the Properties window opens the **Visual Style** dialog box.

1. In the **Visual Style** dialog box, click the **Add a Copy** button to add a copy of the selected Visual Style.
    ![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/add-copy-visualstyle.png?caption=A%20new%20visual%20style%20is%20created%20based%20on%20the%20predefined%20Office%202007%20Blue%20theme.)
2. Enter a new name for the Visual Style in the text box or leave the name as (modified).
    ![](https://cdn.mescius.io/document-site-files/images/675b9aff-7616-4324-81ac-58e410fb9531/images/add-copy-visualstyle-my-theme.png)
3. The new Visual Style will now appear in the **Visual Style** drop-down list.

### Saving Custom Style

To save a custom Visual Style, click the **Save** button in the **Visual Style** dialog box.

>type=note
> **Note**: This will save all of the custom Visual Styles added to the Visual Style dialog box to an XML file.

## Load Styles

To import a saved Visual Style, click the **Load** button in the **Visual Style** dialog box.

>type=note
> **Note**: This will load all of the custom Visual Styles in the XML file.

## Deleting Styles

To delete a custom Visual Style, click the **Delete** button in the **Visual Style** dialog box.

>type=note
> **Note**: This will delete the current Visual Style. Predefined Visual Styles cannot be deleted.