Use a different DataContext (Data Set) for Components

Danilo · 31 Jan 2025, 22:03

Hey,

I am trying to figure that our for some hours now. But I only run into crashes of Noesis or it just doesn't work at all.

I try to set up a second ViewModel for my component. So I go to the Data Panel and add a new Structure. In the Structure I add a Data Set and add a boolean value called "ShowButton" to the Structure. The boolean value is suppose to trigger the visibility of the Button when toggled. In my simplified example thats the whole ViewModel. Obviously in my game it would have all the data that are neccessary for the view.

When I edit the component and assign the second data set to the root. It looks all fine and I can set all the triggers up. So I go back to the MainPage and assign the first data set for the MainPage to the root of the MainPage. But this apparently overrides the ViewModel in this context for my component. I can't figure out how to make it work.

Am I doing something wrong? I feel a little stuck. Hope you can help me.

04 Feb 2025, 11:12

Hi Danilo,

Usually when creating a Component/UserControl you will expose properties to govern the logic of that control from the xaml that includes it, for example:

<local:Calendar SelectedDate="{Binding SelectedDate}"/>

In this case it makes no sense to assign a DataContext to the Component/UserControl, instead the control properties should provide some default values to preview the bindings inside the Component/UserControl. I see we don't offer this feature in the Component's DynamicProperties, could you please report it in our bugtracker?

There is another situation, when your Component/UserControl is just a View representing an item (view model). Then the idea is that your parent ViewModel should expose the data context of the item either in a property:

<local:PlayerView DataContext="{Binding Player1}"/>

or in a Collection:

<ItemsControl ItemsSource="{Binding Players}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <local:PlayerView/>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

In this case you can apply a local ViewModel to preview your bindings in the Component/UserControl, but as I mentioned, when used in another page, the parent ViewModel should provide the item data context.

Danilo · 05 Feb 2025, 16:16

Hey sfernandez,

thanks for the explanations. My question was more intended to be towards your first part of the answer, when the component is used as a classical UserControl. I just tried to stick to the possibilities Studio provided so far. In my use-case I divide my Overlay UI into three parts and because they are a bit more complex I wanted to bundle them in Components. Since I cannot expose custom dependency properties in Studio I tried that with multiple ViewModels. I just got confused with the way I am desinging the ViewModel in Studio. But I see now how to add ViewModels in the MainViewModel in Studio:

: Screenshot 2025-02-05 154424.png (25.6 KiB) Viewed 3598 times

I am just gonna explain exactly what I am doing, just to make sure that's the way it is intended:

I create the MainViewModel like shown above.
The MainViewModel is composed of two other ViewModels. The BottomViewModel has also five properties. Like in this image:

: Screenshot 2025-02-05 155703.png (32.46 KiB) Viewed 3598 times

Now I assign the MainViewModel to the root of my MainPage.

And in the Component I assign the MainViewModel also to the root and bind the DataTriger (here just as an example to bind something) to the Property from the MainViewModel.BottomMenuViewModel to add functionality like in this image:

Is that the way I am suppose to work with nested ViewModels in Studio?

Use a different DataContext (Data Set) for Components Topic is solved

Use a different DataContext (Data Set) for Components

Re: Use a different DataContext (Data Set) for Components

Re: Use a different DataContext (Data Set) for Components

Who is online