[App Designer] How to disable a component but keep it visible (not greyed out) ?

I would like to remove the default interactivity of components such as ListBox and UITables, so that users cannot click on the items, nor will the items get highlighted on a mouse over. However, I also want these components to stay visible, not greyed out.

One method I can think of is to overwrite the visuals with my own color style when disabling the items. Is there a way for me to write a custom callback that triggers when item.Enable or item.Disable is called?

Answer 1

[Sameer]

Hi @Kelvin L

To disable a component while keeping it visible and not greyed out, you can overlay a non-interactive uicontrol with a transparent background. This overlay captures user interactions without altering the appearance of the component.

Here's how you can implement this:

1. Create a "uicontrol" overlay with the same position as the target component.
2. Set the overlay's Enable property to 'off' to capture interactions.
3. Match the overlay's "BackgroundColor" with the figure's background to maintain visual consistency.

Example Implementation:

listBox = uicontrol('Style', 'listbox', ...
    'String', {'Item 1', 'Item 2', 'Item 3'}, ...
    'Position', [100, 100, 120, 100]);

% Function to disable interaction
function disableInteraction(component)
% Get the position of the component
pos = get(component, 'Position');

% Create a transparent overlay using a uicontrol
overlay = uicontrol('Style', 'text', ...
    'Position', pos, ...
    'BackgroundColor', get(gcf, 'Color'), ... 
    'Enable', 'off');


component.UserData.overlay = overlay;
end

% Function to enable interaction
function enableInteraction(component)
% Remove the overlay
if isfield(component.UserData, 'overlay')
    delete(component.UserData.overlay);
    component.UserData = rmfield(component.UserData, 'overlay');
end
end


disableInteraction(listBox); 
pause(2);
enableInteraction(listBox);

Hope this helps!