locked
Pagenavigation across different views, MVVM WIndows Phone 8.1 RRS feed

  • Question

  • Hi,

    I really tried to find a simple tutorial about how to navigate from one view to another with the MVVM pattern and WP 8.1 but have failed.

    All I want is a simple button that will get me from MainPage.xaml to CatView.xaml.

    Is there any good and easy way to do this? Pretend I have 3 different pages.

    MainPage.xaml (StartPage View)

    CatView.xaml (DetailPage View)

    ViewModels/CatViewModel.cs (ViewModel)

    Monday, June 23, 2014 7:13 PM

Answers

  • Hi,
    There is no a navigation with MVVM pattern, what you need is to pass an object from page one that represent something to page two and in the initialization of page two use this object to bind your model to your view.

    Note : MVVM is a pattern not a framework so it is only concerned with View, ViewModel and Model not with navigation or API accessing.

    A great example for MVVM and navigation is the hub template in Visual Studio in WP or the GridView template in Windows Store

    Regards,

     

    Ibraheem Osama Mohamed | My Blog | @IbraheemOM | My Website

    (If my reply answers your question, please propose it as an answer)

    • Marked as answer by coffeebakery Tuesday, June 24, 2014 6:09 PM
    Monday, June 23, 2014 9:15 PM

All replies

  • Hi,
    There is no a navigation with MVVM pattern, what you need is to pass an object from page one that represent something to page two and in the initialization of page two use this object to bind your model to your view.

    Note : MVVM is a pattern not a framework so it is only concerned with View, ViewModel and Model not with navigation or API accessing.

    A great example for MVVM and navigation is the hub template in Visual Studio in WP or the GridView template in Windows Store

    Regards,

     

    Ibraheem Osama Mohamed | My Blog | @IbraheemOM | My Website

    (If my reply answers your question, please propose it as an answer)

    • Marked as answer by coffeebakery Tuesday, June 24, 2014 6:09 PM
    Monday, June 23, 2014 9:15 PM
  • You should take a look at MVVMLight that has an implementation of a  messaging pattern

    http://pauliom.wordpress.com

    Monday, June 23, 2014 10:29 PM
  • Hi,
    There is no a navigation with MVVM pattern, what you need is to pass an object from page one that represent something to page two and in the initialization of page two use this object to bind your model to your view.

    Note : MVVM is a pattern not a framework so it is only concerned with View, ViewModel and Model not with navigation or API accessing.

    A great example for MVVM and navigation is the hub template in Visual Studio in WP or the GridView template in Windows Store

    Regards,

     

    Ibraheem Osama Mohamed | My Blog | @IbraheemOM | My Website

    (If my reply answers your question, please propose it as an answer)

    Hi Ibraheem,

    In the hubapp template they are using pagenavigation?

    On the click event it sets the passed itemclickeventargs e which is the itemviews id that was clicked. I don't understand how this can send you off to a new page. Also since there is a ! set for the pagenavigation?

    private void GroupSection_ItemClick(object sender, ItemClickEventArgs e) { var itemId = ((SampleDataGroup)e.ClickedItem).UniqueId;
    if (!Frame.Navigate(typeOf(ItemPage), itemId))
    {
    //throws an exception
    } }

    Tuesday, June 24, 2014 6:16 AM
  • Hi,

    Lets make it more simple, once you click the item you get its id and you assign its id to itemId.

    and once you have the id you should pass it to the next page so the next page can start its binding from the model

    In WP8.1 the navigation uses Frame.Navigate, this function takes a type (The type of the next page) in the first parameter and the passed object in the second parameter and returns true if there is no problem in navigation to the other page and returns false if an error occurred in the navigation.

    So its much easier to understand

    private void GroupSection_ItemClick(object sender, ItemClickEventArgs e)
            {
                var itemId = ((SampleDataGroup)e.ClickedItem).UniqueId;
    Frame.Navigate(typeOf(ItemPage), itemId);
                    }
    
    

    try this code and you'll understand more but what about the exception

    private void GroupSection_ItemClick(object sender, ItemClickEventArgs e)
            {
                var itemId = ((SampleDataGroup)e.ClickedItem).UniqueId;
    
    bool IsSucess=Frame.Navigate(typeOf(ItemPage), itemId);
    
                // will only enter this block if an error occurred in navigation
    	    if (!IsSucess)
                    {
                       //throws an exception
                    }
    }
    
    

    If you need more clarification please don't hesitate and also if my answers helped you please mark it as an answer.

    Regards,


    Ibraheem Osama Mohamed | My Blog | @IbraheemOM | My Website

    (If my reply answers your question, please propose it as an answer)

    Tuesday, June 24, 2014 7:29 AM
  • Hi, Thanks Ibraheem.

    With your help I know how to implement what I need from my question.

    But, obviously then I will need code behind in my views as when it comes to handle the itemclickevent? I have it working with commands to pass the parameter and behaviors but this won't work with the navigation.

    Doesn't this consider a step away from the MVVM-pattern? But if the Hub Template includes this then I assume I will follow suit.

    It also seems that the way to solve the binding on the next page is to run it from the Model or the "sampledatasource".cs file then as well? I thought that the MVVM-patter was also not to friendly of having executing code in the model?

    Tuesday, June 24, 2014 5:44 PM
  • Hi,

    1)Yeah you're right it is just a very small gap in MVVM if you're considering it as a framework :)

    2) unfortunately you need to bind the new view with every navigation.

    Regards, 


    Ibraheem Osama Mohamed | My Blog | @IbraheemOM | My Website

    (If my reply answers your question, please propose it as an answer)

    Thursday, June 26, 2014 10:38 AM