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

[Solved] Change color of selected item

1 Answer 158 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.

1 Answer, 1 is accepted

answered on 30 Apr 2013, 11:45 AM

Hello Michael,

For that particular scenario, you'll have to set the PopupItemStyle property. Below, in yellow, is the part responsible for setting the background color of the selected item.

<telerikInput:RadListPicker x:Name="listPicker1">

<telerikInput:RadListPicker.PopupItemStyle>

<Style TargetType="telerikPrimitives:RadDataBoundListBoxItem">

<Setter Property="Background" Value="Transparent" />

<Setter Property="BorderThickness" Value="0" />

<Setter Property="BorderBrush" Value="Transparent" />

<Setter Property="Padding" Value="0" />

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

<Setter Property="VerticalContentAlignment" Value="Stretch" />

<Setter Property="CacheMode" Value="BitmapCache" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikPrimitives:RadDataBoundListBoxItem">

<Border x:Name="LayoutRoot" Background="{TemplateBinding Background}"

HorizontalAlignment="{TemplateBinding HorizontalAlignment}"

VerticalAlignment="{TemplateBinding VerticalAlignment}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

RenderTransformOrigin="0.5, 0.5">

<Border.RenderTransform>

<ScaleTransform x:Name="RootScale" />

</Border.RenderTransform>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver" />

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="LayoutRoot"

Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource TransparentBrush}" />

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation

Storyboard.TargetName="PART_ContainerHolder"

Storyboard.TargetProperty="Opacity" Duration="0"

To=".5" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Unselected" />

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerHolder"

Storyboard.TargetProperty="Foreground">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource PhoneAccentBrush}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CheckBoxStates">

<VisualState x:Name="CheckBoxNotVisibleVertical">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="CheckBoxNotVisibleHorizontal">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="CheckBoxNotVisibleVerticalSpace">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>24, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="CheckBoxNotVisibleHorizontalSpace">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 24, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="CheckBoxVisibleVertical">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>24, 0, 24, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="CheckBoxVisibleHorizontal">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 24, 0, 24</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="CheckBoxVisibleOverlay">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_CheckBoxLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0" Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="PART_ContainerLayout"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0, 0, 0, 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="ItemReorderStates">

<VisualState x:Name="ItemNotOrdered">

<Storyboard>

<DoubleAnimation Storyboard.TargetName="LayoutRoot"

Storyboard.TargetProperty="Opacity" To="1">

<DoubleAnimation.EasingFunction>

<CubicEase EasingMode="EaseOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="RootScale"

Storyboard.TargetProperty="ScaleX" To="1">

<DoubleAnimation.EasingFunction>

<CubicEase EasingMode="EaseOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="RootScale"

Storyboard.TargetProperty="ScaleY" To="1">

<DoubleAnimation.EasingFunction>

<CubicEase EasingMode="EaseOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</VisualState>

<VisualState x:Name="ItemOrdered">

<Storyboard Duration="0:0:1">

<DoubleAnimation Storyboard.TargetName="LayoutRoot"

Storyboard.TargetProperty="Opacity" To="0.45">

<DoubleAnimation.EasingFunction>

<CubicEase EasingMode="EaseOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="RootScale"

Storyboard.TargetProperty="ScaleX" To="0.92">

<DoubleAnimation.EasingFunction>

<CubicEase EasingMode="EaseOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="RootScale"

Storyboard.TargetProperty="ScaleY" To="0.92">

<DoubleAnimation.EasingFunction>

<CubicEase EasingMode="EaseOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

x:Name="PART_ContainerCheckBoxLayout">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<Grid x:Name="PART_ContainerLayout" Grid.Column="1">

<ContentControl x:Name="PART_ContainerHolder"

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

Margin="{TemplateBinding Padding}"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}" />

</Grid>

<Grid Visibility="Collapsed" x:Name="PART_CheckBoxLayout"

Grid.Column="0">

<telerikPrimitives:ItemCheckBox IsHitTestVisible="False"

x:Name="PART_CheckBox" />

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</telerikInput:RadListPicker.PopupItemStyle>

</telerikInput:RadListPicker>

Give it a try and let me know how it goes.

On a side note, I wanted to let you know that this week we'll be working with limited capacity due to national holidays so we'd like to apologize for any delays in the support communication.

Kind regards,
Kiril Stanoev
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.