In WaveEngine 2.4.0 we added support for NoesisGUI, which is a rendering engine for interfaces defined in the XAML language, most commonly known for its usage in Windows Presentation Foundation.
In this tutorial, you will learn how to add an interface designed in XAML to a WaveEngine project using NoesisGUI.
Create a new WaveEngine project. Begin by adding the NoesisService service to your project in Edit > Project Properties.
In this service, you can configure the Style used in your XAML files. This usually contains a ResourceDictionary which defines all the resources your application uses, such as brushes, colors and control templates, among others. This can be used to implement themes in your application.
Remember that this style will be shared among all NoesisPanels.
The next step is to add your XAML files to your project. In this case, we will use a sample located here. Simply download the file and place the zip contents in your Content folder. Here, we have created a folder for XAML files.
We now have to create a material for the NoesisPanel behavior to render in. Set the Shader to StandardMaterial, and disable lighting.
When that is done, add a plane primitive to your scene.
Set the plane material to the one you’ve just created.
Next, add the NoesisPanel behavior to the plane.
Here you can see all the properties that you can modify for the NoesisPanel behavior:
- XAML: this is the XAML resource that will be rendered.
- Background Color: the background color that will be used for transparent parts of the XAML.
- Width and Height: the size of the viewport that will be used to render the UI.
- Antialiasing Mode: the technique used to smooth rendered vector graphics.
- Tessellation quality: controls the number of segments in rendered vector graphics.
- Clear flags: the flags used when clearing the texture where NoesisGUI is rendered.
- Enable Post-Process: enable this if you want the NoesisGUI panel to be affected by camera effects such as lenses.
- Enable Keyboard, Mouse, Touch: enable specific input modes.
- Render flags: enable several rendering effects for the panel. This is mainly used for debugging purposes.
After this, set a Width of 1080 and a Height of 640. Set the XAML to the Palette.xaml file you have included in the project previously.
To correct the panel aspect ratio, set the X scale of the plane to 1.7.
Now you can press the Simulate button and interact with the panel.
If you now want to run this project in Visual Studio, or using the WaveEngine Visual Editor “Build and Run” function, you first need to add the WaveEngine.NoesisGUI NuGet package to your solution.
And that’s it! We will release more tutorials with advanced usage of NoesisGUI, so you can make more complex interfaces. Stay tuned!