Tutorial: Adding Tabs to your Visual Studio based Paint.NET v5.0 Plugin!

[BoltBait]

Tutorial: Adding Tabs to your Visual Studio based Paint.NET Plugin!

 (This is written from the perspective of you already having written an effect as a vs project and you want to add tabs to it.

CodeLab can create a Visual Studio project of a CodeLab script*, and from there you can follow this tutorial.)

 

Paint.NET v5.0 really gave us plugin authors a TON of new toys.  This version introduces a completely new type of effect pipeline, a GPU accelerated pipeline.  And, most of these new toys are restricted to this new type of effect.  However, Rick did give us 2 new features for classic effects:  1) the ability to organize our UI into sections by using tabs--described below, and 2) the ability to clean up our UI by removing the horizontal dividers between controls.

 

Here is an example of what a tab set looks like in Paint.NET v4.3.12 (left, without tabs) compared to v5.0 (right, with tabs):

 

          

 

The very first thing you need to do is add a PropertyNames entry for your TabContainer, something like this:

public enum PropertyNames
{
    Amount1,
    Amount2,
    Amount3,
    Amount4,
    Amount5,
    TabContainer  // add something here to name your tab set.
}

 

EDIT: Then, in OnCreatePropertyCollection() you need to add a new property for your tab container:
 

props.Add(new TabContainerStateProperty(PropertyNames.TabContainer));

Just add this line along side the other properties you're creating.

 

When writing an effect, you develop the following function to configure the UI based on the properties (controls) already defined:

protected override ControlInfo OnCreateConfigUI(PropertyCollection props)

In there, you generally have the following line of code to kick off the function:

ControlInfo configUI = CreateDefaultConfigUI(props);

This builds a default UI based on the controls previously defined in the OnCreatePropertyCollection() function.   Basically, what it does for you is create a panel and place all of your controls in the panel in the order specified in the OnCreatePropertyCollection() function.

Instead of building the default UI, we want to build a custom UI that has a tab set in it.  So, let's comment out that line and make a new ControlInfo structure.  At this point you need to decide if your effect is going to be a single tabset, or if you want additional controls and possibly a tabset to go along with them.

 

If you want your UI to simply be a tabset and nothing more, you can create the following line:

//ControlInfo configUI = CreateDefaultConfigUI(props);
TabContainerControlInfo configUI = new TabContainerControlInfo((TabContainerStateProperty)props[PropertyNames.TabContainer]);

 

If you wish to have multiple tabsets or controls outside of the tabset, create the following lines:

//ControlInfo configUI = CreateDefaultConfigUI(props);
PanelControlInfo panelControlInfo = new PanelControlInfo();
TabContainerControlInfo configUI = new TabContainerControlInfo((TabContainerStateProperty)props[PropertyNames.TabContainer]);

 

This creates a Panel AND a TabContainer... which will be added to the Panel.

 

Next, create a tabPage and add the controls to that page then add the tab page to the tab control:

// First Tab
TabPageControlInfo tabPage1 = new TabPageControlInfo();
tabPage1.Text = "Tab Title";
tabPage1.AddChildControl(PropertyControlInfo.CreateFor(props[PropertyNames.Amount1]));
tabPage1.AddChildControl(PropertyControlInfo.CreateFor(props[PropertyNames.Amount2]));
configUI.AddTab(tabPage1);

 

Repeat for each tab page. (Note: you must use every control defined in "props" and a control must not appear more than once.)

 

The rest of OnCreatePropertyCollection() remains the same.  This is where the details of each control are described (control titles, etc.).

• If you did NOT create a panel control, simply return the tab container at the end of the function as was originally written:

    return configUI;
}

...and you're done!

• If you DID create a panel, add the tabset to the panel.  You can then add controls directly to the panel following the tabset:

// Add tab set to the panel
panelControlInfo.AddChildControl(configUI);

// Controls below tab set
panelControlInfo.AddChildControl(PropertyControlInfo.CreateFor(props[PropertyNames.Amount5]));

The rest of OnCreatePropertyCollection() remains the same.  This is where the details of each control are described (control titles, etc.).

 

Finally, return the Panel at the end of the function:

    return panelControlInfo;
}

...and you're done!

 

If you want to know which tab is active during the Render function, you'll need to do one more thing:

 

Create a global variable to hold the index of the active tab:

int tabShowing;

 

When the tab is switched, OnSetRenderInfo() is called.  So, in the OnSetRenderInfo() function, populate that variable with the index of the active tab:

tabShowing = token.GetProperty<TabContainerStateProperty>(PropertyNames.TabContainer).Value.SelectedTabIndex;

 

That's it!  In your Render() function, you can branch based on the value in the tabShowing variable.

  

*Does not apply to the MS Store version of Paint.NET.  You'll need to download the free, classic version of Paint.NET if you want to develop plugins in Visual Studio.

[BoltBait]

Important:  If you've followed this tutorial and added a tab set to your plugin, I left out one important step!  Please edit your project according to the EDIT section above.