This is a migrated thread and some comments may be shown as answers.

Binding/styling issues when extending DatePicker

1 Answer 104 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 14 Sep 2012, 03:39 AM
I created a custom control that derives from RadDatePicker. I need to enlarge the control to make it easier to manipulate with a touchscreen and add a 'Today' button that jumps to today's date.

I've replaced the drop down icon with an image and added the button below the calendar drop-down with its Command bound to a DelegateCommand in the code-behind, as defined in CalendarStyle's Template setter. I had originally designed this as a user control, but both the command binding and the image's source is broken when converting to a custom control (and putting the templates in Themes\Generic.xaml).

<ResourceDictionary ...>
    <Style BasedOn="{StaticResource {x:Type telerik:RadDatePicker}}" TargetType="local:RadDatePickerXtnd">
        <Setter Property="CalendarStyle">
            ...
            <ControlTemplate TargetType="{x:Type telerik:RadCalendar}">
                <StackPanel>
                    <Grid>{Calendar control markup}</Grid>
                    <Button Name="PART_TodayButton" Command="{Binding TodayCommand}" Content="Today" />
                </StackPanel>
            </ControlTemplate>
            ...
        </Setter>
    </Style>
    <Setter Property="Template">
        ...
        <ContentControl x:Name="DropDownIcon" Background="White" Foreground="Black" IsTabStop="False">
            <ContentControl.Template>
                <ControlTemplate TargetType="{x:Type ContentControl}">
                    <Image Source="..\img\calendar.png" Width="24" Height="24" />
                </ControlTemplate>
            </ContentControl.Template>         
        </ContentControl>
        ...
    </Setter>
</ResourceDictionary>

The command binding no longer works because I don't know how to set a DataContext within Generic.xaml and I cannot find the right place in code behind to use Template.FindName() to traverse through RadDatePicker > RadCalendar > Button so I can set the binding programmatically. I get an InvalidOperationException - "This operation is valid only on elements that have this template applied." when I try to run "cal.Template.FindName("PART_TodayButton", this);" in OnApplyTemplate(). I'm guessing that CalendarStyle is applied afterwards.

public class RadDatePickerXtnd : RadDatePicker
{
    public Microsoft.Practices.Prism.Commands.DelegateCommand TodayCommand { get; private set; }

    ...
    public
override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
  
        var cal = (RadCalendar)Template.FindName("PART_Calendar", this);
        var todayBtn = (Button)cal.Template.FindName("PART_TodayButton", this);
        // Bind Button.Command to DelegateCommand here
    }
    ...
}

In addition, the Image control isn't displaying the image in the drop-down button. I've tried moving the image to the base directory or the Themes directory and updating the path to no avail.

1 Answer, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 18 Sep 2012, 01:42 AM
A coworker was able to help me solve my problem.

Command binding - Declare the view model class in Generic.xaml as a Static Resource and pass the RadCalendar in as a parameter. Modify the command method to take in an object and test the type before setting the date.

<ResourceDictionary ...>
    <local:RadDatePickerXtndViewModel x:Key="RadDatePickerViewModel" />
    ...
    <Button Name="PART_TodayButton" Content="Today"
        Command="{Binding Path=TodayCommand, Source={StaticResource RadDatePickerViewModel}}"
        CommandParameter="{Binding ElementName=PART_Calendar}" />

private void Today(object obj)
{
    if (obj is RadCalendar)
    {
        var cal = (RadCalendar)obj;
        cal.SelectedDate = DateTime.Now;
        if ((cal.TemplatedParent) is RadDatePickerXtnd)
            (cal.TemplatedParent as RadDatePickerXtnd).IsDropDownOpen = false;
    }
}

Image - use a Pack URI

<Image Source="pack://application:,,,/TelerikXtnd;Component/img/calendar.png" />
Tags
DatePicker
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Share this question
or