Change the OK and Cancel Buttons to displaying something other then "done" and "cancel"

[Christopher]

I have tried very unsuccessfully to change the buttons on the DatePickerControl, to something other than the default.  I've followed the instructions in the online documentation for creating a style for the DatePicker.  I've even tried creating a custom template.  I've done both using Expression Blend, but it WILL NOT use the values I specify for the text.  Can you tell me what I am doing wrong?

Is their a reason there isn't a simple code snippet in your online documentation on how to do this?  I've just got started with the Telerik controls and I'm finding it very difficult to get going quickly.  I am also somewhat new to silverlight, so perhaps that is part of my problem.  Any help would be appreciated. 

 

<telerik:RadPlaneProjectionAnimation x:Key="CloseAnimation" Axes="X" Duration="0:0:.2" EndAngleX="90" StartAngleX="0">
    <telerik:RadPlaneProjectionAnimation.Easing>
        <ExponentialEase EasingMode="EaseIn" Exponent="4"/>
    </telerik:RadPlaneProjectionAnimation.Easing>
</telerik:RadPlaneProjectionAnimation>
<telerik:RadPlaneProjectionAnimation x:Key="OpenAnimation" Axes="X" Duration="0:0:.2" EndAngleX="0" StartAngleX="-90">
    <telerik:RadPlaneProjectionAnimation.Easing>
        <ExponentialEase EasingMode="EaseOut" Exponent="4"/>
    </telerik:RadPlaneProjectionAnimation.Easing>
</telerik:RadPlaneProjectionAnimation>
<telerik1:EnumerableToCountConverter x:Key="countConverter"/>
<Style x:Key="RadDatePickerStyle" TargetType="telerik1:RadDatePicker">
    <Setter Property="SelectorStyle">
        <Setter.Value>
            <Style TargetType="telerik1:RadDateSelector">
                <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="HeaderStyle" Value="{StaticResource HeaderStyle}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik1:RadDatePicker">
                <telerik2: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}">
                    <telerik2:RadPickerBox.ApplicationBarInfo>
                        <telerik2:ApplicationBarInfo x:Name="PART_AppBarInfo">
                            <telerik2:ApplicationBarButton x:Name="PART_OKButton" Text="OK" />
                            <telerik2:ApplicationBarButton x:Name="PART_CancelButton" Text="Cancel" />
                        </telerik2:ApplicationBarInfo>
                    </telerik2: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"/>
                        <telerik1: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>
                </telerik2:RadPickerBox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplateSelector">
        <Setter.Value>
            <telerik1:AppointmentTemplateSelector>
                <DataTemplate>
                    <Grid>
                        <Grid HorizontalAlignment="Right" Margin="2" VerticalAlignment="Top">
                            <Ellipse Fill="{StaticResource PhoneAccentBrush}" Height="25" Width="25"/>
                            <TextBlock FontSize="16" HorizontalAlignment="Center" Text="{Binding Appointments, Converter={StaticResource countConverter}}" VerticalAlignment="Center"/>
                        </Grid>
                        <StackPanel HorizontalAlignment="Left" Margin="4" MinHeight="100" VerticalAlignment="Bottom">
                            <TextBlock FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="0,0,0,-8" Text="{Binding HeaderText}"/>
                            <TextBlock Foreground="{StaticResource PhoneSubtleBrush}" FontSize="20" FontFamily="{StaticResource PhoneFontFamilyNormal}" Text="{Binding ContentText}"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </telerik1:AppointmentTemplateSelector>
        </Setter.Value>
    </Setter>
</Style>

[Christopher]

I've also tried the following, based on a response to another question in this forum.  I added this to the

<phone:PhoneApplicationPage.Resources>
    <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>
    <ControlTemplate x:Key="DatePickerTemplate" 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>
</phone:PhoneApplicationPage.Resources>

Then the markup for the RadDatePicker control looks like this.

<telerikInput:RadDatePicker Grid.Row="1" Grid.Column="1" Template="{StaticResource DatePickerTemplate}" />

The text on the OK button still says "done".  Not sure what else to do.

[Kiril Stanoev]

Hi Christopher,

Thank you for contacting us. Currently this scenario is not supported. However, for our SP release (next week) this functionality will be available. Let me know if this timeframe works for you. I've also updated your Telerik points accordingly.

Kind regards,
Kiril Stanoev
the Telerik team

[Nikolay]

It's still not working now. Can you advice some workaround for solve this problem?

[Victor]

Hello Nikolay,

I have replied to your ticket regarding the same issue.

Kind regards,
Victor
the Telerik team