# C1TimeEditor Quick Start

## Content



The following quick start guide is intended to get you up and running with the C1TimeEditor control. In this quick start, you'll start in Visual Studio to create a new project, add a **C1TimeEditor** control to your application, and customize the **C1TimeEditor** control.

### Create an Application with TimeEditor control

1.  In Visual Studio, select **File | New | Project**.
2.  In the **New Project** dialog box, select **WPF Application**.
3.  Enter a **Name** and **Location** for your project and click **OK** to create the new application.
4.  In the Toolbox, double-click the **C1TimeEditor** icon to add the **C1TimeEditor** control to the WPF application.

You have completed the first step of the **C1TimeEditor** quick start. In this step, you created a project and added a **C1TimeEditor** control to it. In the next step, you'll customize the control.

### Customize the TimeEditor control

To customize the C1TimeEditor control, set the following properties from the **Properties** window:

*   Set the <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Format.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Format.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1TimeEditor.Format" data-popup-theme="ui-tooltip-green qtip-green">C1TimeEditor.Format</span> property to **ShortTime**. This will change the time format of the control so that it shows only hours and minutes.
*   Set the <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Increment.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Increment.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1TimeEditor.Increment" data-popup-theme="ui-tooltip-green qtip-green">C1TimeEditor.Increment</span> property to "01:00:00". This will cause the value of the control to change by one hour each time a user clicks the spin button.
*   Set the <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Interval.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Interval.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1TimeEditor.Interval" data-popup-theme="ui-tooltip-green qtip-green">C1TimeEditor.Interval</span> property to "1000". This will cause the control to hesitate for one second before changing the value of the control.
*   Set the <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Value.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-datetimeeditors/dotnet-api/C1.WPF.DateTimeEditors/C1.WPF.DateTimeEditors.C1TimeEditor.Value.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1TimeEditor.Value" data-popup-theme="ui-tooltip-green qtip-green">C1TimeEditor.Value</span> property to "17:00:00".

Now that you've customized the application, you can run the project and observe the run time behaviors of the control.

### Run the Application

1.  Press **F5** (or **Project | Run** in Blend) to run the project. Observe that it loads with a time value of 5:00 p.m. and that the control only shows hours and minutes.
    
    ![](https://cdn.mescius.io/document-site-files/images/b827ed78-bea0-4378-af62-5f467cc00dcc/c1timeeditor_graphics/quickstart/step3of3_loadwith5pm.png)
    
2.  Click the decrease time button ![](https://cdn.mescius.io/document-site-files/images/b827ed78-bea0-4378-af62-5f467cc00dcc/step_3_of_3-_running_the_application2_files/image001.png) and observe that time value decreases by one hour to 4:00 p.m.
    
    ![](https://cdn.mescius.io/document-site-files/images/b827ed78-bea0-4378-af62-5f467cc00dcc/c1timeeditor_graphics/quickstart/step3of3_switchto4pm.png)
    
3.  Click and hold the increase time button so that the control will spin through values. Observe that the control waits one second between value changes.

Congratulations – you have completed the quick start. Now that you have finished the quick start, we recommend that you visit the [Working with C1TimeEditor](/componentone/docs/wpf/online-datetimeeditors/timeeditor/Working_with_C1TimeEditor) or [C1TimeEditor Task-Based Help](/componentone/docs/wpf/online-datetimeeditors/timeeditor/C1TimeEditor_Task-Based_Help) topics.