Light-themed ListPicker inline mode background

8 posts, 0 answers
  1. Ionut
    Ionut avatar
    6 posts
    Member since:
    Jul 2012

    Posted 28 Nov 2011 Link to this post


    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.


  2. Georgi
    Georgi avatar
    296 posts

    Posted 30 Nov 2011 Link to this post

    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:

    <telerikInput:RadListPicker x:Name="listPicker">
            <Style TargetType="telerikPrimitives:RadSelector">
                <Setter Property="Background" Value="Gray"/>

    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"/>

    I hope this helps. Let me know if I can assist you in some other way.

    Kind regards,
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Pat
    Pat avatar
    31 posts
    Member since:
    Mar 2009

    Posted 29 Feb 2012 Link to this post

    The suggested style 


            <Style TargetType="telerikPrimitives:RadSelector">
                <Setter Property="Background" Value="Gray"/>

    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.

  5. Todor
    Todor avatar
    778 posts

    Posted 01 Mar 2012 Link to this post

    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:
        <Style TargetType="telerikInput:RadListPickerItem">
            <Setter Property="Background" Value="Red"/>

    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">
            <ControlTemplate TargetType="telerikInput:RadListPicker">
                <Grid x:Name="LayoutRoot">
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Expanded">
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Background" Duration="0">
                                        <DiscreteObjectKeyFrame Value="Red" KeyTime="0"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush" Duration="0">
                                        <DiscreteObjectKeyFrame Value="{StaticResource PhoneTextBoxEditBorderBrush}" KeyTime="0"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    <ContentControl Grid.Row="0"
                                    Content="{TemplateBinding Header}"
                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                    Style="{TemplateBinding HeaderStyle}"/>
                    <Border Grid.Row="1" x:Name="border"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">
                        <Grid x:Name="mainLayout">
                            <telerikInput:RadListPickerItem x:Name="PopupModeLabel"
                                                        ContentTemplate="{TemplateBinding ItemTemplate}"
                                                        Style="{TemplateBinding ItemStyle}"
                                                        MinHeight="{TemplateBinding MinHeight}"/>
                            <Canvas x:Name="ItemsParent"/>
                    <telerikPrimitives:RadWindow x:Name="Popup"
                                                    IsAnimationEnabled="{TemplateBinding IsAnimationEnabled}"
                                                    OpenAnimation="{TemplateBinding PopupOpenAnimation}"
                                                    CloseAnimation="{TemplateBinding PopupCloseAnimation}">
                            <telerikPrimitives:RadSelector x:Name="PopupList"
                                                            Style="{TemplateBinding PopupStyle}"
                                                            Header="{TemplateBinding PopupHeader}"
                                                            DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
                                                            HeaderTemplate="{TemplateBinding PopupHeaderTemplate}"
                                                            HeaderStyle="{TemplateBinding PopupHeaderStyle}"
                                                            ItemStyle="{TemplateBinding PopupItemStyle}">

    I hope this information helps. Don't hesitate to write us back if you have other questions.

    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Pat
    Pat avatar
    31 posts
    Member since:
    Mar 2009

    Posted 01 Mar 2012 Link to this post


    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.

  7. Todor
    Todor avatar
    778 posts

    Posted 05 Mar 2012 Link to this post

    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,
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  8. Randall
    Randall avatar
    5 posts
    Member since:
    Nov 2012

    Posted 30 Aug 2013 Link to this post

    If I add:

            <Style TargetType="telerikPrimitives:RadSelector">
                <Setter Property="Background" Value="Gray"/>

    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...


  9. Kiril Stanoev
    Kiril Stanoev avatar
    1512 posts

    Posted 02 Sep 2013 Link to this post

    Hello Randall,

    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">
            <Style TargetType="telerikPrimitives:RadDataBoundListBox">
                <Setter Property="Background" Value="Gray" />

    Let me know how it goes. 

    Kiril Stanoev
    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 >>
Back to Top
DevCraft banner