Implementing LayeredUI example with Studio and Unity

Danilo · 09 Feb 2025, 16:28

Hey guys,

I am trying for 4 days now to get the LayeredUI example running in Studio and Unity. I feel like I tried everything but I can't get it to work. I want to use the ContentControl to present different views based on the ViewModel that is added to the MainViewModel. By that I want to navigate between multiple views.

Here is how I did it so far:
1. I implemented a base ViewModel that is used for all views that should be presented by the ContentControl. This one implements the INotifyPropertyChanged and the OnValidate for Editor changes which I will override in the specific ViewModels for the different Views.

namespace Cindervale
{
	[Serializable]
	public class BaseViewModel : INotifyPropertyChanged
	{
		public virtual void OnValidate()
		{
			
		}
		
		#region INotifyPropertyChanged
		public event PropertyChangedEventHandler PropertyChanged;

		public void OnPropertyChanged(string name)
		{
			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
		}
		#endregion
	}
}

2. Then I define a specific ViewModel for the first view, with a property, that has no functionality, but is just for me to show in the Unity Editor to quick see if the right ViewModel is selected and also to not have an empty ViewModel. But the property/field is not used for NoesisGUI.

namespace Cindervale
{
	[Serializable]
	public class IslandViewModel : BaseViewModel
	{
		public bool _showIsland;
	}
}

3. Then I add a property to my MainViewModel that is bound to the ContentControl to pick the right view. BottomContentViewModel is used to pick the different Views. The stuff with the BottomMenuViewModel is not relevent here. It is used for the menu to pick the views.

public class MainViewModel : MonoBehaviour, INotifyPropertyChanged
    {
        [SerializeField] NoesisView view;
        
        public BottomMenuViewModel _bottomMenuViewModel = new BottomMenuViewModel();
        public BottomMenuViewModel BottomMenuViewModel { get => _bottomMenuViewModel; }
        
        
        public BaseViewModel _bottomContentViewModel;
        public BaseViewModel BottomContentViewModel { get => _bottomContentViewModel; }
        
        
        void Start()
        {
            _bottomContentViewModel = new IslandViewModel();
            view.Content.DataContext = this;
        }
        
        private void OnValidate()
        {
            BottomMenuViewModel.OnValidate();
        }
    }

4. I rebuild the same MainViewModel in Studio to easily create the Bindings in the Studio app. I create a data set and assign it to the root of the MainPage.

: Screenshot 2025-02-09 162019.png (23.14 KiB) Viewed 236 times

5. Then I create a new DataTemplate in the Resources of my MainPage and rename it to IslandViewDataTemplate:

: Screenshot 2025-02-09 161043.png (3.82 KiB) Viewed 236 times

6. In the properties of the DataTemplate I change the DataType to the IslandViewModel

: Screenshot 2025-02-09 161254.png (23.67 KiB) Viewed 236 times

7. I create a small UserControl with a Grid and a TextBlock to visualize that the right DataTemplate is selected.

8. In the MainPage I add the ContentControl to the Grid where it is suppose to be placed. The Grid is designed so that the size automatically fits the content of the ContentControl.

Danilo · 09 Feb 2025, 16:34

9. In the Content property of the ContentControl I bind the BottomContentViewModel

: Screenshot 2025-02-09 162743.png (40.37 KiB) Viewed 235 times

After that I tested the functionality and it didn't work. So I digged into the XAML and figured out that the code is not equal the code presented int he LayerUI example.
The DataTemplate DataType was not using the x:Type part.

<DataTemplate x:Key="IslandViewDataTemplate" DataType="cindervale:IslandViewModel">
        <UserControl>
          <Grid MinWidth="100" MinHeight="100" Background="#FF9F0000">
            <TextBlock Text="IslandViewModel" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center"/>
          </Grid>
        </UserControl>
      </DataTemplate>

So I changed that to

DataType="{x:Type cindervale:IslandViewModel}"

manually to see if it works then. It did not.

After days of hopeless research and try and error I gave up and now my only hope is that you have an idea, why my DataTemplate is not working.

11 Feb 2025, 14:13

The problem is that the DataTemplate has a Key assigned, so it is no longer the default template and it is not being applied.

<DataTemplate x:Key="IslandViewDataTemplate"

We are working on improvements to this part. For now, you need to manually remove the name of the resource.

Please, let me know if this works for you.

Danilo · 11 Feb 2025, 16:30

Hey Jesus,

thanks for the solution. It works! That's the life of a programmer: You spend hours (or days) in solving a "problem" that actually takes 2 seconds to be solved. puuhh.

I created a ticket for this minor issue, so that you can keep track of it:
https://www.noesisengine.com/bugs/view.php?id=3959

Thanks again.

Implementing LayeredUI example with Studio and Unity Topic is solved

Implementing LayeredUI example with Studio and Unity

Re: Implementing LayeredUI example with Studio and Unity

Re: Implementing LayeredUI example with Studio and Unity

Re: Implementing LayeredUI example with Studio and Unity

Who is online