SlideInEffect and TurnstileFeatherEffect not working

Question

Anyone ever had problems with SlideInEffect and TurnstileFeatherEffect from windows phone toolkit?

I am trying to make SlideInEffect work on LongListSelector and LongListMultiSelector with no luck so far.

Also the TurnstileFeatherEffect does not work when the page is loading but it does work when navigating away from them. Same applies to all pages (panorama / pivot / normal pages).

Take for example this code on a normal page:

<phone:PhoneApplicationPage
    x:Class="SamplePage.Pages.About"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    shell:SystemTray.IsVisible="True">

    <!--Transitions-->
    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,20">
            <TextBlock Text="ABOUT" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#404041" FontWeight="Bold" toolkit:TurnstileFeatherEffect.FeatheringIndex="0"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="24,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Grid>
                <Image Height="100" Source="/Assets/Images/logo.png" Margin="-5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>

                <StackPanel Margin="0,90,0,0">
                    <StackPanel Margin="0,0,0,0" Orientation="Horizontal" HorizontalAlignment="Left" toolkit:TurnstileFeatherEffect.FeatheringIndex="2">
                        <Image Height="76" Width="76" Margin="-16,0,-20,0" Source="/Assets/AppBar/appbar.shield.png"/>
                        <HyperlinkButton Foreground="#FF474747" NavigateUri="http://sample.com/" TargetName="_anything" Content="Privacy Policy"/>
                    </StackPanel>
                    <StackPanel toolkit:TurnstileFeatherEffect.FeatheringIndex="3" Margin="0,-20,0,0" Orientation="Horizontal" HorizontalAlignment="Left">
                        <Image Height="76" Width="76" Margin="-16,0,-20,0" Source="/Assets/AppBar/appbar.email.png"/>
                        <HyperlinkButton Foreground="#FF474747" NavigateUri="http://sample.com/" TargetName="_anything" Content="Send Feedback"/>
                    </StackPanel>
                </StackPanel>

                <ScrollViewer Margin="0,210,0,0">
                    <Grid>
                        <StackPanel Margin="2,0,12,0">
                            <!-- HEADER -->
                            <TextBlock TextWrapping="Wrap" Text="Version" FontWeight="Bold" FontSize="30" Foreground="#FF363636" toolkit:TurnstileFeatherEffect.FeatheringIndex="4"/>
                            <!-- BODY -->
                            <RichTextBox TextWrapping="Wrap" Margin="-10,0,0,0" TextAlignment="Justify" FontSize="24" Foreground="#FF363636" toolkit:TurnstileFeatherEffect.FeatheringIndex="5">
                                <Paragraph>
                                    <Run Text="0.0.1"/>
                                </Paragraph>
                            </RichTextBox>

                            <!-- HEADER -->
                            <TextBlock TextWrapping="Wrap" Text="Description" FontWeight="Bold" FontSize="30" Foreground="#FF363636" toolkit:TurnstileFeatherEffect.FeatheringIndex="6"/>
                            <!-- BODY -->
                            <RichTextBox TextWrapping="Wrap" Margin="-10,0,0,0" TextAlignment="Justify" FontSize="24" Foreground="#FF363636" toolkit:TurnstileFeatherEffect.FeatheringIndex="7">
                                <Paragraph>
                                    <Run Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."/>
                                </Paragraph>
                            </RichTextBox>

                            <!-- HEADER -->
                            <TextBlock TextWrapping="Wrap" Text="Developed by" FontWeight="Bold" FontSize="30" Foreground="#FF363636" toolkit:TurnstileFeatherEffect.FeatheringIndex="8"/>
                            <!-- BODY -->
                            <Grid HorizontalAlignment="Left" Width="440" toolkit:TurnstileFeatherEffect.FeatheringIndex="9">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <Image Grid.Column="0" HorizontalAlignment="Left" Source="/Assets/Images/logo.png"></Image>
                                <Image Grid.Column="1" Margin="5,0,0,0" HorizontalAlignment="Left" Source="/Assets/Images/logo.png"></Image>
                            </Grid>
                        </StackPanel>
                    </Grid>
                </ScrollViewer>
            </Grid>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

Also note that I changed RootFrameto new TransitionFrame().

Answer 1

After some time I found the problem.

So it seems like on some pages where feather transitions are not supported you have to you use the normal transitions:

    <!--Transitions-->
    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

After putting that on the MainPage.xaml which happens to be a panorama everything else works just fine.