Errors in Match class for float4 color comparison

General
1

Here is my global color theme

<float4 ux:Global="red" ux:Value="#E5483D"/>
<float4 ux:Global="orange" ux:Value="#FFB50D"/>
<float4 ux:Global="green" ux:Value="#21A27B"/>
<float4 ux:Global="blue" ux:Value="#1B9DCC"/>

panel ux

<panel Color="{ReadProperty this.theme}" ux:Class="bg.Panel">
    <float4 ux:Property="theme" />
</panel>

I have a global panel class to use in different ux, and I would like to based on different theme color to make a specific color shadow
however, I get error in the following code and I do not know how to check the property in float4. It seems case class cannot check float4 property. Even though I change the property in string, it still get error this error message “cannot convert orange to target type Uno.Float4”

<string ux:Global="red" ux:Value="#E5483D"/>
<string ux:Global="orange" ux:Value="#FFB50D"/>
<string ux:Global="green" ux:Value="#21A27B"/>
<string ux:Global="blue" ux:Value="#1B9DCC"/>

<Match Value="{Property this.theme}">
	<Case String="orange">
		<DropShadow Angle="90" Size="8" Distance="4" Color="#FFB50D4D" />
	</Case>

	<Case String="green">
		<DropShadow Angle="90" Size="8" Distance="4" Color="#21A27B4D" />

	</Case>

	<Case String="red">
		<DropShadow Angle="90" Size="8" Distance="4" Color="#E5483D4D" />
	</Case>

	<Case String="blue">
		<DropShadow Angle="90" Size="8" Distance="4" Color="#1B9DCC4D" />

	</Case>

</Match>

Therefore, is there any solution for this usage? Thank you very much

2

Hello!

The issue lies in the fact that you are using String in the case-switch. This means the string literal "orange" is being compared, not a global by the same name.

Changing this to Value works :slight_smile:

3

As an additional nice-to-know, we don’t recommend using Match at the moment, as every case is instantiated and switched dynamically.

Instead, may i recommend this approach?

<App>
	<ClientPanel>
		<float4 ux:Global="ThemeRed" ux:Value="#E5483D"/>
		<float4 ux:Global="ThemeOrange" ux:Value="#FFB50D"/>
		<float4 ux:Global="ThemeGreen" ux:Value="#21A27B"/>
		<float4 ux:Global="ThemeBlue" ux:Value="#1B9DCC"/>

		<float4 ux:Global="ThemeRedShadow" ux:Value="#E5483D4D"/>
		<float4 ux:Global="ThemeOrangeShadow" ux:Value="#FFB50D4D"/>
		<float4 ux:Global="ThemeGreenShadow" ux:Value="#21A27B4D"/>
		<float4 ux:Global="ThemeBlueShadow" ux:Value="#1B9DCC4D"/>

		<Panel ux:Class="bg.Panel">
		    <string ux:Property="Theme" />

		    <WhileString Value="{ReadProperty Theme}" Equals="red">
		    		<Change themePanel.Color="ThemeRed" />
		    		<Change themeShadow.Color="ThemeRedShadow" />
		    	</WhileString>
		    	<WhileString Value="{ReadProperty Theme}" Equals="orange">
		    		<Change themePanel.Color="ThemeOrange" />
		    		<Change themeShadow.Color="ThemeOrangeShadow" />
		    	</WhileString>
		    	<WhileString Value="{ReadProperty Theme}" Equals="green">
		    		<Change themePanel.Color="ThemeGreen" />
		    		<Change themeShadow.Color="ThemeGreenShadow" />
		    	</WhileString>
		    	<WhileString Value="{ReadProperty Theme}" Equals="blue">
		    		<Change themePanel.Color="ThemeBlue" />
		    		<Change themeShadow.Color="ThemeBlueShadow" />
		    	</WhileString>

		    <Rectangle ux:Name="themePanel" Color="#aaa" />
		    <Shadow ux:Name="themeShadow" Angle="90" Size="2" Distance="4" Color="#aaa"/>
		</Panel>
		<bg.Panel Width="200" Height="200" Alignment="Center" Theme="green"/>
	</ClientPanel>
</App>

Notice that the theme here is passed as a string the entire way to the WhileStrings, which do the actual theme changing.

Additionally, having ux:Globals for every color of every theme might be very messy on bigger apps. There are various solutions to this, one of them is only storing the current theme in ux:Globals, and chancing them from JavaScript(This also allows for custom theming!). Additionally, it has the benefit of you not needing all these While’s in every element, so they can update based on current theme, as the logic is handled elsewhere.

4

Thank you very much!! It works perfectly!!