How do I change style of the element in focused state. Why my code has no effect?

Question

With the advice from this question I tried applying a different style to the element on focused state. Here's the code of a style defined in App. xaml:

<Style x:Key="RadLoopingListStyle" TargetType="loopingList:LoopingListItem">
    <Setter Property="CacheMode" Value="BitmapCache" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="loopingList:LoopingListItem">
                <Border x:Name="root"
                        Margin="{TemplateBinding Padding}"
                        Background="{StaticResource WhiteBrush}"
                        BorderBrush="{StaticResource PhoneInactiveBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.2" />
                            </VisualStateGroup.Transitions>

                            <VisualState x:Name="Collapsed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="0" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="1" />
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="contentPresenter"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To=".6" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DBlue}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DBlue}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource White}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="1" />
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="contentPresenter"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="1" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To=".3" />
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="FocusStates">

                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.2" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="1" />
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="contentPresenter"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To=".6" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <ContentControl x:Name="contentPresenter"
                                    HorizontalContentAlignment="Center"
                                    VerticalContentAlignment="Center"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    DataContext="{TemplateBinding DataContext}"
                                    FontSize="64"
                                    Padding="{TemplateBinding Padding}">
                        <TextBlock DataContext="{TemplateBinding Content}"
                                    FontSize="64"
                                    Text="{Binding StringFormat='{0}'}" />
                    </ContentControl>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And element definition on desired page:

<telerikPrimitives:RadLoopingList x:Name="StackyLoopingList"
                                                      Grid.Column="0"
                                                      IsCentered="True"
                                                      IsExpanded="False"
                                                      ItemHeight="130"
                                                      ItemWidth="130">
                        <telerikPrimitives:RadLoopingList.ItemStyle>
                            <StaticResource ResourceKey="RadLoopingListStyle" />
                        </telerikPrimitives:RadLoopingList.ItemStyle>
                    </telerikPrimitives:RadLoopingList>

What I wanted to achieve is the RadLoopingList element to look the same in expanded state as in a focused state. The focused event gets fired but the style of the element doesn't change.

I've also tried to programmatically change the style on focused event but it doesn't sound right and I was unsuccessful as well.

Could someone point me at what am I doing wrong? Thanks.

Answer 1

I didn't find the exact solution but I used work around, in the following code I manually change CurrentVisualState of items to Expanded.

        foreach (var item in StackyLoopingList.ChildrenOfType<LoopingListItem>())
        {
            if (item.CurrentVisualState != "Selected") VisualStateManager.GoToState(item, "Expanded", true);
        }