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

Light-themed ListPicker inline mode background

7 Answers 112 Views
ListPicker
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Ionut
Top achievements
Rank 1
Ionut asked on 28 Nov 2011, 04:13 PM
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

7 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 30 Nov 2011, 03:59 PM
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">
    <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
Todor
Telerik team
answered on 01 Mar 2012, 02:16 PM
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:
<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
0
Todor
Telerik team
answered on 05 Mar 2012, 04:05 PM
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
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:

    <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
Kiril Stanoev
Telerik team
answered on 02 Sep 2013, 08:04 AM
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">
    <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 >>
Tags
ListPicker
Asked by
Ionut
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Pat
Top achievements
Rank 1
Todor
Telerik team
Randall
Top achievements
Rank 1
Kiril Stanoev
Telerik team
Share this question
or