Ok and Cancel Images are displayed as X

[IDispose]

With latest CTP version, the Ok and Cancel button images display as X's, Previous version displayed Ok and Cancel buttons with text. This versions seems to use the Appbar. 

Any ideas?

TIA

[Valentin.Stoychev]

Hi Ramesh Sringeri,

Yes, with the CTP2 we modified the apperance of the date picker to match exactly the appearance of the Date Picker in OS. This is why we added the app bar icons. Unfortunately the sl runtime do not allow us to define the URI for these icons to be relative and to be part from the Telerik assemblies. This is why the icons should be part of the wp7 application. You need to add the icons in the following path in your project:
/Images/DateTimePickerOK.png
/Images/DateTimePickerCancel.png

I'm attaching the images which you can use. You need to add them with BuildAction set to "Content". We are sure this is not very convenient way to use the control, but this is the only way at the moment provided by the runtime.

Please let us know if you have more questions.

Greetings,
Valentin.Stoychev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[IDispose]

Hi Valentin
Thanks for the quick response and the files. I am confirming that this solution has resolved my issue. I see the correct icons.

Thanks again.

ramesh

[Mar]

Hello, any way to change these default paths that the control is using?
It is not super critical but in my project, all images are under Assets folder and I would like to keep these images organized in that same folder.  Again, not a big deal?

Pratik

[Valentin.Stoychev]

Hello Pratik,

Yes - it is a good idea to make this configurable. We will fix this in the next release. At the moment you can edit the control template of RadDatePicker and change it there.

Kind regards,
Valentin.Stoychev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[runtastic]

Hi,

@Admin: Can you provide some code how to do this using control template for RadDatePicker?

thx
Buju

[Victor]

Hello Buju,

 Here is the default ControlTemplate for RadDatePicker:

<ControlTemplate TargetType="telerikInput:RadDatePicker">
                    <telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
                                                    HorizontalContentAlignment="Left"
                                                    PopupOpenAnimation="{StaticResource OpenAnimation}"
                                                    PopupCloseAnimation="{StaticResource CloseAnimation}"
                                                    Header="{TemplateBinding Header}"
                                                    HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                                    HeaderStyle="{TemplateBinding HeaderStyle}">
                        <telerikPrimitives:RadPickerBox.PopupContent>
                            <Grid Background="{StaticResource PhoneChromeBrush}">
                                <telerikInput:RadDateSelector x:Name="PART_Selector"/>
                            </Grid>
                        </telerikPrimitives:RadPickerBox.PopupContent>

                        <telerikPrimitives:RadPickerBox.ApplicationBarInfo>
                            <telerikPrimitives:ApplicationBarInfo x:Name="PART_AppBarInfo">
                                <telerikPrimitives:ApplicationBarButton x:Name="PART_OKButton" Text="OK" IconUri="/Images/DateTimePickerOK.png"/>
                                <telerikPrimitives:ApplicationBarButton x:Name="PART_CancelButton" Text="Cancel" IconUri="/Images/DateTimePickerCancel.png"/>
                            </telerikPrimitives:ApplicationBarInfo>
                        </telerikPrimitives:RadPickerBox.ApplicationBarInfo>
                    </telerikPrimitives:RadPickerBox>
                </ControlTemplate>

You have to change the IconUri of PART_OKButton and PART_CancelButton to a URI that is appropriate for your application. Then you have to set the ControlTemplate property of your RadDatePicker instance to the new template.

Greetings,
Victor
the Telerik team

[Chin]

Was this supposed to have been fixed? I'm using the April 20, 2011 build, I'm still seeing this issue.

Also, when using the control template workaround mentioned above, I'm seeing blue squiggly lines under the attribute values for both PopupOpenAnimation and PopupCloseAnimation. The error message is "The resource OpenAnimation/CloseAnimation could not be resolved.". The attributes in question are:

PopupOpenAnimation="{StaticResource OpenAnimation}"
PopupCloseAnimation="{StaticResource CloseAnimation}"

[Victor]

Hello Chin,

 Thank you for the questions.
The issue with the icons is fixed, now users can specify them through the OkButtonIconUri and CancelButtonIconUri properties of RadDatePicker and RadTimePicker. These properties will be available in the next internal build.

Also here are the missing static resources for the template. Please note that your pickers will also work if the animations are not specified, they simply will not have open and close animations so you can remove the underlined properties if you decide it is acceptable.

<telerikCore:RadPlaneProjectionAnimation x:Key="OpenAnimation" Axes="X" StartAngleX="-90" EndAngleX="0" Duration="0:0:.2">
        <telerikCore:RadPlaneProjectionAnimation.Easing>
            <ExponentialEase Exponent="4" EasingMode="EaseOut"/>
        </telerikCore:RadPlaneProjectionAnimation.Easing>
    </telerikCore:RadPlaneProjectionAnimation>

    <telerikCore:RadPlaneProjectionAnimation x:Key="CloseAnimation" Axes="X" StartAngleX="0" EndAngleX="90" Duration="0:0:.2">
        <telerikCore:RadPlaneProjectionAnimation.Easing>
            <ExponentialEase Exponent="4" EasingMode="EaseIn"/>
        </telerikCore:RadPlaneProjectionAnimation.Easing>
    </telerikCore:RadPlaneProjectionAnimation>

The telerikCore namespace is this:

xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"

Please write again if you have other questions.

Greetings,
Victor
the Telerik team

[Chin]

Where does the mark up for the resource go? Should each resource be a direct child element of the page/control element?

[Victor]

Hi Chin,

 The animations are referred to as a StaticResource from the template, therefore you should declare them directly before the template in your resource dictionary. The animations and the template should be siblings.

Write again if you need further assistance.

Greetings,
Victor
the Telerik team

[Hariharan]

How do I change the background color of the AppBar in the date picker ? 

Thank You,
Hariharan

[Deyan]

Hello Hariharan,

Thanks for writig and for your question.

You can use the PopupOpened and find the RadPickerBox child of RadDatePicker via the ElementTreeHelper class that our framework exposes. The RadPickerBox component exposes the ApplicationBarInfo property that returns a property bag object that defines the properties of the application bar. You will use the ApplicationBarInfo.BackgroundColor property to define the color of the app bar:

private void radTimePicker1_PopupOpened(object sender, EventArgs e)
{
    RadPickerBox pickerBox = ElementTreeHelper.FindVisualDescendant<RadPickerBox>(this.radTimePicker1);
    pickerBox.ApplicationBarInfo.BackgroundColor = Colors.Green;
}

I hope this helps.

Kind regards,
Deyan
the Telerik team

[Shaiket]

Not sure what am I doing wrong, but the Text properties of the AplicationBarbutton are not working for me (I set them to ok and cancel but it still stays done and cancel when I run it). The Backgroundcolor and the ForegroundColor corresponding to the AppBarInfo seems to be working though. Any ideas?

<Setter Property="Template">
   <Setter.Value>
    <ControlTemplate TargetType="telerikInput:RadDatePicker">
     <telerikPrimitives:RadPickerBox x:Name="PART_PickerBox" ContentTemplate="{TemplateBinding EmptyContentTemplate}" HeaderTemplate="{TemplateBinding HeaderTemplate}" HeaderStyle="{TemplateBinding HeaderStyle}" Header="{TemplateBinding Header}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" PopupCloseAnimation="{StaticResource CloseAnimation}" PickerButtonStyle="{TemplateBinding PickerButtonStyle}" PopupOpenAnimation="{StaticResource OpenAnimation}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
      <telerikPrimitives:RadPickerBox.ApplicationBarInfo>
       <telerikPrimitives:ApplicationBarInfo x:Name="PART_AppBarInfo" BackgroundColor="White" ForegroundColor="#FF4A4D52" >
        <telerikPrimitives:ApplicationBarButton x:Name="PART_OKButton" Text="ok" />
        <telerikPrimitives:ApplicationBarButton x:Name="PART_CancelButton" Text="cancel" />
       </telerikPrimitives:ApplicationBarInfo>
      </telerikPrimitives:RadPickerBox.ApplicationBarInfo>
      <Grid Background="{StaticResource PhoneChromeBrush}">
       <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
       </Grid.RowDefinitions>
       <ContentControl x:Name="PART_PopupHeader" ContentTemplate="{TemplateBinding PopupHeaderTemplate}" Content="{TemplateBinding PopupHeader}" FontWeight="SemiBold" FontSize="{StaticResource PhoneFontSizeMedium}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalContentAlignment="Left" Margin="24, 55, 0, 24" Grid.Row="0"/>
       <telerikInput:RadDateSelector x:Name="PART_Selector" AppointmentSource="{TemplateBinding AppointmentSource}" DayStepBehavior="{TemplateBinding DayStepBehavior}" ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}" MonthStepBehavior="{TemplateBinding MonthStepBehavior}" Grid.Row="1" Style="{TemplateBinding SelectorStyle}" Step="{TemplateBinding Step}" YearStepBehavior="{TemplateBinding YearStepBehavior}"/>
      </Grid>
     </telerikPrimitives:RadPickerBox>
    </ControlTemplate>
   </Setter.Value>
</Setter>

[Deyan]

Hi Shaiket,

Thanks for writing and for your question.

Since the titles of these buttons are localized, you will need  to reate a custom string loader and provide new strings to change them. This is done very easily by settin the StringLoader property of the InputLocalizationManager:

InputLocalizationManager.Instance.StringLoader = new MyStringLoader();

public class MyStringLoader : IStringResourceLoader
{
   public string GetString(string key)
   {
        if (key == "OkButtonText")
        {
             return "OK"
        }

        if (key == "CancelButtonText")
        {
             return "CANCEL"
        }
        return null;
   }
}

I hope this helps.

Greetings,
Deyan
the Telerik team