Ok and Cancel Images are displayed as X

15 posts, 0 answers
  1. IDispose
    IDispose avatar
    12 posts
    Member since:
    Apr 2010

    Posted 30 Nov 2010 Link to this post

    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
  2. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 30 Nov 2010 Link to this post

    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.
  3. DevCraft banner
  4. IDispose
    IDispose avatar
    12 posts
    Member since:
    Apr 2010

    Posted 30 Nov 2010 Link to this post

    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
  5. Mar
    Mar avatar
    25 posts
    Member since:
    Apr 2007

    Posted 01 Dec 2010 Link to this post

    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
  6. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 01 Dec 2010 Link to this post

    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.
  7. runtastic
    runtastic avatar
    7 posts
    Member since:
    Jan 2011

    Posted 26 Jan 2011 Link to this post

    Hi,

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

    thx
    Buju
  8. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 09 Feb 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  9. Chin
    Chin avatar
    3 posts
    Member since:
    May 2011

    Posted 21 May 2011 Link to this post

    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}"
  10. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 25 May 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  11. Chin
    Chin avatar
    3 posts
    Member since:
    May 2011

    Posted 25 May 2011 Link to this post

    Where does the mark up for the resource go? Should each resource be a direct child element of the page/control element?
  12. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 26 May 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  13. Hariharan
    Hariharan avatar
    5 posts
    Member since:
    Sep 2012

    Posted 15 Sep 2012 Link to this post

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

    Thank You,
    Hariharan
  14. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 17 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  15. Shaiket
    Shaiket avatar
    2 posts
    Member since:
    Sep 2007

    Posted 21 Sep 2012 Link to this post

    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>

  16. Deyan
    Admin
    Deyan avatar
    2039 posts

    Posted 25 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

Back to Top
DevCraft banner