manuel
Topic Author
Posts: 13
Joined: 16 Aug 2022, 10:06

Best-practice to design a view that bases heavily on data in Blend

08 Feb 2023, 15:14

Hey everyone,

currently, I am prototyping a UserControl that utilizes a TreeView to display nested ObservableCollections. To build the individual elements of my HierarchicalDataTemplate I need to have SampleData available: on one hand, at design-time to bind the UI elements to the DataModel and to see something on the screen, on the other hand at run-time to be able to click through the menu to check its functionality. Because we integrate Noesis in a C++ project, there is a second level of "run-time" that needs to be kept in mind (Blend/C# and Game/C++).

I would like to know how I can provide the same set of SampleData in all three worlds.

I've already tried different solutions and none is actually practicable. Especially because the task of designing the View will not be done by a programmer in the future.

The closest solutions were...
a) Creating the SampleData and with it the DataModel as a XML file. And importing that file as SampleData in the Data Tab of Blend. This enables me to bind my elements correctly and I can see the results immediately at design-time. But when running the project in Blend, this SampleData does not exist, of course. Therefore, in c# I had to implement the necessary DataType classes, with it the actual ViewModel, and had to populate the ViewModel with my SampleData by hand to create the run-time DataContext. And whenever there is a change in the SampleData, I had to sync it with the c# version.
Finally, after we were satisfied with the draft, we had to translate the C# ViewModel to C++ as well. From now on, we will have to keep all three versions in sync.

Even though this pipeline works technically, I have to repeat myself several times.

b) Using the same SampleData XML file as before but loading it into the XAML via the XmlDataProvider as a Resource. This time, the Data is available in Blend at design-time as well as at run-time, and I can bind my elements to it. This allows quick design iteration cycles without much thought about the data or the model itself. And when we are satisfied, I would only need to extrude the ViewModel once into C++. The big issue here is that I bind my data statically to this XML file and not to some SampleData, meaning XAML expects that this XML file is actually part of the final program. Because of that, the syntax is different: binding to XPATH instead of PATH. And therefore we would have to keep two versions of the XAML file... one for Blend and one for the game. Keeping them in sync is also not very promising.


I hope anyone has some experience and can point me in the right direction.
 
User avatar
maherne
Site Admin
Posts: 42
Joined: 01 Jul 2022, 10:10

Re: Best-practice to design a view that bases heavily on data in Blend

08 Feb 2023, 17:59

Hi Manuel,

In the past my method for sharing data between Blend/WPF and Noesis has been to maintain C# and C++ versions of each viewmodel. I would then use mock test XAML files which define mock data for use in any controls:

MyControlTest.xaml
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:local="clr-namespace:MyApp">
    <Page.DataContext>
    	<local:MyViewModel>
    		<local:MyViewModel.CollectionProperty>
    			<local:MyEntryViewModel Property1="Value_0.1" Property2="Value_0.2"/>
    			<local:MyEntryViewModel Property1="Value_1.1" Property2="Value_1.2"/>
    		</local:MyViewModel.CollectionProperty>
    	</local:MyViewModel>
    </Page.DataContext>
    <local:MyUserControl/>
</Page>
This MyControlTest.xaml can be loaded at runtime, in WPF or Noesis, to see MyUserControl using the mock data. We kept a library of these test XAML files for all of our controls, to allow our developers and artists to quickly view and test each UI.

We are working on our own UI editor, Noesis Studio, which will remove the need for any of the above. You'll be able to create or import mock viewmodels and data and test them, in Noesis Studio, using the Noesis runtime.

Your option b) does sound interesting. If you would like to share some sample code and XAML for this implementation, I would be happy to give any feedback I can on improving it.
 
manuel
Topic Author
Posts: 13
Joined: 16 Aug 2022, 10:06

Re: Best-practice to design a view that bases heavily on data in Blend

09 Feb 2023, 12:16

Hey maherne,

I guess I could work with a hybrid. Start prototyping with my option b, and shift over to your proposal when we leave the rapid prototyping state and enter the actual game for the first time. In that phase, the DataModel should be quite known, and the overhead of keeping every class in the different languages in sync could be minimal. The necessity to bind with PATH instead of XPATH is still there, but I could switch to and continue with PATH, instead of keeping both versions in different XAMLs.

Surely I can provide you with a sample for option b. This is a small project I put together showing it in action:
DesignWithData.zip
(19.27 KiB) Downloaded 33 times
About Noesis Studio: Can you get a little more precise about when we could expect an (early) release?
 
User avatar
maherne
Site Admin
Posts: 42
Joined: 01 Jul 2022, 10:10

Re: Best-practice to design a view that bases heavily on data in Blend

09 Feb 2023, 18:16

We are still finalizing our release plans for Noesis Studio, we'll make a public announcement once we lock in a date. You can contact us via email for more information.

Thanks for the Blend sample, I'll take a look and get back to you if I have any suggestions.

Who is online

Users browsing this forum: No registered users and 5 guests