Search code examples
silverlightdata-bindingwindows-phone-7silverlight-toolkittransition

Loading data in WP7 silverlight application and transitions


I am making a WP7 Silverlight application and using a ViewModel to store the data and as the datacontext for the pages.

Each PhonePage has its own data and I call the App.ViewModel.LoadData() in the Page_Loaded event-handler. There is a ListBox which shows the Data in the ViewModel.

I use the TurnstileTransition transition from the Silverlight toolkit from Codeplex. (http://silverlight.codeplex.com/releases/view/60291)

FURTHER CLARIFICATION The transition is defined as a resource in App.xaml as:

<Style x:Key="TurnstileTransition" TargetType="phone:PhoneApplicationPage">
                <Setter Property="toolkit:TransitionService.NavigationInTransition">
                    <Setter.Value>
                        <toolkit:NavigationInTransition>
                            <toolkit:NavigationInTransition.Backward>
                                <toolkit:TurnstileTransition Mode="BackwardIn"/>
                            </toolkit:NavigationInTransition.Backward>
                            <toolkit:NavigationInTransition.Forward>
                                <toolkit:TurnstileTransition Mode="ForwardIn"/>
                            </toolkit:NavigationInTransition.Forward>
                        </toolkit:NavigationInTransition>
                    </Setter.Value>
                </Setter>
                <Setter Property="toolkit:TransitionService.NavigationOutTransition">
                    <Setter.Value>
                        <toolkit:NavigationOutTransition>
                            <toolkit:NavigationOutTransition.Backward>
                                <toolkit:TurnstileTransition Mode="BackwardOut"/>
                            </toolkit:NavigationOutTransition.Backward>
                            <toolkit:NavigationOutTransition.Forward>
                                <toolkit:TurnstileTransition Mode="ForwardOut"/>
                            </toolkit:NavigationOutTransition.Forward>
                        </toolkit:NavigationOutTransition>
                    </Setter.Value>
                </Setter>
            </Style>

And every page has the style defined as:

Style="{StaticResource TurnstileTransition}"

Everything works fine.

However, the data is bound to the Listbox BEFORE the Transition has finished!!

This looks ugly!

Can I handle the event at the END of the transition (So I load the data here and bind it), if so where do i add the eventhandler??

Can I handle the event at the START of the transition (So I clear the data here), if so where do i add the eventhandler??

Do you suggest some other solution that I must consider?

How can i add an event-handler to the Transition's completed event, what is the name of the transition object?? And transition has 2 types of transitions, can i detect in which type (Forward or Backward) of transition happened and completed?


Solution

  • Try this (within the context of the page you're navigating to)

            var transition = TransitionService.GetNavigationInTransition(this); //This being the page with the associated navigation
            transition.EndTransition += transition_EndTransition;
    
    ...
            void transition_EndTransition(object sender, System.Windows.RoutedEventArgs e)
            {
                DataContext = ...;
            }
    

    I did this to get a smoother animation because otherwise the DB work I needed to do ruined the fluidity of the transition because it executed too early if I ran it in the OnNavigatedTo 'event'