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

DatePicker style different on WP7 and WP8

4 Answers 41 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.
Stephan
Top achievements
Rank 2
Stephan asked on 21 Oct 2013, 08:16 PM
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

4 Answers, 1 is accepted

Sort by
0
Todor
Telerik team
answered on 23 Oct 2013, 08:02 AM
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.
0
Stephan
Top achievements
Rank 2
answered on 23 Oct 2013, 10:33 AM
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
0
Accepted
Todor
Telerik team
answered on 28 Oct 2013, 09:40 AM
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.
0
Stephan
Top achievements
Rank 2
answered on 28 Oct 2013, 10:02 AM
Hi Todor,

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

Regards, Stephan
Tags
DatePicker and DateSelector
Asked by
Stephan
Top achievements
Rank 2
Answers by
Todor
Telerik team
Stephan
Top achievements
Rank 2
Share this question
or