Styling TimePicker control

Question

I'm trying style the TimePicker control that appears on the form so that the text colour changes accordingly to the phone's style with a transparent background. For normal text, I just use:

Style="{StaticResource PhoneTextNormalStyle}"

However, this won't work for the TimePicker and I get an error when I try to build the project.

Sorry for the severe lack of detail right now, I current don't have access to my development box right now. When I get home I'll post a screenshot of the control and the error.

Answer 1

The easy way to do this would be in Expression Blend. Open up the project in there, right-click on the control and select "Edit Style" -> "Edit a copy". This will put a style element into the page.resources section that looks like the following snippet

<Style x:Key="TimePickerStyle1" TargetType="toolkit:TimePicker">
     <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
     <Setter Property="BorderThickness" Value="0"/>
     <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
     <Setter Property="HorizontalContentAlignment" Value="Left"/>
     <Setter Property="PickerPageUri" Value="/Microsoft.Phone.Controls.Toolkit;component/DateTimePickers/TimePickerPage.xaml"/>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="toolkit:TimePicker">
                 <StackPanel>
                    <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource PhoneSubtleBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="12,0,12,-4"/>
                    <Button x:Name="DateTimeButton" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Content="{TemplateBinding ValueString}" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Height="72"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and your control definition will look like this:

<toolkit:TimePicker Name="TimePickerInstance" Style="{StaticResource TimePickerStyle1}"></toolkit:TimePicker>

Of course, you can put this snippet in there yourself, and reference it in the same way in the control. It will all work the same way - Expression Blend just makes the process of doing it much simpler.

You should be able to manipulate that as you need to from there, probably changing the 2nd and 4th lines to

<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>

Hope that helps.