locked
MVVM: ViewModel Binding to details page via XAML (in Blend 2013)

    Question

  • Hey everyone,

    for a while I'm playing around with the development of Windows Store Apps in C#. Currently I try to get familiar with the MVVM-pattern, espacially with the data binding in XAML via Blend 2013. For me the idea sounds quite interesting to bind the viewmodel to the page and display the data, without the need of writing any code-behind.

    I got the idea for this from the MVA-course "Design your XAML-UI with Blend Jump Start" http://www.microsoftvirtualacademy.com/training-courses/designing-your-xaml-ui-with-blend-jump-start

    So in my test-project, I created a model with some sample data, a viewmodel for the mainpage and the mainpage itself. To edit and style the mainpage I only use Blend 2013. I also bound the viewmodel to the data context property of the mainpage, also in Blend. Then I "dragged" the data from the "Data"-tab in Blend on the mainpage to display it as a gridview.

    It worked great so the next step was to create the detailspage, which opens when the user clicks an item in the mainpage. The idea is to create this in the same way as the mainpage: create the viewmodel for the detailspage, create the page itself, bind the viewmodel to the data context property of the page and display the data of the selected item.

    The problem in this case: how do I tell the viewmodel of the detailspage, which item it should display? I tried to pass the selected item to the constructor of the viewmodel, but this doesn't work. So my question to you guys is: how do I cunstruct the viewmodel and how do I pass the selected item of the gridview to the viewmodel, without writing any code-behind? Or another question: what is the standard way in the idea of MVVM, XAML etc. to solve this problem?

    Thank you!

    Tuesday, October 14, 2014 8:36 AM

Answers

  • Hi Keulovic,

    Following article will explain in detail how to use MVVM in Windows Store App and solve your issue

    http://blog.procesium.us/2014/06/magical-mvvm-in-windowsstore-apps-using.html


    Tuesday, October 14, 2014 11:45 AM
  • For this you have to perform Data Binding in which you pass parameters from one page to other Detail page

    which can be done by one of following ways

    For Example your Different Colours items  are appearing in GridView and you want when user click on any on colour item it appear on other page  with other details too.

    Generate GridView SelectionChanged Event and  call your DataModel in it and Passed Selected item data to other page Such as

      public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                this.Loaded += MainPage_Loaded;
            }
    
    
            void MainPage_Loaded(object sender, RoutedEventArgs e)
            {
                gridviewPhotos.SelectionChanged += gridviewPhotos_SelectionChanged;
    
                IKPhoto data = new IKPhoto();
                gridviewPhotos.ItemsSource = data.getAllPhotos();
    
              
    
            }
    
            void gridviewPhotos_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                IKPhoto selectedPhoto = gridviewPhotos.SelectedItem as IKPhoto;
                DetailPage dPage = new DetailPage();
                dPage.selectedImage = selectedPhoto;
                Window.Current.Content = dPage;
    
            }
    
        }

    in the above example IKPhoto is class which have attributes and item details in list I fetched them in MainPage_load event and in selection changed event,passing selected photo information to other page.

    Tuesday, October 14, 2014 5:43 PM

All replies

  • >>how do I cunstruct the viewmodel and how do I pass the selected item of the gridview to the viewmodel, without writing any code-behind? Or another question: what is the standard way in the idea of MVVM, XAML etc. to solve this problem?

    You bind the SelectedItem property of the GridView to a source property of the view model of the view in which the GridView resides:

    <GridView ItemsSource="{Binding Items}"... SelectedItem="{Binding CurrentItem}" .../>

    public class MainPageViewModel
    {
     public List<YourType> Items {get;set;}
     public YourType CurrentItem {get;set;}
    }

    You can then access the currently selected item through this property and for example pass it to the constructor of the details page view model or do whatever you want with it.

    Please remember to mark helpful posts as answer and/or helpful and please remember that a new question deserves a new thread.

    Tuesday, October 14, 2014 10:50 AM
  • Hey,

    thank you for your response.

    The aspekt that I doesn't unterstand yet is this: how do I pass - via XAML respectively Blend - the property (the selected item in mainpage gridview) of the MainPageVieModel to the DetailsPageViewModel, so that I can bind it to the data context of the detailspage?

    Tuesday, October 14, 2014 11:04 AM
  • Hey,

    thank you for your response.

    The aspekt that I doesn't unterstand yet is this: how do I pass - via XAML respectively Blend - the property (the selected item in mainpage gridview) of the MainPageVieModel to the DetailsPageViewModel, so that I can bind it to the data context of the detailspage?

    You don't do this in the XAML but typically in the view model or in some kind of service. You could for example create an instance of the DetailsPageViewModel when the user clicks the item on the main page. This is typicallty implemented using commands:
    http://msdn.microsoft.com/en-us/magazine/jj651572.aspx
    http://blog.magnusmontin.net/2013/06/30/handling-events-in-an-mvvm-wpf-application/

    Remember that the view model is responsible for your application logic whereas the view is only responsible for the structure and appearance of what the user sees on the screen.

    Tuesday, October 14, 2014 11:14 AM
  • Hi Keulovic,

    Following article will explain in detail how to use MVVM in Windows Store App and solve your issue

    http://blog.procesium.us/2014/06/magical-mvvm-in-windowsstore-apps-using.html


    Tuesday, October 14, 2014 11:45 AM
  • Hi,

    thank you for the link. This is the same sample from the MVA-course I mentioned above. Unfortunatelly this sample doesn't cover any kind of detail page (something like, I click on a color which navigates me to a details page with detailed information about the color). But this is the point of my question.

    Tuesday, October 14, 2014 1:52 PM
  • For this you have to perform Data Binding in which you pass parameters from one page to other Detail page

    which can be done by one of following ways

    For Example your Different Colours items  are appearing in GridView and you want when user click on any on colour item it appear on other page  with other details too.

    Generate GridView SelectionChanged Event and  call your DataModel in it and Passed Selected item data to other page Such as

      public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                this.Loaded += MainPage_Loaded;
            }
    
    
            void MainPage_Loaded(object sender, RoutedEventArgs e)
            {
                gridviewPhotos.SelectionChanged += gridviewPhotos_SelectionChanged;
    
                IKPhoto data = new IKPhoto();
                gridviewPhotos.ItemsSource = data.getAllPhotos();
    
              
    
            }
    
            void gridviewPhotos_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                IKPhoto selectedPhoto = gridviewPhotos.SelectedItem as IKPhoto;
                DetailPage dPage = new DetailPage();
                dPage.selectedImage = selectedPhoto;
                Window.Current.Content = dPage;
    
            }
    
        }

    in the above example IKPhoto is class which have attributes and item details in list I fetched them in MainPage_load event and in selection changed event,passing selected photo information to other page.

    Tuesday, October 14, 2014 5:43 PM