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

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

4 Answers 188 Views

DatePicker and DateSelector

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

This question is locked. New answers and comments are not allowed.

Christopher asked on 12 Mar 2012, 07:26 AM

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>

4 Answers, 1 is accepted

answered on 12 Mar 2012, 07:59 AM

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.