Skip to main content

Attached Panels & Side Panels

ScaleformUI allows you to attach various interactive and informational panels to your UIMenuItem elements. Panels come in two main flavors:

  • Attached Panels: Which sit inline directly beneath the highlighted item inside the menu (Grid, Color Picker, Percentage, and Statistics panels).
  • Side Panels: Which break out of the standard menu container and anchor themselves to the side (Mission Details, Vehicle Color Picker panels).

Attached Panels​

Attached panels expand underneath the active UIMenuItem. They provide secondary interactions such as adjusting a slider, picking a color from a palette, or viewing stats bars.

1. Color Panel​

The Color Panel allows you to select a color from a predefined or custom palette.

// Standard Palettes (Hair, Makeup, etc.)
UIMenuItem listPanelItem0 = new UIMenuItem("Change Color", "Select a color");
UIMenuColorPanel colorPanel = new UIMenuColorPanel("Hair Color", ColorPanelType.Hair);

exampleMenu.AddItem(listPanelItem0);
listPanelItem0.AddPanel(colorPanel);

// Custom Palette
UIMenuItem listPanelItem1 = new UIMenuItem("Custom palette panel");
UIMenuColorPanel colorPanelCustom = new UIMenuColorPanel("Custom Palette", new List<SColor> { 
    SColor.FromRandomValues(), SColor.FromRandomValues() 
}, 0);

exampleMenu.AddItem(listPanelItem1);
listPanelItem1.AddPanel(colorPanelCustom);

// Event Handling
colorPanel.OnColorPanelChange += (item, panel, index) =>
{
    Notifications.ShowNotification($"ColorPanel index => {index}");
};

2. Percentage Panel​

The Percentage Panel allows the user to slide a value between 0% and 100%.

UIMenuItem listPanelItem2 = new UIMenuItem("Change Percentage", "Modify the opacity");
UIMenuPercentagePanel percentagePanel = new UIMenuPercentagePanel("Percentage Panel", "0%", "100%");

exampleMenu.AddItem(listPanelItem2);
listPanelItem2.AddPanel(percentagePanel);

percentagePanel.OnPercentagePanelChange += (item, panel, index) =>
{
    Screen.ShowSubtitle("Percentage = " + index + "...");
};

3. Grid Panel​

The Grid Panel allows selection in a 2D space (X and Y coordinates). It can be standard (4 directions) or horizontal-only.

UIMenuItem listPanelItem3 = new UIMenuItem("Change Grid Position", "Select coordinate");

UIMenuGridPanel gridPanel = new UIMenuGridPanel("Up", "Left", "Right", "Down", new PointF(.5f, .5f));
UIMenuGridPanel horizontalGridPanel = new UIMenuGridPanel("Left", "Right", new PointF(.5f, .5f));

exampleMenu.AddItem(listPanelItem3);
listPanelItem3.AddPanel(gridPanel);
listPanelItem3.AddPanel(horizontalGridPanel);

gridPanel.OnGridPanelChange += (item, panel, value) =>
{
    Screen.ShowSubtitle("GridPosition = " + value + "...");
};

4. Statistics Panel​

Displays a series of progress bars associated with text labels (perfect for character or vehicle statistics).

UIMenuListItem listPanelItem4 = new UIMenuListItem("Look at Statistics", new List<object> { "Build A", "Build B" }, 0);
UIMenuStatisticsPanel statistics = new UIMenuStatisticsPanel();

exampleMenu.AddItem(listPanelItem4);
listPanelItem4.AddPanel(statistics);

statistics.AddStatistics("Top Speed", 0);
statistics.AddStatistics("Acceleration", 0);
statistics.AddStatistics("Braking", 0);

// You can update statistics dynamically based on the current selection
listPanelItem4.OnListChanged += (a, b) =>
{
    if (b == 0) {
        statistics.UpdateStatistic(0, 80f);
        statistics.UpdateStatistic(1, 50f);
        statistics.UpdateStatistic(2, 40f);
    } else {
        statistics.UpdateStatistic(0, 100f);
        statistics.UpdateStatistic(1, 95f);
        statistics.UpdateStatistic(2, 60f);
    }
};

Side Panels​

Side panels break out of the standard menu layout. They anchor directly to the right side of the menu and provide extra context or tools.

1. Mission Details Panel​

Presents a large image header and multiple lines of data/text (useful for job briefings, real estate, or vehicle sales).

UIMenuItem ketchupItem = new UIMenuItem("Show Details", "Description here");

// Create panel attached to the Right side
UIMissionDetailsPanel sidePanel = new UIMissionDetailsPanel(
    PanelSide.Right, 
    "Property Details", 
    false, 
    "scaleformui", 
    "bannerbackground" // You can stream DUIs to this background too!
);

// Add items to the details panel
UIFreemodeDetailsItem detailItem1 = new UIFreemodeDetailsItem("Price", "$150,000", ScaleformFonts.SIGNPAINTER_HOUSESCRIPT, ScaleformFonts.GTAV_TAXI_DIGITAL, BadgeIcon.BRIEFCASE, SColor.HUD_Green);
UIFreemodeDetailsItem detailItem2 = new UIFreemodeDetailsItem("Location", "Vinewood", ScaleformFonts.SIGNPAINTER_HOUSESCRIPT, ScaleformFonts.GTAV_TAXI_DIGITAL, BadgeIcon.BRAND_DILETTANTE, SColor.HUD_White);

sidePanel.AddItem(detailItem1);
sidePanel.AddItem(detailItem2);

ketchupItem.AddSidePanel(sidePanel);
exampleMenu.AddItem(ketchupItem);

2. Vehicle Color Picker Panel​

Allows the user to browse GTA's standard vehicle colors visually.

UIMenuItem colorItem = new UIMenuItem("Change Vehicle Color");
exampleMenu.AddItem(colorItem);

UIVehicleColourPickerPanel sidePanelB = new UIVehicleColourPickerPanel(PanelSide.Right, "ColorPicker");
colorItem.AddSidePanel(sidePanelB);

sidePanelB.OnVehicleColorPickerSelect += (item, panel, value, color) =>
{
    Notifications.ShowNotification($"Vehicle Color: {(VehicleColor)value}");
    sidePanelB.Title = ((VehicleColor)value).ToString();
};