Bannerlord Wiki

Explore

Tutorials

Gauntlet UI Tutorial
Gauntlet UI Tutorial

Overview

This guide will teach you a variety of things including:

How to add a Brutton to the MapBar

How to Interact with objects to seamlessly Push and Pop Screens using Objects

How to create Custom Screens and ViewModels

————————————————————————————————————

Outline

Rationale

Required Knowledge

SetUp

Part I : Add Button to MapBar

Part II: Configure Navigation Elements

Part III: Setting up your Screen and View Model

Part IV: Configure SubModule and Launch!

————————————————————————————————————

Rationale

There are much simpler approaches to pushing Screens. However, working with the game objects the way the creators intend will ensure that your mod can scale without hiccups. Furthermore, once you get the hang of this, you will be able to fully take command over GauntletUI objects!

————————————————————————————————————

Required Knowledge

Before we begin, it is important that you know how to do a few things:

Setup a .NET (C#) environment in Rider or Visual Studio

Create basic Prefab Objects (Templates will be Provided)

How to install NuGet Packages in your respective Integrated Development Environment (IDE)

Setting up SubModules

If you need help in any of these areas, please consult these links:

(C#Environment)

https://docs.bannerlordmodding.com/_tutorials/basic-csharp-mod.html⁠

⁠

(SubModule)

https://docs.bannerlordmodding.com/_xmldocs/submodule.html#important⁠

⁠

(Prefabs)

https://docs.bannerlordmodding.com/_gauntlet/movie.html⁠

⁠

(Folder Structure)

https://docs.bannerlordmodding.com/_intro/folder-structure.html#folder-descriptions-file-examples⁠

⁠

If you are a total beginner and want to get started, consult my

Rider Debugger and SubModule Setup Tutorial.⁠

⁠

————————————————————————————————————

SetUp

Create a base SubModule project (consult guide if needed) and name it ExampleUIMod

Install

UIExtenderLib ⁠

following the instructions on the website

————————————————————————————————————

Part I : Add Button to MapBar

The MapBar is the UI element you see all the time. It’s the bar that has your Inventory, Clan, Kingdom, and other buttons. So it’s a great place to seamlessly add in your own custom button.

Before we get started, it’s a good idea to use my ExampleButton template. Create a file called

ExampleButton.xml in this location. You may need to create this directory.

YourModule/GUI/PrefabExtensions/

Template Code:

now copy this template code and put it into the XML file.

</Children>

</ButtonIconOffsetWidget>

</Children>

</Widget>

Configure Prefab Patch

1. In your C# Bannerlord Mod Project, create a folder called MapBar. This will contain all the elements associated with overriding it.

Make sure you’ve installed UIExtenderLib and create a new Class file and name it PrefabExtension inside the folder using the following code:

using UIExtenderLib.Interface;

[UIExtenderLib.Interface.PrefabExtension("MapBar",

"/Prefab/Window/Widget/Children/Widget/Children/ListPanel/Children/Widget")]

public class PrefabExtension : PrefabExtensionInsertAsSiblingPatch

{

public override string Name => "ExampleButton";

public override InsertType Type => InsertType.Append;

}

Let me explain what’s happening:

The XML file MapBar is the file to be overridden

The XPath Location (below is where the patching operation will occur. [Read more about XPath

Here⁠

]

"/Prefab/Window/Widget/Children/Widget/Children/ListPanel/Children/Widget"

The inherited class PrefabExtensionInsertAsSiblingPatch defines what type of patching will be done at the specified XPath

Name is the name of the XML file that the patcher will add/replace

InsertType is the type of sibling insertion that the patcher will perform.

To learn more about the options that are available to you, please consult the documentation

here.⁠

⁠

Configure ViewModel

Now that we have added the button using the patcher, we need to implement a custom action that will be taken when you click on it. To do this we will also use UIExtenderLib

Create a class file called CustomMapVM and inherit the BaseViewModelMixin<MapNavigationVM> class.

Now, copy this code to proceed

[ViewModelMixin]

public class CustomMapVM : BaseViewModelMixin<MapNavigationVM>

{

public CustomMapVM(MapNavigationVM vm) : base(vm)

{ }

// Add Your MapBar Button Methods Here

[DataSourceMethod]

public void ExecuteOpenScene()

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

Gauntlet UI TutorialGauntlet UI Tutorial

Overview

Outline

Rationale

Required Knowledge

SetUp

Part I : Add Button to MapBar

Template Code:

Configure Prefab Patch

Configure ViewModel

Gauntlet UI Tutorial
Gauntlet UI Tutorial