Difference between Brush and float4 when defining colors?

How-to Discussions
1

I’ve defined colors in a separate styles.ux file so I can reuse them throughout my app, which I included in my MainView.ux.

styles.ux

<Panel Width="0" Height="0">
  <float4 ux:Global="Color_DTHYellow" ux:Value="#fd0" />
  <float4 ux:Global="Color_White" ux:Value="#fff" />
  <float4 ux:Global="Color_FacebookBlue" ux:Value="#3b5998" />
</Panel>

MainView.ux

<App>
<ux:Include File="styles.ux"/>
  <Router ux:Name="router"/>
  <Navigator DefaultTemplate="login">
    <Pages.Login ux:Template="login" router="router"/>
    <Pages.Main ux:Template="main" router="router"/>

  </Navigator>
</App>

And on my login page, I’m trying to use Color_DTHYellow for the Background of the Page

login.ux

<Page ux:Class="Pages.Login" Background="Color_DTHYellow">
  <Router ux:Dependency="router"/>

  <JavaScript>
    module.exports = {
      login_clicked: function(){
        //do login stuff
        router.goto("main");
      }
    }
  </JavaScript>

  <Grid Rows="1, auto, 1">
    <Button Text="Login with Facebook" Clicked="{login_clicked}" Row="1"
      Color="{Color_White}" Background="{Color_FacebookBlue}" Padding="10" Margin="50"/>
  </Grid>

</Page>

However, I’m getting this error: There is nothing named 'Color_DTHYellow' in this scope, and none of the global resources with alias 'Color_DTHYellow' can be used here: The type must be compatible with 'Fuse.Drawing.Brush'. 'MainView.Color_DTHYellow' is of type float4'.

So my question is why can a float4 literal be used in place of a Brush as in

<Page ux:Class="Pages.Login" Background="#fd0">

but not a global float4 resource as in

<float4 ux:Global="Color_DTHYellow" ux:Value="#fd0" />
<Page ux:Class="Pages.Login" Background="Color_DTHYellow">

I’m just starting to learn Fuse, so any help with this would be greatly appreciated. Thanks in advance :slight_smile:

As a side note, I basically took this pattern from the Rotating Pages example

And to clarify, this doesn’t work either:

<Button Text="Login with Facebook" Clicked="{login_clicked}" Row="1"
      Color="{Color_White}" Background="{Color_FacebookBlue}" Padding="10" Margin="50"/>
2

Hi!

When using <Panel Background="#fd0" /> the UX compiler will translate the hex color to a SolidColor.

I think what you want to do is something like this:

<Panel Width="0" Height="0">
    <SolidColor ux:Global="Color_DTHYellow" Color="#fd0" />
    <SolidColor ux:Global="Color_White" Color="#fff" />
    <SolidColor ux:Global="Color_FacebookBlue" Color="#3b5998" />
</Panel>
3

Hi Vegard,

What if I want to use one color for both Background and Color attributes in separate cases?

If I choose:

<float4 ux:Global="PrimaryColor" ux:Value="#F77777" />

Color attributes works, but Background attributes don’t.

If I choose:

<SolidColor ux:Global="PrimaryColor" Color="#F77777" />

Background attributes works, but Color attributes don’t.

Is there any solution?

4

I don’t think you need to work with Background at all. Color should work just fine everywhere.