[Solved] RadTimePicker Styling

[Phillip Garrett]

Hi,

I'm trying to customise the look of the RadTimePicker. The example in your documentation (http://www.telerik.com/help/silverlight/radtimepicker-styling.html) doesn't work for me.

I would like a very simple button that brings up a time selector.

I've manged to get this far:

<telerik:RadTimePicker x:Name="picker"
 InputMode="TimePicker"
 SelectionChanged="picker_SelectionChanged">

 <telerik:RadTimePicker.Template>
  <ControlTemplate TargetType="telerik:RadTimePicker">
   <Button MouseLeftButtonDown="Button_MouseLeftButtonDown" />
  </ControlTemplate>
 </telerik:RadTimePicker.Template>

 <telerik:RadTimePicker.ClockStyle>
  <Style TargetType="telerik:RadClock">
   <Setter Property="Header" Value="Select a Time:" />
  </Style>
 </telerik:RadTimePicker.ClockStyle>

</telerik:RadTimePicker>

Which customises the picker with a simple button and detects a left click. I then try and show the picker menu by setting picker.IsDropDownOpen = true; inside my left click event handler... but nothing appears.

Can you help?

Thanks,

Phill

[Pana]

Hi Phillip Garrett,

As a real magician the RadDateTimePicker could pull a Clock out of hat and display it in popup, unfortunately we haven't made it so advanced.

You will have to lend it a clock for a while:

<TextBlock Text="{Binding ElementName=picker, Path=SelectedValue}" Margin="4" />
<telerik:RadTimePicker x:Name="picker" InputMode="TimePicker" Width="22" Height="22">

    <telerik:RadTimePicker.Template>
        <ControlTemplate TargetType="telerik:RadTimePicker">
            <telerik:RadDropDownButton x:Name="PART_DropDownButton" CloseOnEnter="True" Grid.Column="1" DropDownIndicatorVisibility="Collapsed" telerik:DateTimePickerExtensions.FocusContentOnOpen="True" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" IsTabStop="False" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="-1 0 0 0" Padding="0" PopupPlacementTarget="{Binding ElementName=PART_DateTimeInput}" TabIndex="1" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
                <telerik:RadDropDownButton.DropDownContent>
                    <telerik:DateTimePickerClock x:Name="PART_Clock" Margin="-1" Culture="{TemplateBinding Culture}" Grid.Column="1" EndTime="{TemplateBinding EndTime}" IsReadOnly="{TemplateBinding IsReadOnly}" ItemsSource="{TemplateBinding ClockItemsSource}" Style="{TemplateBinding ClockStyle}" SelectedTime="{Binding SelectedTime, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" StartTime="{TemplateBinding StartTime}" TimeInterval="{Binding TimeInterval, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                </telerik:RadDropDownButton.DropDownContent>
            </telerik:RadDropDownButton>
        </ControlTemplate>
    </telerik:RadTimePicker.Template>

    <telerik:RadTimePicker.ClockStyle>
        <Style TargetType="telerik:RadClock">
            <Setter Property="Header" Value="Select a Time:" />
        </Style>
    </telerik:RadTimePicker.ClockStyle>
</telerik:RadTimePicker>

The Template of the RadDateTimePicker has changed recently as well as some of its parsing and API attributes. I am sorry for the inconvenience this may have caused.

Sincerely yours,
Panayot
the Telerik team

[Phillip Garrett]

Izzy Wizzy lets get busy,

Thanks Panayot