This question is locked. New answers and comments are not allowed.
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
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
0
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
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
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
Hi Stephan,
Thank you for getting back to us.
Here is the style for the PickerBoxToggleButton that is used internally in RadDatePicker:
Just add it to the resources of your page/application along with the following namespace mappings:
Then you can use this style and set it as PickerButtonStyle in your RadDatePicker instance:
I hope this information helps.
Regards,
Todor
Telerik
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
thanks for your reply. Changing the visual style of PickerBoxToggleButton did the trick.
Regards, Stephan