locked
Switching between screens... RRS feed

  • Question

  • Hello, all. First of all, great job with Expression Blend 4! I'm loving it at the moment, and having great fun losing myself in all its design and animation features.

     

    However, I've got a problem that I'm finding real hard to crack. Not sure why. But after what seems like hours and hours of google/tutorial searching, I can't find one person who shares a similar problem to me.

     

    Anyway, the problem is switching between screens. Let me explain a little further: I have a project, very basic at the momement, just a intro screen with a basic logo animation, and a 'Click here to enter' button.

     

    What I want to do is to get the user to click the button and have a new screen/page of content appear in place of the intro screen (same size, shape, etc) with maybe some menus on or something. I haven't yet got round to deciding yet. Mainly because I can't work out how to setup this other, new screen.

     

    What would be the best way to do this? So far, I've played around with the visual state manager, but when I make edits to my new screen, or 'state', it edits over my original intro state. Is there a way to stop this? So I can edit them both individually? Or am I going about this in completely the wrong way?

     

    I'd be very grateful if someone could point me in the right direction and help me understand the best way of doing this. Thanks.

     

    **Expression Blend 4, WPF**

     

    Tuesday, April 12, 2011 9:25 AM

Answers

  • What you are looking for is the navigation framework. You will have a frame hosting pages that can navigate to one another.

    http://msdn.microsoft.com/en-us/library/ms750478.aspx

    Tuesday, April 12, 2011 1:38 PM
    Moderator
  • Different is always hard, especially when there are multiple ways to do things.

    I did a quick screen capture (please forgive the quality, there was very little planning, just hit record and go). It uses a behavior I wrote a while back for this exact question, you can find that here:

    http://chuckhays.net/2010/04/12/wpf-navigation-framework-navigate-behavior/

    If you don't know, behaviors are little bits of code that can be attached to objects. They are "artboard" friendly in that they can be used in a drag/drop fashion, as you will see in the screen capture. This behavior attempts to find a Frame object and navigate to the page specified. This is the same end result as coding these up in an event handler.

    You can also use the built in hyperlink class that works inside textblocks. Something like:

    <TextBlock><HyperLink NavigateUri="Page2.xaml">This is the text</HyperLink></TextBlock>

    You mentioned reverting to Flash, I just want to check before you invest lots of time, are you intending to make WPF Windows desktop apps or Silverlight apps that work in a web browser?

    Here is the screen capture:

    http://chuckhays.net/slvids/wpfframenav/

    • Marked as answer by Bilbo Bagshot Thursday, April 14, 2011 12:20 PM
    Wednesday, April 13, 2011 5:26 PM
    Moderator

All replies

  • What you are looking for is the navigation framework. You will have a frame hosting pages that can navigate to one another.

    http://msdn.microsoft.com/en-us/library/ms750478.aspx

    Tuesday, April 12, 2011 1:38 PM
    Moderator
  • Thanks very much for the reply, Chuck. That looks exactly what I'm after, so I'll be sure to give that link a good read. Thanks again, mate.
    Tuesday, April 12, 2011 6:39 PM
  • Well, I've read the link you provided about WPF navigation, and I have to say...I just feel more confused. I'm sure it does answer my questions, but I was hoping Blend had a simpler way of doing this.

    I mean, I can do amazing, complex animations or transitions with nothing more than a few mouse clicks. But when it comes to doing something incredibly simple, like navigating from one page to another, I have to start typing in mountains of code. In all honesty, I feel that if I'm going to have input loads of code just to navigate pages, then I don't really see the need for me to use Blend at all. I may as well just stick with Visual Studio WPF, as I find inputting and debugging code a lot more pleasurable in VS.

    I'm also tempted to just revert back to Flash, as it seems more geared towards what I want to do. WPF or Blend seem to handle complex/time consuming processes really well, but makes hard work of really simple stuff like switching pages.

    I hope I'm wrong, and I'm just being a little dim as I'd really like to start using Blend to make my apps, but I'm wasting so much time just trying to understand the basics that I wonder if it is indeed worth the hassle. 

    I'm going to take a break for a day or two, as 3 days of frustratingly searching Google and Bing have left me feeling a little faded. Maybe a charge of batteries will hopefully help me understand the monumental task of navigating from one page to another.

    Wednesday, April 13, 2011 4:19 PM
  • Different is always hard, especially when there are multiple ways to do things.

    I did a quick screen capture (please forgive the quality, there was very little planning, just hit record and go). It uses a behavior I wrote a while back for this exact question, you can find that here:

    http://chuckhays.net/2010/04/12/wpf-navigation-framework-navigate-behavior/

    If you don't know, behaviors are little bits of code that can be attached to objects. They are "artboard" friendly in that they can be used in a drag/drop fashion, as you will see in the screen capture. This behavior attempts to find a Frame object and navigate to the page specified. This is the same end result as coding these up in an event handler.

    You can also use the built in hyperlink class that works inside textblocks. Something like:

    <TextBlock><HyperLink NavigateUri="Page2.xaml">This is the text</HyperLink></TextBlock>

    You mentioned reverting to Flash, I just want to check before you invest lots of time, are you intending to make WPF Windows desktop apps or Silverlight apps that work in a web browser?

    Here is the screen capture:

    http://chuckhays.net/slvids/wpfframenav/

    • Marked as answer by Bilbo Bagshot Thursday, April 14, 2011 12:20 PM
    Wednesday, April 13, 2011 5:26 PM
    Moderator
  • Chuck....You are awesome! Thank you very much. Watching that video has helped me so much, I can't thank you enough.

    Also, I've finally realised why I was having such a nightmare with the visual state manager. It was because I was using this bit of code to trigger different states:

     

    VisualStateManager.GoToState(this, "Intro", True);

     

    I was going out of my mind wondering why it never worked, and then I stumbled across another thread in this forum where it was suggested (I think by you) that the correct code for screen state changes rather than control states should be:

     

    Microsoft.Expression.Interactivity.Core.ExtendedVisualStateManager.GoToElementState(this.LayoutRoot, "Intro", true);

     

     This one line of code, along with your great video above, has ended days of insane frustration. Of course, I'm now wondering why the hell I couldn't see it myself now, but I guess your brain does turn to mush after the Google marathons I've been on.

    Anyway, Thanks again for your help. I feel I can finally move on with my project now.

    Edit: This tutorial is also very good for page transitions: http://www.necronet.org/archive/2010/04/29/animated-transitions-between-pages-in-wpf-silverlight-without-any-code.aspx
    Thursday, April 14, 2011 12:19 PM