How to create Blender like UI Panels in BlenderPy

Support Python Support
1

Recently I’ve been trying to create UI for my Blender Python Addon look similar to the usual blender interface (for consistency), however with some “types” of props I’ve been having trouble…

My exact issue:

Currently I'm trying to make a UI List similar to blender's material editor:



Materials Assignment Panel (UI List).png


However, I am having trouble trying to Align the Right buttons vertically:



Capture

Current code:


...

class VIEW3D_PT_rblx_lighting_skybox_subpanel(bpt.Panel):
    ...
    def draw(self, context):
        layout = self.layout
        # layout.use_property_split = True
        # layout.use_property_decorate = True

        scene = context.scene
        wm = context.window_manager
        skybox_props: LightingSkyboxProperties = scene.rblx_tools_lighting_skybox_props

        current_skybox_props: Optional[LightingSkyboxItem] = None
        if utils.indexInList(skybox_props.skybox_list, skybox_props.skybox_list_index):
            current_skybox_props = skybox_props.skybox_list[
                skybox_props.skybox_list_index
            ]

        box = layout.box()
        row = box.split(factor=0.9)
        col1, col2 = row.column(), row.column()
        col1.template_list(
            "WORLD_UL_skybox",
            "",
            skybox_props,
            "skybox_list",
            skybox_props,
            "skybox_list_index",
        )
        row2 = col2.row(align=True)
        row2.operator("world.skybox_shift_up", text="", icon="TRIA_UP")
        row2.operator("world.skybox_shift_down", text="", icon="TRIA_DOWN")

        # Buttons to add/remove items
        row = box.row()
        col1, col2 = row.split(factor=0.8), row.split(factor=0.2, align=True)
        if current_skybox_props:
            col1.prop(current_skybox_props, "name", text="")
            wm.temp_skybox_name = ""
        else:
            col1.prop(wm, "temp_skybox_name", text="")

        col2.operator("world.skybox_add_item", text="", icon="ADD")
        col2.operator("world.skybox_remove_item", text="", icon="REMOVE")
        ...

:writing_hand: NOTE:

The best answer to this question both answer my spacific use case AND the more genaric question of are there are any “UI Librarys” for this…

2

Some UI_Layouts are hardcoded work with specific datablocks, but all the UI is written in Python; So you can look to those Py files (bl_ui) to see how they are defined.

3

You need to have them in a column rather than a row, so something like:

        row2 = col2.row(align=True)
        sub = row2.column(align=True)
        sub.operator("world.skybox_shift_up", text="", icon="TRIA_UP")
        sub.operator("world.skybox_shift_down", text="", icon="TRIA_DOWN")

Should get you in the right direction, try to experiment

4

Is there a need to be exactly identical though?

5

Dang that accually works… Thanks, however how would I align to be at the bottem? also in general, how do i align items? Eg. Left, Right, Top, Bottom, etc.

6

Where do i find this?

7

You can investigate Blender UI source code to learn how exactly it works. In the UI context menu there’s an option “Edit Source” that will open new Text object for UI source code for the exact UI element you’ve triggered it on.

image

Make sure to enable Developer Extras, so this option will be available.

image
image699×201 22.2 KB

8

The documentation about what you’re asking is here:
https://docs.blender.org/api/current/bpy.types.UILayout.html

All UI elements (panels, headers, rows, columns, etc) are based on the UILayout structure described in the link above.