Jump to: navigation, search

Difference between revisions of "HowTo:Inject UI into UBIK Studio"


Line 9: Line 9:
 
[[File:ControlDropDown.png|thumb|left|220px|Extended user control list]] <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
[[File:ControlDropDown.png|thumb|left|220px|Extended user control list]] <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
=== Implementation ===
 
=== Implementation ===
1. Paste your UserControl into your plugin solution.<br>
+
1. Paste your UserControl in the plugin solution.<br>
 
2. Make your UserControl implements IUBIKEnvironmentControl and add the export.<br>
 
2. Make your UserControl implements IUBIKEnvironmentControl and add the export.<br>
 
<syntaxhighlight lang="csharp">
 
<syntaxhighlight lang="csharp">
Line 29: Line 29:
  
 
= Window =  
 
= Window =  
A new button can be added to the UI and open the injected UI
+
A additional button can be added to the tool bar
[[File:InjectedButton.png|thumb|280px|Injected button]]
+
[[File:InjectedButton.png|thumb|left|298px|Injected button]]<br><br><br><br><br><br><br><br>
 +
=== Implementation ===
 +
1. Paste your Window in the plugin solution.<br>
 +
2. Create a new class that implements IUBIKWindowFactory.
 +
<syntaxhighlight lang="csharp">
 +
[Export(typeof(IUBIKWindowFactory))]
 +
public class TestWindowFactory : IUBIKWindowFactory
 +
{
 +
    public Bitmap Icon => Image;
  
 +
    public string Label => "Test";
 +
 +
    public Window GetWindow(UBIKEnvironment env)
 +
    {
 +
        return new TestWindow(env);
 +
    }
 +
}
 +
</syntaxhighlight>
 +
3. Assign values to the "Icon" and  "Lable" properties they will be used for the button.<br>
 +
4. In the GetWindow Method return the window that you moved to the solution.<br>
 +
5. After making the changes, make sure to update the plugin in the injection folder.<br>
 +
6. When starting {{UBIK}} Studio the new button will show up in the tool bar.<br><br>
 
<!-- DO NOT REMOVE THIS -->{{Template:HowTo/End}}<!-- DO NOT REMOVE THIS -->
 
<!-- DO NOT REMOVE THIS -->{{Template:HowTo/End}}<!-- DO NOT REMOVE THIS -->

Revision as of 07:48, 16 June 2026

Wiki Under Construction Start.PNG

Since version 5.1 it is possible to inject UI into UBIK® Studio.
The injected UI can be displayed inside a User Control and or Window.
This article will help you to inject your UI!

[edit]

User Control

The existing User Control list can be extended to provide additional controls.

Extended user control list














Implementation

1. Paste your UserControl in the plugin solution.
2. Make your UserControl implements IUBIKEnvironmentControl and add the export.

[Export(typeof(IUBIKControl))]
public partial class TestUserControl: UserControl, IUBIKEnvironmentControl

3. The user control now has a property Description and Image.
4. Set the properties in the constructor of the User Control. The text of description and the image will show up in the User Control List.

  public TestUserControl()
  {
      InitializeComponent();
      Description = "test control";
      Image = image;
  }

5. After making the changes make sure to update the plugin in the injection folder.
6. When starting UBIK® Studio the new user control will show up in the list.

Window

A additional button can be added to the tool bar

Injected button








Implementation

1. Paste your Window in the plugin solution.
2. Create a new class that implements IUBIKWindowFactory.

[Export(typeof(IUBIKWindowFactory))]
public class TestWindowFactory : IUBIKWindowFactory
{
    public Bitmap Icon => Image;

    public string Label => "Test";

    public Window GetWindow(UBIKEnvironment env)
    {
        return new TestWindow(env);
    }
}

3. Assign values to the "Icon" and "Lable" properties they will be used for the button.
4. In the GetWindow Method return the window that you moved to the solution.
5. After making the changes, make sure to update the plugin in the injection folder.
6. When starting UBIK® Studio the new button will show up in the tool bar.