Close button for DatePicker

[Greg]

Hi,

I was trying to add Close button for calendar, to have possibility of closing it not only when user clicks outside the scope of calendar. I got style file and the file which control date picker (got there method like DatePicker_DropDownOpened, which works very well). So I know how to hide it -> e.x.

 

datePicker.Visibility = Visibility.Visible; or (like described here
http://www.telerik.com/help/silverlight/raddatetimepicker-how-to-hide-show-pop-up-in-code.html)
this.radDateTimePicker.IsDropDownOpen = true;

The problem is how to make relation beetwen button and code. So I've tried this (only using XAML style file):
 

 

<Button x:Name="CloseButton" Content="Close" Width="Auto" Margin="0">
    <i:Interaction.Triggers>

 

 

        <i:EventTrigger EventName="Click">

            <ei:ChangePropertyAction TargetName="DropDownPopupContent" PropertyName="Visibility" Value="Collapsed" />

        </i:EventTrigger>

    </i:Interaction.Triggers>
</Button>

 

 

 

So it perfectly hides the date picker when I click on it, but it doesn't show again (probably because control change ActualWidth and ActualHeight property and not Visibility). Changing IsOpen property in that way has no effect at all.

I've tried also binding it to command:

<Button x:Name="CloseButton" Content="Close" Width="Auto" Margin="0">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <i:InvokeCommandAction Command="{Binding HideCalendarCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

While the command is registered inside OnApplyTemplate method

 

HideCalendarCommand =

 

new RelayCommand(() =>

 

{

datePicker.Visibility =

 

Visibility.Collapsed;

 

});

 

then there is no effect when I click on the button (probably because it's a style file, no?)

I'm quite new in Silverlight world, so any help would be welcomed :)

[Vladi]

Hi Greg,

To add a close button on the DatePicker control you can edit the theme you are using, and change it that it doesn't hide the built-in Close button. The easiest way is to use implicit styles, more information about them you can find in this article. After you integrate implicit styles in your project all you need to do is to change the value of the Visibility property of the CloseButtonContainer to Visible for the "DatePicker" VisualState. The next code snippet represent the edited part of the DatePicker style:

<VisualState x:Name="DatePicker">
    <Storyboard>
      ...
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonContainer" Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0">
        <DiscreteObjectKeyFrame.Value>
            <Visibility>Visible</Visibility>
        </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
     ...
    </Storyboard>
</VisualState>

Hope this helps.

All the best,
Vladi
the Telerik team

[Greg]

Hi Vladi,

unfortunately it doesn't work. I've got runtime error, when I opened part of code which include it. It says that "Element is already the child of another element." but I can't find anything related to name "CloseButtonContainer" in the whole application.  The same is happened when I've got only one ObjectAnimationUsingKeyFrames  element in DatePicker Storyboard.

2012-08-01 10:56:22.709 +02:00 ERROR An unhandled exception has occurred and bubbled up to the CompositeHost: Unhandled Exception Message: System.InvalidOperationException: System.InvalidOperationException: Element is already the child of another element.
   at MS.Internal.XcpImports.VisualStateManager_GoToState(Control reference, String StateName, Boolean useTransitions, Boolean& refreshInheritanceContext)
   at System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)
   at Telerik.Windows.Controls.RadDateTimePicker.GoToState(Boolean useTransition)
   at Telerik.Windows.Controls.RadDateTimePicker.OnApplyTemplate()
   at System.Windows.FrameworkElement.OnApplyTemplate(IntPtr nativeTarget)
   at MS.Internal.XcpImports.VisualStateManager_GoToState(Control reference, String StateName, Boolean useTransitions, Boolean& refreshInheritanceContext)
   at System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)
   at Telerik.Windows.Controls.RadDateTimePicker.GoToState(Boolean useTransition)
   at Telerik.Windows.Controls.RadDateTimePicker.OnLoaded(Object sender, RoutedEventArgs e)
   at MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
   at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)



the code looks similar like your example:

        <ControlTemplate TargetType="telerik:RadDatePicker">
          <Grid x:Name="grid">
            <Grid.ColumnDefinitions>
              <ColumnDefinition />
              <ColumnDefinition Width="auto" />
            </Grid.ColumnDefinitions>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                  <VisualTransition GeneratedDuration="0:0:0.2" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal">
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                      <LinearDoubleKeyFrame KeyTime="0:0:0.150" Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="MouseOver">
                  <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                            <SplineDoubleKeyFrame KeyTime="0" Value="1" />
                            <LinearDoubleKeyFrame KeyTime="0:0:0.115" Value="1" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_DropDownButton" d:IsOptimized="True" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                  <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                            <LinearDoubleKeyFrame KeyTime="0:0:0.050" Value="0" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True" />
                    </Storyboard>
                </VisualState>
              </VisualStateGroup>
              <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Focused">
                  <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusVisual" d:IsOptimized="True" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused" />
              </VisualStateGroup>
              <VisualStateGroup x:Name="InputTypeStates">
                <VisualState x:Name="DateTimePicker" />
                <VisualState x:Name="DatePicker">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_Clock">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                    </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonContainer" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>
                </VisualState>
                <VisualState x:Name="TimePicker">

...

[Vladi]

Hi Greg,

I prepared and attached a sample project using implicit styles to show the close button in RadDatePicker control. I also recorded and attached a short video showing that there isn't any unexpected behavior or exceptions when using implicit styles.

Please take a look at the attached files and tell us if we are missing something.

Kind regards,
Vladi
the Telerik team