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 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.

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. Then we import NoesisGUI Unity package into that project. 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

Now 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 during build are not compatible with Unity.

BlendTutorial1.unity.jpg

Adding XAMLs

By default, Blend creates several .xaml files inside the project (App.xaml, MainWindow.xaml) that can 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 can be left outside the Unity Assets/ folder.

We found very practical to move Blend project files (.sln, .vcproj) next to the Assets/ folder, so we can explore Unity assets from Blend using the Show All Files button from the Solution Explorer.

BlendTutorial2.unity.jpg

Next step is adding desired .xaml files to our project. To do that, enable Show All Files and explore the Assets folder. Select all the required files (xamls, cs, textures and fonts), right click and Include In Project.

BlendTutorial3.unity.jpg

Rebuild Blend project to compile .cs files and user controls. After that you can preview 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.

BlendTutorial8.unity.jpg

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

BlendTutorial9.unity.jpg

Code Behind

User controls with code-behind need to be adapted to correctly work in both Blend and Unity.

We have to use #define and #if directives to differentiate Noesis code that is not 100% compatible with WPF.

BlendTutorial10.unity.jpg
© 2017 Noesis Technologies