Customizing the Value Format

The format of the DateTime value can be specified by setting the DatePicker or TimePicker ValueStringFormat property. For example, to present the DateTime value of a TimePicker using a long time format, the ValueStringFormat is set to {0:T}. Because curly brackets are treated as special characters in XAML, they must be escaped. This is done by prefixing {} to the format string, as shown in the following excerpt:

Click here to view code image

<toolkit:TimePicker x:Name="timePicker"
                    Value="{Binding Time, Mode=TwoWay}"
                    Header="time with custom format"
                    ValueStringFormat="{}{0:T}"/>

Alternatively, to set the format in the code-beside, you could use the following:

timePicker.ValueStringFormat = "{0:T}";

Figure 9.18 shows a TimePicker with the ValueStringFormat set to a long time format. You see that, unlike the default short time format, the seconds position is displayed.

FIGURE 9.18 TimePicker with a custom format.

The DateTimePickerBase.ValueString property allows you to retrieve the string that is presented in the TextBox after the format has been applied.