Binding/styling issues when extending DatePicker

2 posts, 0 answers
  1. Michael
    Michael avatar
    2 posts
    Member since:
    Sep 2012

    Posted 13 Sep 2012 Link to this post

    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.
  2. Michael
    Michael avatar
    2 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post

    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" />
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top