Loopingselector not showing after style definition?

Question

I wanna change the border color of LoopingSelector so I copy the style definition of LoopingSelectorItem (as listed bleow) from Generic.xaml to my PhoneApplicationPage.Resources. And then change the Fill of Grid into Red.

Now the problem is that, when I open this app in simulator, the LoopingSelector does not show up immediately. But as soon as I touch the screen area where the selector should be, it shows up and the border color is what I want. This looks like an initialization problem, but I do not know what to do. I try to copy this style definition without any change from the original Generic.xaml, the problem still exists. Any one can help me with this problem?

  <phone:PhoneApplicationPage.Resources>

    <Style TargetType="primitives:LoopingSelectorItem">
        <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
        <Setter Property="Padding" Value="6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border x:Name="root" CacheMode="BitmapCache" Background="Transparent" Padding="{TemplateBinding Padding}">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">

                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Normal" To="Expanded" GeneratedDuration="0:0:0.33" />
                                    <VisualTransition From="Expanded" To="Normal" GeneratedDuration="0:0:0.33" />
                                </VisualStateGroup.Transitions>

                                <VisualState x:Name="Normal" />

                                <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8" Duration="0"/>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="background" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                        <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush" Duration="0">
                                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="Foreground" Duration="0">
                                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border.RenderTransform>
                            <TranslateTransform x:Name="Transform"/>
                        </Border.RenderTransform>

                        <Grid>
                            <Rectangle x:Name="background" Margin="0" Opacity="0" Fill="Red" CacheMode="BitmapCache"/>

                            <Border x:Name="border" Opacity="0" BorderThickness="3" BorderBrush="{StaticResource PhoneSubtleBrush}">
                                <ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
                                    <ContentPresenter x:Name="contentPresenter" CacheMode="BitmapCache"/>
                                </ContentControl>
                            </Border>
                        </Grid>

                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

Answer 1

I've just found myself having this exact same problem. The way I got round it was by taking the LoopingSelector and LoopingSelectorItem code from the Toolkit's source, rename them to CustomLoopingSelector and CustomLoopingSelectorItem. Then in my generic.xaml, but the Toolkit's default style for the LoopingSelector, but then add the style I wanted for the LoopingSelectorItem as the CustomLoopingSelectorItem's default style.

This has now given me the style I want, and doesn't blank out when coming back into the page. Might be worth a try for you.