DatePicker style different on WP7 and WP8

5 posts, 1 answers
  1. Stephan
    Stephan avatar
    29 posts
    Member since:
    May 2013

    Posted 21 Oct 2013 Link to this post

    Hi Telerik Team,

    I'm about to separate my existing WP7 app (which is published for WP7 and WP8 users) into an assembly for WP7 and one for WP8. One thing I stumbled upon is the date picker. It seems that the style is different for the two platforms. In order to reproduce this behavior I created two WP projects, both with the "RadControls Windows Phone Application" template in VS 2012. One of the projects targets WP7, the other one WP8. While on WP7 the DatePickers style is correct (or at least this is the style that I think is correct) and on WP8 it's somehow lost. Please have a look at the screenshot in order to better understand what I mean.

    Kind Regards,
    Stephan
  2. Todor
    Admin
    Todor avatar
    778 posts

    Posted 23 Oct 2013 Link to this post

    Hi Stephan,

    Thank you for writing.

    This behavior is expected.

    Our date/time picker controls follow the design guidelines of Windows Phone. You can open the native Calendar application and try to add a new appointment in both Windows Phone 7 and in Windows Phone 8. You will notice that the styles of the date/time picker controls have differences, similar to those that you have found in our controls for Windows Phone 7 and Windows Phone 8.

    I hope this information helps. If you need further assistance, don't hesitate to write us back.
     
    Regards,
    Todor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Stephan
    Stephan avatar
    29 posts
    Member since:
    May 2013

    Posted 23 Oct 2013 Link to this post

    Hi Todor,

    Phew! I understand now that you changed the style to go hand in hand with the WP8 style. But it would be great to have the option to use the old style again. The reason is that my app doesn't have a black background as the calendar has, but a white one. Thus, this automatically breaks my UI. So the only chance that I have now is to apply a visual style to all the controls where the guidelines from Microsoft changed. Do you have by any chance that style already? Or can you give me some help in achieving this?

    Edit:
    Please have a look at some screenshots of my app here:
    http://www.windowsphone.com/en-us/store/app/time-stamp/22947657-0c0d-49d1-9976-8b1a386f8bf7
    There, the 3 screenshot for example uses the date picker to select month + year and this works quite well so far. But with WP8 the white style is not appropriate. I just would like to have the WP7 style for the WP8 controls :)

    Regards,
    Stephan
  5. Answer
    Todor
    Admin
    Todor avatar
    778 posts

    Posted 28 Oct 2013 Link to this post

    Hi Stephan,

    Thank you for getting back to us.

    Here is the style for the PickerBoxToggleButton that is used internally in RadDatePicker:

    <Style TargetType="telerikPickerBox:PickerBoxToggleButton" x:Key="PickerBoxToggleButtonStyle">
        <Setter Property="telerikCore:InteractionEffectManager.IsInteractionEnabled" Value="True"/>
        <Setter Property="Padding" Value="8, 8, 8, 7"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
        <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikPickerBox:PickerBoxToggleButton">
                    <Grid Background="Transparent" >
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledBackground" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBackground" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledContent" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Unchecked" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="EnabledBackground" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <ContentControl x:Name="EnabledContent" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Border>
                        <Border x:Name="DisabledBackground" IsHitTestVisible="False" Background="Transparent" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
                            <ContentControl x:Name="DisabledContent" Foreground="{StaticResource PhoneDisabledBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Just add it to the resources of your page/application along with the following namespace mappings:

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

    Then you can use this style and set it as PickerButtonStyle in your RadDatePicker instance:

    <telerikInput:RadDatePicker PickerButtonStyle="{StaticResource PickerBoxToggleButtonStyle}">

    I hope this information helps. 
     
    Regards,
    Todor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  6. Stephan
    Stephan avatar
    29 posts
    Member since:
    May 2013

    Posted 28 Oct 2013 Link to this post

    Hi Todor,

    thanks for your reply. Changing the visual style of PickerBoxToggleButton did the trick.

    Regards, Stephan
Back to Top
DevCraft banner