Different colors for each item in listbox of an app designer

Question

Karthik Vemireddy 2018 年 6 月 5 日

1
リンク

この質問への直接リンク

https://jp.mathworks.com/matlabcentral/answers/404134-different-colors-for-each-item-in-listbox-of-an-app-designer

回答済み: Jasmine Poppick 2023 年 3 月 17 日

採用された回答: Jasmine Poppick

Hi,

In my app, i have a list box with multiple items and i would like to display each item in a different color.

The list and the assigned colors have to change dynamically.

Is there a way to do it?

Thanks!

2 件のコメント
なしを表示なしを非表示

Paolo 2018 年 6 月 5 日

Do you want to change the color of the text/background according to what value is selected, or do you want to have a different color for every element when viewing all the elements from the list?

Karthik Vemireddy 2018 年 6 月 5 日

Hi Paolo,

I want to do the latter.

"Have a different color for every element when viewing all the elements from the list"

サインインしてコメントする。

サインインしてこの質問に回答する。

Answer 1

Jasmine Poppick 2023 年 3 月 17 日

0
リンク

この回答への直接リンク

https://jp.mathworks.com/matlabcentral/answers/404134-different-colors-for-each-item-in-listbox-of-an-app-designer#answer_1195455

Starting in R2023a, you can do this in App Designer and with uilistbox by using addStyle.

For example, see https://www.mathworks.com/matlabcentral/answers/1636400-change-color-of-each-individual-item-in-a-listbox-using-app-designer#answer_1195435.

0 件のコメント
-2 件の古いコメントを表示-2 件の古いコメントを非表示

サインインしてコメントする。

Answer 2

Paolo 2018 年 6 月 5 日

0
リンク

この回答への直接リンク

https://jp.mathworks.com/matlabcentral/answers/404134-different-colors-for-each-item-in-listbox-of-an-app-designer#answer_323376

編集済み: Paolo 2018 年 6 月 5 日

MATLAB Online で開く

It is possible to change the color of a uicontrol popup element as explained here. You can specify colors ("red","blue","green") or include a rgb triplet.

An example:

 uicntrl = uicontrol(panel,...
    'Units','normalized',...
    'Style','popup',...
    'String',{'<HTML><FONT COLOR="rgb(255,1,255)">v1</HTML>',...
              '<HTML><FONT COLOR="blue">v2</HTML>'});

The two elements in the popup dropdown list will have different colors. As you indicated that you wish to do this programmatically, a possible solution is the following:

1. Find element.

You can find the element you are interested in by using the handle to the current figure and determining which child you need. You will need to substitute (x) and its children accordingly to your gcf.

 fig = gcf;
 fig.Children(x)...String{1}

Alternatively, you can use guidata, adding the uicontrol element directly to the structure which enables you to access said element more easily across multiple functions.

2. Change string value.

 fig.Children(x)...String{1} = 
 <HTML><FONT COLOR="rgb(255,1,255)">v1</HTML>

Let's say the current value is rgb(255,1,255), and you wish to change the rgb triplet to rgb(5,12,25).

You can achieve this by using regexprep as explained by Walter here.

With

 n1 = 5;
 n2 = 12;
 n3 = 25;

The replacement expression:

rep = strcat(num2str(n1),'$1',num2str(n2),'$2',num2str(n3));

Replace rgb triplet with new values:

 fig.Children(x)...String{1} = regexprep(fig.Children(x)...String{1}, '\d+(\D+)\d+(\D+)\d+', rep);

The color of the text of the element will then change automatically to the new rgb triplet:

rgb(5,12,25)

7 件のコメント
5 件の古いコメントを表示5 件の古いコメントを非表示

Paolo 2018 年 6 月 7 日

編集済み: Paolo 2018 年 6 月 7 日

MATLAB Online で開く

Karthik,

Yes, as I explained in the answer the gcf depends on your application. For appdesigner, you can find all the elements with:

findall(groot)

That said, I tried to change the color in the same way as I suggested for uicontrol elements for the appdesigner. It appears that you are right, its not accepting multiple colors.

I tested for both a ListBox and a Drop Down element.

 appdes = findall(groot);
 %Item 5 is drop down element.
 appdes(5).Items = {'<HTML><FONT COLOR="rgb(255,1,255)">v1</HTML>',...
              '<HTML><FONT COLOR="blue">v2</HTML>'

and

 %Item 3 is List box element.
 appdes(3).Items = {'<HTML><FONT COLOR="rgb(255,1,255)">v1</HTML>',...
              '<HTML><FONT COLOR="blue">v2</HTML>'

Unsuccessfully. I also tried setting multiple values for the font color directly:

 %Worked fine as you probably concluded yourself.
 appdes(3).FontColor = [0 1 0]; 
 %Does not work.
 appdes(3).FontColor = {[0 1 0];[1 1 0]};

It did not work. Could not find any additional information in the documentation.

I also tried creating a UIcontrol element separately and appending it to the appdesigner figure.

 %appdes(2) is the figure
 uicntrl = uicontrol(appdes(2),...
    'Units','normalized',...
    'Style','popup',...
    'String',{'<HTML><FONT COLOR="rgb(255,1,255)">v1</HTML>',...
              '<HTML><FONT COLOR="blue">v2</HTML>'});

And got the following error:

Error using uicontrol Functionality not supported with figures created with the uifigure function. For more information, see Graphics Support in App Designer.

So that operation is not supported.

I am really out of ideas! I did assume that since my solution worked fine for uicontrol elements, a similar approach could be used for appdesigner, however it appears I was mistaken. Perhaps contact MW directly for clarification? The documentation for dropdown and listbox do not mention multiple colors so maybe the feature is just not supported. In that case, is building your application with uicontrol elements rather than appdesigner an option?

P.S. It's Paolo :)

Paolo 2018 年 6 月 13 日

@Karthik

Thank you for letting me know. Perhaps I can include this information in my answer? You can accept it for it to be visible to other users. I believe the proposed solution of doing it with uicontrol elements manually and/or programmatically can still be of interest for other users.

Owen Stadlwieser 2020 年 5 月 8 日

What you can do is insert an app.HTML element link it to an html file and create a list with different colour elements in that html file

サインインしてコメントする。

Different colors for each item in listbox of an app designer

2 件のコメント
なしを表示なしを非表示

採用された回答

0 件のコメント
-2 件の古いコメントを表示-2 件の古いコメントを非表示

その他の回答 (1 件)

7 件のコメント
5 件の古いコメントを表示5 件の古いコメントを非表示

参考

カテゴリ

タグ

製品

リリース

Community Treasure Hunt

Different colors for each item in listbox of an app designer

2 件のコメント なしを表示なしを非表示

採用された回答

0 件のコメント -2 件の古いコメントを表示-2 件の古いコメントを非表示

その他の回答 (1 件)

7 件のコメント 5 件の古いコメントを表示5 件の古いコメントを非表示

参考

カテゴリ

タグ

製品

リリース

Community Treasure Hunt

2 件のコメント
なしを表示なしを非表示

0 件のコメント
-2 件の古いコメントを表示-2 件の古いコメントを非表示

7 件のコメント
5 件の古いコメントを表示5 件の古いコメントを非表示