Setting up a Blend project to design your own GUI with NoesisGUI in WaveEngine

In a previous article, we described how to set up the basic components to use NoesisGUI in WaveEngine 2.4.0. You should now have a basic grasp of how the main components work. This article describes how to set up a Blend project in such a way so as to facilitate the design of a GUI within the WaveEngine project structure.

Wave project preparation

Start by creating a new WaveEngine project and set up the basic components to show a NoesisPanel:

1. Add the NoesisService service.
2. Create a new Material in the Alpha layer, and disable lighting.
3. Add a plane primitive and assign the material.
4. Add the NoesisPanel component to the plane and configure parameters such as size.

The complete guide for this setup is explained in our previous NoesisGUI article here.

We will add a panel that has transparent elements, which is why we put the material in the Alpha layer. For the panel to be transparent, you need to set the Background Color for the NoesisPanel component to black and with an Opacity of 0.

Once that is done, we can start creating our own XAML file. Begin by creating a folder called XAML in the Content folder. Next, add a text file called BasicGUI.xaml, and add this content to it:

You might need to refresh the content folder for it to appear in the editor. Once you can see the file in the editor, set the NoesisPanel component XAML property to the file you have just created. Your panel should show an orange color. It now works!

Blend project

Now we are ready to start using Microsoft Blend. It will allow us to add more complex elements to our XAML in a more visual way.

The first step is to create a new Blend project, using the “WPF Application” template. Our recommendation is that you place the project in your WaveEngine project’s Launchers folder. The location doesn’t really matter, but that’s just the way we usually do it.

Now, in this project, you have to replicate the same structure you have in the Content folder (including the Content folder itself), but only for the resources you are going to use in your interface. To do that for this project, create a folder named Content, and inside it, create a folder called XAML. You don’t need to create any more folders, since we only use the XAML folder for now.

As for the XAML files, you have to link them in your Blend project, so that any changes you do modifies the files in the WaveEngine Content folder. Remember to place them in the same folder they are inside the Content directory tree. For this example, you only have to link the BasicGUI.xaml file you created previously.

Now, you need to do one last modification for your project to run. Remove the Grid control from the MainWindow.xaml file and replace it with a Frame control, and set the Source to “/Content/XAML/BasicGUI.xaml”. The project should now run in Blend!

Create your GUI

At this point, you can use Microsoft Blend to create your interface. As you are changing the XAML file in your Content folder, you only have to reload the project in the WaveEditor to check your changes. Changing a property of the panel should work too.

We recommend that you check your GUI in NoesisGUI often. NoesisGUI does not perfectly duplicate all WPF functionality and there might be differences in the behavior of your GUI. As examples, in version 2.0.2f (the most recent one when this article was written):

• OpacityMasks doesn’t work correctly when you use OpenGL platforms.
• Bindings on a Grid‘s ColumnDefinition/RowDefinition Width/Height properties using a Converter do not work.

Try to work around any issues you find until a fix is implemented.

For the purposes of this article, we will continue to use an example interface. You can download it here. It is a modified version of the interface used in WaveEngine’s NoesisSample.

Extract the contents of the zip file to your WaveEngine project’s Content folder. Create the Images folder in your Blend project and link all files under their corresponding folders.  Remember also to edit your MainWindow.xaml so that the frame is created using this new MainHUD.xaml.

You have to do something else to any images you use in your GUI using NoesisGUI. Using the editor, you have to mark all images you use in the GUI as raw. This is so that NoesisGUI has direct access to them.

The project shouldn’t run yet, as there are some resources missing. You will add them in the next step.

Styles

The Styles file is used to define resources you want to share among all your controls. You can define resources such as colors, path geometry, brushes, and many more.

Create the StyleBlue.xaml file in the XAML folder with this content. Remember to link it in Blend.

For Blend to import this ResourceDictionary, you have to add it in your App.xaml.

The application should now run in Blend. Now, create StyleRed.xaml with this content.

You can change your App.xaml file to point to this ResourceDictionary to see the changes.

Now, in the WaveEditor, you can select any of these styles in the Project properties, under the NoesisService configuration. You should see the panel changes when you change the style.

To change style using code, change it using the NoesisService. The panel should be recreated using the new style.

That’s it for now! In a future article, we will show you how to bind data to the panel and use controls. Stay tuned!