C++/ WinRT - WinUI 3 - How to connect 2 view models to one view optimally?

Question

Hi,
I have 2 models and 2 view models, one for each of the models.
How to connect both to one view (MainWindow) because usually you should only have one MainViewModel, right?

I took this example: https://learn.microsoft.com/de-de/windows/uwp/cpp-and-winrt-apis/binding-property

At the end of the article, they bind the BookstoreViewModel to the MainPage as "BookstoreViewModel MainViewModel".

Let's say i have two view models.

• Bookstore
• Shoestore

(Could be also something like Bookstore and Users)

Should i add them as follows to the MainWindow?

• BookstoreViewModel BookstoreMainViewModel
• ShoeStoreViewModel ShoeStoreMainViewModel

Unfortunately I don't quite understand that. I've seen a few examples like this:

• https://learn.microsoft.com/en-us/answers/questions/273744/how-to-assosiate-two-viewmodels-with-single-view-i.html
• https://www.c-sharpcorner.com/UploadFile/ff2f08/multiple-models-in-single-view-in-mvc/

Is this much different now than in C++? Could you explain to me in 1-2 sentences what would be the best approach here?

(Maybe the solution is actually right in the links, but I'm not quite sure what to do with it?!)

Answer 1

Hello,

Welcome to Microsoft Q&A!

If you want to access to different models in one XAML element, you need to make another model which wraps both of the two target models as accessible properties. A model like the following.

MainViewModel： -BookstoreViewModel -ShoeStoreViewModel

• other properties

If you are using x:Bind, the current XAML will use the code-behind as DataContext by default. So you need to make the MainViewModel a property of the MainWindow (take MainWindow as example). After that, you could access the BookstoreViewModel and BookstoreViewModel in the MainWindow's Xaml.

I've made a simple demo in C# to explain how it works, you might need to convert it to C++/WinRT.

MainWindow Xaml:

 <StackPanel  Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">


        <TextBlock Text="{x:Bind mainViewModel.bookstoreViewModel.Name}"/>
        <TextBlock Text="{x:Bind mainViewModel.shoeStoreViewModel.Name}"/>
    </StackPanel>

MainWindow Code-behind:

    public sealed partial class MainWindow : Window
    {
        public MainViewModel mainViewModel;
        public MainWindow()
        {
            this.InitializeComponent();

            mainViewModel= new MainViewModel();
        }
    }


    public class MainViewModel
    {

        public ShoeStoreViewModel shoeStoreViewModel { get; set; }
        public BookstoreViewModel bookstoreViewModel { get; set; }

        public MainViewModel()
        {
            shoeStoreViewModel = new ShoeStoreViewModel();
            bookstoreViewModel = new BookstoreViewModel();
        }
    }

    public class ShoeStoreViewModel 
    {
        public string Name { get; set; }

        public ShoeStoreViewModel()
        {
            Name = "ShoeStore";
        }
    }
    public class BookstoreViewModel
    {
        public string Name { get; set; }

        public BookstoreViewModel()
        {
            Name = "Bookstore";
        }
    }

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.