Confusing results when mixing styling and resources

Bug Reports
1

This code produces three blue lines of text, while I had expected one red, one green and one blue:

<App ClearColor="#000">
    <StackPanel>
        <float4 ux:Key="red" ux:Value="#F00"/>
        <float4 ux:Key="green" ux:Value="#0F0"/>
        <float4 ux:Key="blue" ux:Value="#00F"/>
        <Style>
            <Text TextColor="{Resource blue}" />
        </Style>
        <Text TextColor="{Resource red}">red?</Text>
        <Text TextColor="{Resource green}">green?</Text>
        <Text>blue?</Text>
    </StackPanel>
</App>
2

This version works as I had expected (one red, one green, one blue line of text):

<App ClearColor="#000">
    <float4 ux:Key="red" ux:Value="#F00"/>
    <float4 ux:Key="green" ux:Value="#0F0"/>
    <StackPanel>
        <float4 ux:Key="blue" ux:Value="#00F"/>
        <Style>
            <Text TextColor="{Resource blue}" />
        </Style>
        <Text TextColor="{Resource red}">red?</Text>
        <Text TextColor="{Resource green}">green?</Text>
        <Text>blue?</Text>
    </StackPanel>
</App>
3

Thanks for the report, I’ll look into this asap!

4

I’ve been able to reproduce this locally, and it looks like an error in either resource resolution or the order in which styles are applied to the Text elements. I’ll need to dig a bit deeper, but I’ll keep you posted :slight_smile:

5

I also get a lot of these types of errors when trying to use resources in this way:

C:\Users\eivind\Documents\Fuse\Trio5.cache\GeneratedCode\Profile.g.uno(18,28): E3102: There is nothing named 'temp' accessible in this scope. Are you missing a package reference?

Ux-code:

<Text ux:Class="Heading" Font="Raleway" FontSize="24" Padding="0" Margin="15,40,0,15" TextColor="#419344"> <!-- C700 -->
    <Panel ux:Binding="Appearance" Margin="1" Alignment="Bottom">
        <Rectangle Height="1">
            <SolidColor Color="{Resource C500}"/> <!-- C500 -->
        </Rectangle>
    </Panel>
</Text>

Generated code:

public partial class MainHeading: Fuse.Controls.Text
{
    Profile.Fuse_Controls_TextControl_float4_TextColor_Property this_TextColor_inst;
    static MainHeading()
    {
    }
    public MainHeading()
    {
        InitializeUX();
    }
    internal void InitializeUX()
    {
        this_TextColor_inst = new Profile.Fuse_Controls_TextControl_float4_TextColor_Property(this);
        this.FontSize = 40f;
        this.Alignment = Fuse.Elements.Alignment.Right;
        this.Margin = float4(0f, 15f, 15f, 0f);
        this.Font = Theme.Raleway;
        this.Behaviors.Add(temp);
    }
}

It seems however to depend on context somehow whether or not the bug will appear

This might or might not be related to the other problem above

6

Hi Eivind,

Regarding your first issue, with the current implementation, it is the expected behavior. Resource bindings are not “replaced” when you override them, they are added together. This means that both bindings remain, and they will fight for initialization order. Thus what color you actually see is undefined. As this behavior is not very useful, I’ve raised an issue to get this case investigated.

Your second issue is definitely a bug, and I’ve raised another high priority issue for that one.

Thanks for reporting :slight_smile:

7

I guess that means that I should not define my colors as resources and hope to do anything useful with it. Especially since BasicTheme already styles a lot of stuff using resources, which means these conflicts will pop up whenever I’m unlucky.

I’ll try using ux:Global instead of ux:Key when defining my colors, or something like that

8

Note that you can always override the resource keys - and that is how they are meant to be used.

It doesn’t make much sense to define resources named “red”, “green” etc. Instead, define resources with semantic meaning, e.g. “ErrorColor”. Then you can override what “ErrorColor” is in a scope by defining a new resource with that key.

9

Oh!

That is indeed a different way of looking at it and should definitely work. Thanks!

10

Eivind, the bug causing There is nothing named 'temp' accessible in this scope. has now been fixed and will roll out in a release soon :slight_smile:

11

Hi,

one problem with that logic is that you can’t define default colors then override them occasionnally. For example, I’d like all my buttons to be blue, execpt for that one which should be ErrorColor.

I think the color Resource on a specific Node should override the global default property, as it is the case with CSS :slight_smile: