Implementing LayeredUI example with Studio and Unity
Posted: 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.
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.
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.
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.
5. Then I create a new DataTemplate in the Resources of my MainPage and rename it to IslandViewDataTemplate:
6. In the properties of the DataTemplate I change the DataType to the IslandViewModel
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.
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.
Code: Select all
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
}
}Code: Select all
namespace Cindervale
{
[Serializable]
public class IslandViewModel : BaseViewModel
{
public bool _showIsland;
}
}Code: Select all
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 6392 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 6392 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 6392 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.