Transition from page to page

12 posts, 1 answers
  1. Charles
    Charles avatar
    75 posts
    Member since:
    Aug 2008

    Posted 16 Nov 2010 Link to this post

    I see in your sample code for the RadTransitionControl that you simply demo the transition using an image as the content for the transition control. Is it possible to use the transition effects when an application goes from page to page?

    Specifically, my example would be a button on one page that, when clicked, navigates to a new page (where some data is loaded and displayed). Is it possible (and do you have examples) where the transition effect could be applied when navigating to the new page?

    Thanks.
  2. Answer
    Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 16 Nov 2010 Link to this post

    Hello Charles,

    Yes - we support this. The control you need to take a look at is the RadPhoneApplicationFrame. It is used also in our Example solution for the page transitions.

    In application initialization the RootVisual is set by default to PhoneApplicationFrame, you need to replace this with the RadPhoneApplicationFrame. Here is a code snippet and a sample project is attached – check the App.xaml.cs file and search for “Rad”.

    private void InitializePhoneApplication()
      
    {
      
           if (phoneApplicationInitialized)
      
                  return;
      
      
           // Create the frame but don't set it as RootVisual yet; this allows the splash
      
           // screen to remain active until the application is ready to render.
      
           RootFrame = new RadPhoneApplicationFrame();

    Please note that next week we will release a CTP2 of our controls which will contain a set of predefined tranistions between the pages. The API will also slightly change.

    If you need a pre-release binaries with the new API - please let us know.

    Best wishes,
    Valentin.Stoychev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. DevCraft banner
  4. Charles
    Charles avatar
    75 posts
    Member since:
    Aug 2008

    Posted 16 Nov 2010 Link to this post

    That has to set a record for the fastest response ever! Thanks.

    I was able to make it work in my application. I was not able to deploy the attached sample to see it in action, but adding the appropriate code to my app worked.

    Just one follow-up. Is there any way to change the default transition? As I read the latter part of your reply, it sounds like the default plane projection transition is all there is when used this way. Is that true or can I change it prior to the release of CTP2 of the controls? (I can wait for now, so there wouldn't be a need to get an early release.)
  5. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 16 Nov 2010 Link to this post

    Hi Charles,

    Yes - you will be able to change it. The current API is somewhat complex, but the new one that is coming is very simple and it just a matter of one line of code to select a predefined transition. It will be similar to
    this:

    ...
    RootFrame = new RadPhoneApplicationFrame() { Transition = new RadSviwelTransition() }
    ....

    With the code above the RadSviwelTransition is defined as an App wide transition for all pages. You will be able to specify a different transition for a specific pages by using attached properties. I'll write a long blog post about this next week, when the binaries are live.

    All the best,
    Valentin.Stoychev
    the Telerik team


    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Charles
    Charles avatar
    75 posts
    Member since:
    Aug 2008

    Posted 09 Dec 2010 Link to this post

    I was using the latest version of the page transitions, but they caused some issues with my page-to-page navigation.

    It's a bit complicated to describe without uploading the entire project (which I can't do because it's my client's proprietary code), but I'll give it a try.

    If I use code such as suggested
    RootFrame = new RadPhoneApplicationFrame() { Transition = new RadSviwelTransition() }

    Navigation through some of the transitions work fine. It is when I return to the starting page (by hitting the device back button) and then start over again that I encounter problems. Now, I do navigate to the same "details" page from two different areas, but this page is popped from the stack by pressing the device back button. (I've been extremely careful to monitor the pages and the stack and such and, in fact, once I take out the RadPhoneApplicationFrame and the transitions, everything works fine.)

    The problem itself is the fact that using the back button does not get me to my previous page when using the transition and RadPhoneApplicationFrame. Instead, I get a flash of the current screen and a blank screen. Another press of the back button exits the application. This during the following scenario:
    • Start page with two buttons - "My Profiles" and "Search Profiles".
    • Press either button. The My Profiles navigates to a page with a list of profiles that are assigned to me. The Search Profiles navigates to a page that you can search for profiles on. Once you search, a list of profiles appears. Basically, both pages display a list of profiles.
    • Now, in either of the lists, select a profile. This navigates to the same Pivot page with details related to the profile. (This is the page that is used in the same way by multiple sources.)
    • Now press the device back button. This returns you to previous page. Again and you are back to start page with the buttons.
    • Now press one of the buttons - "My Profiles" or "Search Profiles". Above steps are repeated creating a list of profiles.
    • Click again on one of the profiles and you go to the details page.
    • Here is where the trouble begins. Press back button - flash of details screen and blank screen.
    • Press again and you are out of app.

    Seems like it might be a bug in this early release. I hope I've been clear in my description.

  7. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 15 Dec 2010 Link to this post

    Hello Charles,

    First of all - thank you for the detailed explanation - much appreciated!
     
    We prepared a sample application and followed your steps, but was we unable to reproduce the issue. It seems we are missing something. We added one main page with links to two aditional pages (Page1, Page2) that they both link to a third page (Page3). We followed the steps you describe, but was unable to find the issue.

    Please find the project attached and let us know if you can reproduce it with it. If you can tweak it so the issue appears - please let us know.

    Thank you in advance for your cooperation!

    Greetings,
    Valentin.Stoychev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Charles
    Charles avatar
    75 posts
    Member since:
    Aug 2008

    Posted 16 Dec 2010 Link to this post

    I looked at and tried out your sample. It did not exactly replicate what I am doing. For instance, it uses Hyperlink buttons with the navigation URI set in XAML where I used regular buttons and selections in a listbox to navigate using the NavigationService. Also, I have set the transition for the pages within the constructor of the RadPhone ApplicationFrame. Like this:
    RootFrame = new RadPhoneApplicationFrame() { Transition = new RadTurnstileTransition() };


    In any case, I have created a new project that does demonstrate the problem. I cannot attach it to this post as a zip file, so I will open a support ticket.

    Once again, to replicate the behavior:
    1) Main page has two buttons.
    2) Press the Page One button. This navigates to a page with a big button on it marked "Go to Pivot".
    3) Press that button and it brings you to the reusable Pivot page.
    4) Navigate back to the Go to Pivot page.
    5) Navigate back to the main page.
    6) Press the Page Two button.
    7) This brings you to another page that is identical to the first Go to Pivot page. (But it is a different page - not the reusable one.)
    8) Press the big Go to Pivot button.
    9) From the pivot page (the one that is targeted by each of the Go to Pivot pages) navigate back.
    10) This is where the buggy behavior begins.

  9. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 20 Dec 2010 Link to this post

    Hi Charles,

    Thanks for sending us the project - we identified the issue and a resolution is coming soon.

    Kind regards,
    Valentin.Stoychev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Saitek
    Saitek avatar
    1 posts
    Member since:
    Dec 2010

    Posted 15 Jan 2011 Link to this post

    Here's how I'm able to get what I'm assuming is the same error. It happens every time, without fail with two different apps.
    1. From the WP7 Start Screen open MyApp. 
    2. Once in, navigate to MyAppsubpage 
    3. Now press the Windows Key on your phone to go back to the Start Screen
    4. Now press the Back Button
    5. You are instantly returned to MyAppsubpage
    6. Now press the Back Button again. Normally, (without the page transitions) this will return you to MyApp's mainpage, but with the transitions it kicks you out with "A first chance exception of type 'System.NullReferenceException' occurred in Telerik.Windows.Core.dll"

    Attached is the call stack location.

    1. Valentin.Stoychev
      Admin
      Valentin.Stoychev avatar
      2198 posts

      Posted 17 Jan 2011 Link to this post

      Hi Charles,

      Thanks for sending this - we already fixed the issue internaly - if you need the new binaries earlier than our next public release (in the beggining of February) - please let us know.

      Kind regards,
      Valentin.Stoychev
      the Telerik team
      Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
    2. Shruti
      Shruti avatar
      10 posts
      Member since:
      Jul 2013

      Posted 24 Jul 2013 Link to this post

      hi..
      can u give an example of a project where u navigate from one page to another page using horizontal sliding effect In a WPF Application

      Thanks in advance
      Shruti
    3. Deyan
      Admin
      Deyan avatar
      2037 posts

      Posted 26 Jul 2013 Link to this post

      Hi Shruti,

      Please take a look at the Telerik RadControls for WPF forums for information on such examples.

      These are the RadControls for Windows Phone forums which target different framework and operating system.

      Regards,
      Deyan
      Telerik
      TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
      Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
      Sign up for Free application insights >>
    Back to Top
    DevCraft banner