Styling selecteditem

2 posts, 0 answers
  1. Fredrik
    Fredrik avatar
    54 posts
    Member since:
    Sep 2010

    Posted 02 Nov 2011 Link to this post

    Hello !!

    I'm trying to style the ListPickerItem to have a certaine color when selected and not the default one from the phone.
    How can I do this task?
    I have tryied to modify the ListPickerItem template and have different colors in the VisualStateGroup's "Selected" area with no good result.
    All it does is selecting all of the selected items with my color and not just the only one selected.
    Please provide a small sample how to achive this task.

    Regards

    Fredrik
  2. Georgi
    Admin
    Georgi avatar
    296 posts

    Posted 07 Nov 2011 Link to this post

    Hi Fredrik,

    Thank you for contacting us and for your question.

    The visual states are defined in the ControlTemplate of each list picker item. Therefore you will need to modify it in order to change a certain state. In the Q2 2011 SP1 of the control we have added the ItemStyle property which may be used to define the appearance of each list picker item. So, you may declare this in XAML:

    <telerikInput:RadListPicker x:Name="listPicker">
        <telerikInput:RadListPicker.ItemStyle>
            <Style TargetType="telerikPrimitives:SelectorItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerikPrimitives:SelectorItem">
                            <Border Background="{TemplateBinding Background}">
     
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="content" Storyboard.TargetProperty="Foreground" Duration="0">
                                                    <DiscreteObjectKeyFrame Value="Red" KeyTime="0"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
     
                                <ContentControl x:Name="content"
                                                Content="{TemplateBinding Content}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                Foreground="{TemplateBinding Foreground}"
                                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                Margin="{TemplateBinding Padding}"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </telerikInput:RadListPicker.ItemStyle>
    </telerikInput:RadListPicker>

    This however will work when the control is operating in Inline mode. This is an omission in the version you are using. I would like to thank you for bringing our attention to this issue - I have updated your Telerik points for your time and feedback.

    We will added a property named PopupItemStyle that will allow you to modify the appearance of each item in the popup part of the picker. This new property will be available with our official Q3 2011 release, due in about 10 days.

    Do not hesitate to write us back with any question/problem you may have regarding our tools.

    Greetings,
    Georgi
    the Telerik team

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

  3. DevCraft banner
Back to Top