Question

I have a xaml page but transition effect doesn’t work, the page is shown normal way without any effect. The code of the page is the following:

<phone:PhoneApplicationPage 
x:Class="eenGastos.listadoGastos"
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"
shell:SystemTray.IsVisible="True"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">
<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>

<!--LayoutRoot es la cuadrícula raíz donde se coloca todo el contenido de la página-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contiene el nombre de la aplicación y el título de la página-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="eenGastos" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="Lista de gastos" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>


    <ListBox Margin="0,140,0,28" Name="lstGastos" Height="592" Width="450">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="0,0,0,0">
                    <Image Height="80" Width="80" Margin="2,0,2,0" Name="Image1" VerticalAlignment="Center" Source="{Binding imagenTipoGasto}"/>
                    <!--"images/gastos/iconosGasto/iconoCOMIDA.png"-->
                    <StackPanel Width="370" Height="90">
                        <Grid>
                            <TextBlock Text="{Binding Concepto}" HorizontalAlignment="Left" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="White"/>
                            <Grid Width="100" HorizontalAlignment="Right">
                                <TextBlock Text="{Binding Total}"  HorizontalAlignment="left" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="Green"/>
                                <TextBlock Text="{Binding ISOA}"  HorizontalAlignment="right" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="Green"/>
                            </Grid>                                
                        </Grid>
                        <Grid>
                            <TextBlock Text="{Binding Fecha}" Height="43" Width="100" HorizontalAlignment="Left" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="Green"/>
                            <TextBlock Text="{Binding FormaPago}"  Width="200" TextWrapping="Wrap" Margin="70,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" Foreground="Green"/>
                        </Grid>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <ProgressBar 
            x:Name="pbEnCurso"
            IsIndeterminate="true"
            Visibility="Collapsed" Grid.ColumnSpan="2" Background="Yellow" Foreground="Yellow" />
</Grid>

What is wrong in the code?, how to do insert the transition effect to the page?. In addition, this page is show by this code:

NavigationService.Navigate(New Uri("/listadoGastos.xaml", UriKind.Relative))

Thank you in advance!!

Answer 1

See http://blog.rsuter.com/?p=74

Tip: You can move the transition definition to App.xaml to reuse it in every page…