This question is locked. New answers and comments are not allowed.
Hello,
I would like to change the default style of the RadListPicker instance in my page, especially the style of the full screen pop-up.
For that i'm trying to use Expression Blend 2012 like described here : http://www.telerik.com/help/windows-phone/radlistpicker-styles-and-templates-styling-radlistpicker.html
1. "In the 'Objects and Timeline' pane, select the RadListPicker control you want to style. From the menu choose Object -> Edit Style -> Edit a Copy. You will be prompted for the name of the style and where to be placed."
=> I don't have the "Edit style" menu item when I right-click on the RadListPicker (However I have this option for a Grid control, for instance).
2. "If you haven't generated the default style yet, you can choose Edit Template -> Edit a Copy. It will generate both the style and the template."
=> When I click on "Edit Template / Edit a copy" then nothing occurs. It works if I use the same steps on a RadTimePicker instead of a RadListPicker (a window is opened to name the template/style to generate).
Could you help me ? How can I use Expression Blend correctly ? Eventually could you provide me the XAML fragment I need ?
Thanks,
Alex.
I would like to change the default style of the RadListPicker instance in my page, especially the style of the full screen pop-up.
For that i'm trying to use Expression Blend 2012 like described here : http://www.telerik.com/help/windows-phone/radlistpicker-styles-and-templates-styling-radlistpicker.html
1. "In the 'Objects and Timeline' pane, select the RadListPicker control you want to style. From the menu choose Object -> Edit Style -> Edit a Copy. You will be prompted for the name of the style and where to be placed."
=> I don't have the "Edit style" menu item when I right-click on the RadListPicker (However I have this option for a Grid control, for instance).
2. "If you haven't generated the default style yet, you can choose Edit Template -> Edit a Copy. It will generate both the style and the template."
=> When I click on "Edit Template / Edit a copy" then nothing occurs. It works if I use the same steps on a RadTimePicker instead of a RadListPicker (a window is opened to name the template/style to generate).
Could you help me ? How can I use Expression Blend correctly ? Eventually could you provide me the XAML fragment I need ?
Thanks,
Alex.
4 Answers, 1 is accepted
0
Hi Jean-Alexis Aufauvre,
Here is a copy of the Control Template of RadListPicker:
I hope this helps.
Greetings,
Deyan
the Telerik team
Here is a copy of the Control Template of RadListPicker:
<
Style
x:Key
=
"PopupHeaderStyle"
TargetType
=
"ContentControl"
>
<
Setter
Property
=
"FontSize"
Value
=
"{StaticResource PhoneFontSizeMedium}"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"{StaticResource PhoneFontFamilySemiBold}"
/>
<
Setter
Property
=
"Margin"
Value
=
"24,55,0,35"
/>
<
Setter
Property
=
"HorizontalContentAlignment"
Value
=
"Left"
/>
</
Style
>
<
ListPicker:SelectionModeToBooleanConverter
x:Key
=
"SelectionModeToBooleanConverter"
/>
<
Style
x:Key
=
"RadListPickerStyle1"
TargetType
=
"telerikInput:RadListPicker"
>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Top"
/>
<
Setter
Property
=
"HeaderStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"ContentControl"
>
<
Setter
Property
=
"Foreground"
Value
=
"{StaticResource PhoneSubtleBrush}"
/>
<
Setter
Property
=
"FontSize"
Value
=
"{StaticResource PhoneFontSizeNormal}"
/>
<
Setter
Property
=
"Padding"
Value
=
"0, 0,0,7"
/>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Left"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"Background"
Value
=
"Transparent"
/>
<
Setter
Property
=
"Foreground"
Value
=
"{StaticResource PhoneForegroundBrush}"
/>
<
Setter
Property
=
"FontSize"
Value
=
"{StaticResource PhoneFontSizeMediumLarge}"
/>
<
Setter
Property
=
"PopupHeaderStyle"
Value
=
"{StaticResource PopupHeaderStyle}"
/>
<
Setter
Property
=
"Margin"
Value
=
"{StaticResource PhoneTouchTargetOverhang}"
/>
<
Setter
Property
=
"MinHeight"
Value
=
"44"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"3"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"{StaticResource PhoneForegroundBrush}"
/>
<
Setter
Property
=
"ActionButtonVisibility"
Value
=
"Collapsed"
/>
<
Setter
Property
=
"ActionButtonStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"PhoneTextBox:TextBoxSecondaryButton"
>
<
Setter
Property
=
"Foreground"
Value
=
"{StaticResource PhoneForegroundBrush}"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"PopupOpenAnimation"
>
<
Setter.Value
>
<
telerik:RadTileAnimation
Duration
=
"0:0:.2"
InitialDelay
=
"0:0:.08"
IsTranslationEnabled
=
"False"
InOutAnimationMode
=
"In"
PerspectiveAngleY
=
"0"
PerspectiveAngleX
=
"90"
SequentialMode
=
"FirstToLast"
/>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"PopupCloseAnimation"
>
<
Setter.Value
>
<
telerik:RadTileAnimation
Duration
=
"0:0:.2"
IsTranslationEnabled
=
"False"
InOutAnimationMode
=
"Out"
PerspectiveAngleY
=
"0"
PerspectiveAngleX
=
"90"
SequentialMode
=
"FirstToLast"
SequentialItemDelay
=
"0"
/>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerikInput:RadListPicker"
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"Pressed"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"border"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"White"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"BorderBrush"
Storyboard.TargetName
=
"border"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneAccentBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Foreground"
Storyboard.TargetName
=
"PopupModeLabel"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneAccentBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Expanded"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"border"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneTextBoxEditBackgroundColor}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"BorderBrush"
Storyboard.TargetName
=
"border"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneTextBoxEditBorderBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Disabled"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"LayoutRoot"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"0.3"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Duration
=
"0"
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"border"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"Transparent"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
ContentControl
x:Name
=
"HeaderPresenter"
CacheMode
=
"BitmapCache"
ContentTemplate
=
"{TemplateBinding HeaderTemplate}"
Content
=
"{TemplateBinding Header}"
Grid.Row
=
"0"
Style
=
"{TemplateBinding HeaderStyle}"
/>
<
Border
x:Name
=
"border"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Background
=
"{TemplateBinding Background}"
Grid.ColumnSpan
=
"2"
CacheMode
=
"BitmapCache"
Grid.Row
=
"1"
>
<
Grid
x:Name
=
"mainLayout"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
/>
<
ColumnDefinition
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
<
telerikInput:RadListPickerItem
x:Name
=
"PopupModeLabel"
HorizontalAlignment
=
"Stretch"
MinHeight
=
"{TemplateBinding MinHeight}"
Style
=
"{TemplateBinding ItemStyle}"
VerticalAlignment
=
"Stretch"
/>
<
Canvas
x:Name
=
"ItemsParent"
/>
<
PhoneTextBox:TextBoxSecondaryButton
x:Name
=
"ActionButton"
Grid.Column
=
"1"
MinWidth
=
"38"
MinHeight
=
"38"
Style
=
"{TemplateBinding ActionButtonStyle}"
Visibility
=
"{TemplateBinding ActionButtonVisibility}"
/>
</
Grid
>
</
Border
>
<
telerikPrimitives:RadWindow
x:Name
=
"Popup"
CloseAnimation
=
"{TemplateBinding PopupCloseAnimation}"
IsFullScreen
=
"True"
IsAnimationEnabled
=
"{TemplateBinding IsAnimationEnabled}"
OpenAnimation
=
"{TemplateBinding PopupOpenAnimation}"
>
<
telerikPrimitives:RadWindow.ApplicationBarInfo
>
<
telerikPrimitives:ApplicationBarInfo
x:Name
=
"PART_AppBarInfo"
>
<
telerikPrimitives:ApplicationBarButton
x:Name
=
"PART_OKButton"
/>
<
telerikPrimitives:ApplicationBarButton
x:Name
=
"PART_CancelButton"
/>
</
telerikPrimitives:ApplicationBarInfo
>
</
telerikPrimitives:RadWindow.ApplicationBarInfo
>
<
Grid
Background
=
"{StaticResource PhoneChromeBrush}"
telerik:RadTileAnimation.ContainerToAnimate
=
"{Binding ., ElementName=PopupList}"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
ContentControl
CacheMode
=
"BitmapCache"
ContentTemplate
=
"{TemplateBinding PopupHeaderTemplate}"
Content
=
"{TemplateBinding PopupHeader}"
Grid.Row
=
"0"
Style
=
"{TemplateBinding PopupHeaderStyle}"
/>
<
telerikPrimitives:RadDataBoundListBox
x:Name
=
"PopupList"
CheckModeDeactivatedOnBackButton
=
"False"
DisplayMemberPath
=
"{TemplateBinding DisplayMemberPath}"
IsCheckModeActive
=
"{Binding SelectionMode, Converter={StaticResource SelectionModeToBooleanConverter}, RelativeSource={RelativeSource TemplatedParent}}"
telerik:InteractionEffectManager.IsInteractionEnabled
=
"True"
ItemContainerStyle
=
"{TemplateBinding PopupItemStyle}"
Grid.Row
=
"1"
Style
=
"{TemplateBinding PopupStyle}"
/>
</
Grid
>
</
telerikPrimitives:RadWindow
>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"PopupItemStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"telerikPrimitives:RadDataBoundListBoxItem"
>
<
Setter
Property
=
"Padding"
Value
=
"24, 26, 0, 26"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"PopupStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"telerikPrimitives:RadDataBoundListBox"
>
<
Setter
Property
=
"FontSize"
Value
=
"{StaticResource PhoneFontSizeExtraLarge}"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"{StaticResource PhoneFontFamilySemiLight}"
/>
<
Setter
Property
=
"Background"
Value
=
"{StaticResource PhoneChromeBrush}"
/>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"CheckBoxStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"telerikPrimitives:ItemCheckBox"
>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Center"
/>
<
Setter
Property
=
"Margin"
Value
=
"0, 0, -18, 0"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
Setter.Value
>
</
Setter
>
</
Style
>
I hope this helps.
Greetings,
Deyan
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Alex
Top achievements
Rank 1
answered on 14 Jan 2013, 01:36 PM
Thank you. I added the style you gave in the application resources of the app, but when I set the Style attribute of the RadListPicker control I get the following exception :
[MS.Internal.WrappedException] = {MS.Internal.WrappedException: Error HRESULT E_FAIL has been returned from a call to a COM component. ---> System.Exception: Error HRESULT E_FAIL has been returned from a call to a COM component.
at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
=> Is it possible to debug that ?
The solution I found (which should work for me) is to only change the style of the popup adding the PopupStyle and PopupHeaderStyle attributes to the RadListPicker control.
But I have one last issue: I don't know how to change the header background of the popup (it's always gray, even when setting the background property) :
Thanks again for your help,
Alex.
[MS.Internal.WrappedException] = {MS.Internal.WrappedException: Error HRESULT E_FAIL has been returned from a call to a COM component. ---> System.Exception: Error HRESULT E_FAIL has been returned from a call to a COM component.
at MS.Internal.XcpImports.CheckHResult(UInt32 hr)
=> Is it possible to debug that ?
The solution I found (which should work for me) is to only change the style of the popup adding the PopupStyle and PopupHeaderStyle attributes to the RadListPicker control.
But I have one last issue: I don't know how to change the header background of the popup (it's always gray, even when setting the background property) :
<
Style
x:Key
=
"PopupHeaderStyle1"
TargetType
=
"ContentControl"
>
<
Setter
Property
=
"FontSize"
Value
=
"{StaticResource PhoneFontSizeExtraLarge}"
/>
<
Setter
Property
=
"Background"
Value
=
"{StaticResource PhoneBackgroundBrush}"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"{StaticResource PhoneFontFamilySemiBold}"
/>
<
Setter
Property
=
"Margin"
Value
=
"24,55,0,35"
/>
<
Setter
Property
=
"HorizontalContentAlignment"
Value
=
"Left"
/>
</
Style
>
<
Style
x:Key
=
"PopupStyle1"
TargetType
=
"telerikPrimitives:RadDataBoundListBox"
>
<
Setter
Property
=
"FontSize"
Value
=
"{StaticResource PhoneFontSizeExtraLarge}"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"{StaticResource PhoneFontFamilySemiLight}"
/>
<
Setter
Property
=
"Background"
Value
=
"{StaticResource PhoneBackgroundBrush}"
/>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"CheckBoxStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"telerikPrimitives:ItemCheckBox"
>
<
Setter
Property
=
"VerticalAlignment"
Value
=
"Center"
/>
<
Setter
Property
=
"Margin"
Value
=
"0, 0, -18, 0"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
</
Style
>
Thanks again for your help,
Alex.
0
Alex
Top achievements
Rank 1
answered on 15 Jan 2013, 08:48 AM
I just saw that the popup header background is forced to gray (
I manage to use and modify the template you gave in the first place, so my problem is solved :)
Thanks.
Background
=
"{StaticResource PhoneChromeBrush}"
) in the template, so it cannot be changed in a Setter of the PopupHeaderStyle.I manage to use and modify the template you gave in the first place, so my problem is solved :)
Thanks.
0
Hi Jean-Alexis,
Thanks for writing back.
Good to know that you've managed to find a solution.
We will consider this thread closed.
Do not hesitate to let us know in case you have further questions or need assistance.
Regards,
Deyan
the Telerik team
Thanks for writing back.
Good to know that you've managed to find a solution.
We will consider this thread closed.
Do not hesitate to let us know in case you have further questions or need assistance.
Regards,
Deyan
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.