In the previous step, you created a UWP-style application with a C1TimeSelector control. In this step, you will modify the appearance of the control.

Complete the following steps:

1. Locate the Brush Category in your application's Properties window and click to display the options. You can set custom colors for the following properties: Background, BorderBrush, and Foreground.  You can also set the Linear Gradient for the Background.

You can also change the appearance of your C1DateTimeSelector control by inserting the following XAML markup into the <Xaml:C1DateTimeSelector/> tag. Note that this XAML markup includes the <Xaml:C1TimeSelector.Background> tag: 

Markup

Copy Code

<Xaml:C1TimeSelector HorizontalAlignment="Left" VerticalAlignment="Top" Margin="22,55,0,0" Width="302" BorderBrush="#CC9CC391" Foreground="Beige"> <Xaml:C1TimeSelector.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF1C3E1F" /> <GradientStop Color="#FF44A24C" Offset="0.869" /> </LinearGradientBrush> </Xaml:C1TimeSelector.Background> </Xaml:C1TimeSelector>

2. Customize the control's Text properties to change the FontFamily to Calibri, the FontSize to 18 px, and the FontWeight to Bold.

You can also change the FontFamily and FontSize by inserting the following XAML markup into the <Xaml:C1DateTimeSelector/> tag:

Markup	Copy Code
FontFamily="Calibri" FontSize="18" FontWeight="Bold"

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