Using ImGuiViewProvider

As a simpler alternative to the Ultraviolet Presentation Foundation, release 2018.10 provides a new plugin, Ultraviolet.ImGuiViewProvider, which allows the immediate-mode Dear ImGui library to be used for the construction of user interfaces. Such interfaces are built using code at runtime rather than by specifying layouts and styles in design files.

Installing the Plugin

The ImGui view provider is available on NuGet through the Ultraviolet.ImGuiViewProvider package. Installing this package will add references to the Ultraviolet.ImGuiViewProvider.dll and Ultraviolet.ImGuiViewProvider.Bindings.dll assemblies to your project.

To configure your application to use the ImGui view provider, you must load the ImGui plugin. In OnCreatingUltravioletContext(), add an instance of the Ultraviolet.ImGuiViewProvider.ImGuiPlugin class to the Plugins collection exposed by the configuration object.

Creating a Screen

When using the ImGui plugin, every instance of the Ultraviolet.UI.UIScreen class will create a an ImGui context which can be used to draw user interface controls. For more information on screens and the Ultraviolet UI subsystem, see Sample 9 - Managing State with UI Screens.

For each screen in your application, create a new class which derives from UIScreen and implements the Ultraviolet.ImGuiViewProvider.IImGuiPanel interface. This interface signals to Ultraviolet that it needs to draw ImGui controls, and its methods will be automatically called at the appropriate times by the UI subsystem.

The IImGuiPanel.ImGuiRegisterResources() method is called to allow your screen to register fonts and textures which will be required by your user interface components. The Fonts and Textures properties on Ultraviolet.ImGuiViewProvider.ImGuiView contain the necessary methods.

void IImGuiPanel.ImGuiRegisterResources(ImGuiView view)
{
    view.Fonts.RegisterDefault();
    myFontPtr = view.Fonts.RegisterFromAssetTTF(contentManager, "Path/To/Font", 16f);
    myTextureID = view.Textures.Register(contentManager, "Path/To/Texture");
}
private ImFontPtr myFontPtr;
private Int32 myTextureID;

The IImGuiPanel.ImGuiUpdate() method is where you should actually define your interface. The methods for doing so are part of the Ultraviolet.ImGuiViewProvider.Bindings namespace, and the API is identical to the one provided by the ImGui.NET library.

void IImGuiPanel.ImGuiUpdate(UltravioletTime time)
{
    if (ImGui.Begin("My Window", ImGuiWindowFlags.AlwaysAutoResize))
    {
        ImGui.Text("Hello, world!");
    }
    ImGui.End();
}

The IImGuiPanel.ImGuiDraw() update is called when the screen is drawn. In most applications, you can leave this method empty.

void IImGuiPanel.ImGuiDraw(UltravioletTime time) { }

Loading a Screen

The definition file for an ImGui screen is very simple, consisting of little more than a reference to the type of view model which is used by the screen. If the screen doesn't use a view model, you can omit the ViewModelType attribute entirely.

<?xml version="1.0" encoding="utf-8" ?>
<UIPanelDefinition>
  <View ViewModelType="My.ViewModel, MyAppAssembly"/>
</UIPanelDefinition>

The base constructor for UIScreen loads the XML definition and performs the necessary configuration. Once loaded, a screen can be displayed by placing it on the screen stack.

var screen = new MyScreenType("Content", "Path/To/Definition/File", content);
Ultraviolet.GetUI().GetScreens().Open(screen);