NoesisGUI

First contact with Blend

github Tutorial Data

This tutorial is a fast introduction to Microsoft Blend within Unity. You will learn how to start editing the samples included in NoesisGUI package and how to create new ones from scratch. Microsoft Blend for Visual Studio (formerly Microsoft Expression Blend) is an interactive, WYSIWYG front-end for designing XAML-based interfaces. Blend is included in Visual Studio since 2015 version. The proposed workflow will allow quick iterations while designing user interfaces; changes performed in Blend will appear immediately in Unity.

Note

This is a very introductory tutorial on Blend. A more advanced one can be found in the Blend Native Tutorial

Unity Project

The first thing to do is create a new Unity project and import NoesisGUI package into it. Latest version of NoesisGUI can be downloaded from our Downloads page.

Note

Find more information about first steps with NoesisGUI in Unity in our Unity Tutorial

Blend Project

Next we need to create a Blend project of type WPF Application. It is very important that this project is created outside Assets/ folder because .cs files generated by Blend are not compatible with Unity and will generate annoying errors.

BlendTutorial1.unity.jpg

Adding XAMLs

Note

For this section we will be using 'Buttons', one of the samples included in the NoesisGUI Unity package. A version with a Blend project attached as described in the following steps can be found at Github.

By default, Blend creates several XAML files inside the project (App.xaml, MainWindow.xaml) that must be ignored by Unity because they are only needed when building a native application within Blend. Unity already provides a custom application and window that cannot be changed from Blend. Those files must be left outside the Unity Assets/ folder.

We find very practical to move Blend project files (.sln, .csproj, App.xaml, MainWindow.xaml) at the same level as the Assets/ folder. That way we can explore Unity assets from Blend using the Show All Files button from the Solution Explorer.

BlendTutorial2.unity.jpg

The next step is adding desired XAML files to our Blend project. To do that, enable Show All Files in Blend and explore the /Assets folder. Select all the required files (XAMLs, Textures, Fonts, Audios, C#), right click and Include In Project.

BlendTutorial3.unity.jpg

Rebuild Blend project to compile all script files and user controls. After that you will see a preview of the Buttons sample:

BlendTutorial4.unity.jpg

We can start editing this XAML, for example let's add a new button.

BlendTutorial5.unity.jpg

Each time we save the XAML file in Blend it is automatically updated in the Unity editor. This provides rapid iteration cycles between Blend and Unity.

BlendTutorial6.unity.jpg

If we want to run Buttons sample in Blend we need to specify the Application StartupUri in the App.xaml file. Once selected we can Run the WPF application by pressing F5 key.

BlendTutorial7.unity.jpg

Existing files can also be added to the Blend project using Add As Link dropdown option in the Add > Existing Item... dialog.

Note

This is useful for adding those resources that are not located in a subfolder under the Blend project.

BlendTutorial8.unity.jpg

But this technique requires that you manually clone the folder structure of all dependencies in order to properly run the Blend application.

BlendTutorial9.unity.jpg

Code Behind

User controls with code-behind need to be adapted to correctly compile in both Blend and Unity. Preprocessor macro directives #define and #if must be used to differentiate Noesis code that is not 100% compatible with WPF.

BlendTutorial10.unity.jpg

More examples

All the Unity examples we provide on Github already follow the structure described above. As always we will be happy to accept pull-requests with improvements.

© 2017 Noesis Technologies