This question is locked. New answers and comments are not allowed.
Hello,
How do I set the background for the inline mode open ListPicker ?
For the dark theme, there's a gray semi-transparent background when the picker is open in inline mode
but for the light theme, the background is transparent. I need it to (partially) overlay something when the picker is open, as catching the state change and hiding the other object does not fully work as I need.
Thanks,
Ionut
How do I set the background for the inline mode open ListPicker ?
For the dark theme, there's a gray semi-transparent background when the picker is open in inline mode
but for the light theme, the background is transparent. I need it to (partially) overlay something when the picker is open, as catching the state change and hiding the other object does not fully work as I need.
Thanks,
Ionut
7 Answers, 1 is accepted
0
Hi Ionut,
Thank you for contacting us and for your question.
As of Q3 2011 release we added the PopupStyle property, which allows you to modify the visual aspect of the popup part of the picker. So, you may do something like this:
Please note that the default PopupStyle sets some other properties that you may want to apply:
I hope this helps. Let me know if I can assist you in some other way.
Kind regards,
Georgi
the Telerik team
Thank you for contacting us and for your question.
As of Q3 2011 release we added the PopupStyle property, which allows you to modify the visual aspect of the popup part of the picker. So, you may do something like this:
<
telerikInput:RadListPicker
x:Name
=
"listPicker"
>
<
telerikInput:RadListPicker.PopupStyle
>
<
Style
TargetType
=
"telerikPrimitives:RadSelector"
>
<
Setter
Property
=
"Background"
Value
=
"Gray"
/>
</
Style
>
</
telerikInput:RadListPicker.PopupStyle
>
</
telerikInput:RadListPicker
>
Please note that the default PopupStyle sets some other properties that you may want to apply:
<
Style
TargetType
=
"telerikPrimitives:RadSelector"
>
<
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"
/>
</
Style
>
I hope this helps. Let me know if I can assist you in some other way.
Kind regards,
Georgi
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Pat
Top achievements
Rank 1
answered on 29 Feb 2012, 09:34 AM
The suggested style
<
telerikInput:RadListPicker.PopupStyle
>
<
Style
TargetType
=
"telerikPrimitives:RadSelector"
>
<
Setter
Property
=
"Background"
Value
=
"Gray"
/>
</
Style
>
</
telerikInput:RadListPicker.PopupStyle
>
changes the background for the popup window but does not change the background for inline mode.
How do you change the background for an inline list.
Pat
0
Hello Pat,
Thank you for your question.
The PopupStyle doesn't change the style for the inline mode, because there is no popup in inline mode.
What you can do here is to change the ItemsStyle similarly:
However, this will also change the background of the selected item, even if the ListPicker is not expanded. If you want to change the background only for the expanded state, you will have to edit the ControlTemplate of the RadListPicker. For example, to change the background color for the expanded state, you have to set the desired color to the Background Property in the Expanded VisualState:
I hope this information helps. Don't hesitate to write us back if you have other questions.
Greetings,
Todor
the Telerik team
Thank you for your question.
The PopupStyle doesn't change the style for the inline mode, because there is no popup in inline mode.
What you can do here is to change the ItemsStyle similarly:
<
telerikInput:RadListPicker.ItemStyle
>
<
Style
TargetType
=
"telerikInput:RadListPickerItem"
>
<
Setter
Property
=
"Background"
Value
=
"Red"
/>
</
Style
>
</
telerikInput:RadListPicker.ItemStyle
>
However, this will also change the background of the selected item, even if the ListPicker is not expanded. If you want to change the background only for the expanded state, you will have to edit the ControlTemplate of the RadListPicker. For example, to change the background color for the expanded state, you have to set the desired color to the Background Property in the Expanded VisualState:
<
telerikInput:RadListPicker
x:Name
=
"listPicker"
>
<
telerikInput:RadListPicker.Template
>
<
ControlTemplate
TargetType
=
"telerikInput:RadListPicker"
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"Expanded"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"border"
Storyboard.TargetProperty
=
"Background"
Duration
=
"0"
>
<
DiscreteObjectKeyFrame
Value
=
"Red"
KeyTime
=
"0"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"border"
Storyboard.TargetProperty
=
"BorderBrush"
Duration
=
"0"
>
<
DiscreteObjectKeyFrame
Value
=
"{StaticResource PhoneTextBoxEditBorderBrush}"
KeyTime
=
"0"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
</
Grid.RowDefinitions
>
<
ContentControl
Grid.Row
=
"0"
x:Name
=
"HeaderPresenter"
CacheMode
=
"BitmapCache"
Content
=
"{TemplateBinding Header}"
ContentTemplate
=
"{TemplateBinding HeaderTemplate}"
Style
=
"{TemplateBinding HeaderStyle}"
/>
<
Border
Grid.Row
=
"1"
x:Name
=
"border"
CacheMode
=
"BitmapCache"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Background
=
"{TemplateBinding Background}"
>
<
Grid
x:Name
=
"mainLayout"
>
<
telerikInput:RadListPickerItem
x:Name
=
"PopupModeLabel"
ContentTemplate
=
"{TemplateBinding ItemTemplate}"
HorizontalAlignment
=
"Stretch"
VerticalAlignment
=
"Stretch"
Style
=
"{TemplateBinding ItemStyle}"
MinHeight
=
"{TemplateBinding MinHeight}"
/>
<
Canvas
x:Name
=
"ItemsParent"
/>
</
Grid
>
</
Border
>
<
telerikPrimitives:RadWindow
x:Name
=
"Popup"
IsFullScreen
=
"True"
IsAnimationEnabled
=
"{TemplateBinding IsAnimationEnabled}"
OpenAnimation
=
"{TemplateBinding PopupOpenAnimation}"
CloseAnimation
=
"{TemplateBinding PopupCloseAnimation}"
>
<
telerikPrimitives:RadWindow.Content
>
<
telerikPrimitives:RadSelector
x:Name
=
"PopupList"
Style
=
"{TemplateBinding PopupStyle}"
Header
=
"{TemplateBinding PopupHeader}"
DisplayMemberPath
=
"{TemplateBinding DisplayMemberPath}"
HeaderTemplate
=
"{TemplateBinding PopupHeaderTemplate}"
HeaderStyle
=
"{TemplateBinding PopupHeaderStyle}"
ItemStyle
=
"{TemplateBinding PopupItemStyle}"
>
<
telerikPrimitives:RadSelector.ItemsPanel
>
<
ItemsPanelTemplate
>
<
VirtualizingStackPanel
/>
</
ItemsPanelTemplate
>
</
telerikPrimitives:RadSelector.ItemsPanel
>
</
telerikPrimitives:RadSelector
>
</
telerikPrimitives:RadWindow.Content
>
</
telerikPrimitives:RadWindow
>
</
Grid
>
</
ControlTemplate
>
</
telerikInput:RadListPicker.Template
>
</
telerikInput:RadListPicker
>
I hope this information helps. Don't hesitate to write us back if you have other questions.
Greetings,
Todor
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Pat
Top achievements
Rank 1
answered on 01 Mar 2012, 06:18 PM
Thanks.
I have added the suggested ItemStyle and the background changes as you said. However I now notice that when I select a different entry from the inline list, the bottom border of the RadListPicker is removed when the expansion closes.
Pat
I have added the suggested ItemStyle and the background changes as you said. However I now notice that when I select a different entry from the inline list, the bottom border of the RadListPicker is removed when the expansion closes.
Pat
0
Hello Pat,
Thank you for getting back to us.
I was able to reproduce your scenario and I have to confirm that this is an issue with the current version of RadListPicker. The cause for this undesired behavior has already been resolved and we will provide an internal build containing the fix by the end of the week.
I have added 1 000 points to your account for bringing this to our attention.
Kind regards,
Todor
the Telerik team
Thank you for getting back to us.
I was able to reproduce your scenario and I have to confirm that this is an issue with the current version of RadListPicker. The cause for this undesired behavior has already been resolved and we will provide an internal build containing the fix by the end of the week.
I have added 1 000 points to your account for bringing this to our attention.
Kind regards,
Todor
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Randall
Top achievements
Rank 1
answered on 30 Aug 2013, 05:59 AM
If I add:
to the RadListPicker block in my Windows Phone 8 project, I get the error:
Error 1 [Line: 0 Position: 0]
With no further explanation.
In the actual Properties window, the PopupStyle property is set to System.Windows.Style. I don't understand enough of this to do what I want it seems... all I want is to change the list background color from white to black...
?
<
telerikInput:RadListPicker.PopupStyle
>
<
Style
TargetType
=
"telerikPrimitives:RadSelector"
>
<
Setter
Property
=
"Background"
Value
=
"Gray"
/>
</
Style
>
</
telerikInput:RadListPicker.PopupStyle
>
to the RadListPicker block in my Windows Phone 8 project, I get the error:
Error 1 [Line: 0 Position: 0]
With no further explanation.
In the actual Properties window, the PopupStyle property is set to System.Windows.Style. I don't understand enough of this to do what I want it seems... all I want is to change the list background color from white to black...
?
0
Hello Randall,
Let me know how it goes. Regards,
Kiril Stanoev
Telerik
From some time now, the popup functionality in RadListPicker is handled by a RadDataBoundListBox in the ControlTemplate of the ListPicker.
Try the following:
<
telerikInput:RadListPicker
x:Name
=
"listPicker1"
>
<
telerikInput:RadListPicker.PopupStyle
>
<
Style
TargetType
=
"telerikPrimitives:RadDataBoundListBox"
>
<
Setter
Property
=
"Background"
Value
=
"Gray"
/>
</
Style
>
</
telerikInput:RadListPicker.PopupStyle
>
</
telerikInput:RadListPicker
>
Let me know how it goes. Regards,
Kiril Stanoev
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>