In the previous step you set up the application's user interface and added a C1DateTimePicker control to your application. In this step you will modify the appearance of the control.
Complete the following steps:
1. Add Height="30" to the <c1datetime:C1DateTimePicker> tag to determine height of the control. The XAML markup appears as follows:
<c1:C1DateTimePicker Height="30">
2. Add Width="300" to the <c1datetime:C1DateTimePicker> tag to determine the width of the control. The XAML markup appears as follows:
<c1:C1DateTimePicker Height="50" Width="300">
3. Add TimeFormat="ShortTime" to the <c1datetime:C1DateTimePicker> tag to change the format of the time to a short format consisting of only hours and minute spaces. The XAML markup appears as follows:
<c1:C1DateTimePicker Height="50" Width="300" TimeFormat="ShortTime">
4. Add DateFormat="Long" to the <c1datetime:C1DateTimePicker> tag to change the format of the date to a longer format that includes the weekday. The XAML markup appears as follows:
<c1:C1DateTimePicker Height="50" Width="300" TimeFormat="ShortTime" DateFormat="Long" Name="c1DateTimePicker1" >
5. Add EditMode="DateTime" to the <c1datetime:C1DateTimePicker> tag so that both the date and time appear in the C1DateTimePicker. The XAML markup appears as follows:
<c1:C1DateTimePicker Height="50" Width="300" TimeFormat="ShortTime" DateFormat="Long" Name="c1DateTimePicker1" EditMode="DateTime">
6. You can add a TextBlock to the C1DateTimePicker.Header to put a label over the C1DateTimePicker:
<c1:C1DateTimePicker.Header>
<TextBlock Text="Edit date and time" Style="{StaticResource PageSimpleTextBlock}"/>
</c1:C1DateTimePicker.Header>
In this step, you customized the appearance of the C1DateTimePicker control. In the next step, you will run the project and experience the functionality of the control.