Defining look and feel in a single place

[Eivind]

Sounds like a smart thing to do, and fuse documentation seems to encourage this here and there. E.g. the “Resources” tutorial. However, I have never seen a complete example, and I’ve been wondering a lot how to do it.

Let’s say I want to:

• Base my look-and-feel on the BasicTheme with Red color scheme

• Define a few more color-resources in addition to the C50-C1000 different reds. In particular, i want to define a few greys

• Define some classes for menu buttons and other controls with customized styling.

• include some fonts with names that I can refer to later

How to do this?

Which type should the root node of my look-and-feel file be? Style? Theme? Node? I tried using Node, but I get “There is no identifier named ‘__parent’ in this scope”

Should I define colors using SolidColor and ux:Name ? OR should i define resources, after all that’s how the Cxxx-colors are defined. Or should I use ux:Class and instantiate them where I need them?

I’d like to define a “separator” element, which is simply a grey line that I can use to separate up my gui elemens in the view. What base class should I use? I tried Panel and Rectangle, but I get “Cannot use sealed class for base class”

Here’s what I’m experimenting with at the moment. I know that it doesn’t include all of the above. I just haven’t understood what I’m doing:

<Node ux:Class="MyStyle">
    <Fuse.BasicTheme.BasicTheme ColorScheme="Red" />
    <SolidColor ux:AutoBind="false" ux:Name="WhiteColor" Color="{Resource C1000}"/>    <SolidColor ux:AutoBind="false" ux:Name="LightGreyColor" Color="#ccc" />

    <Panel ux:Class="Separator">
        <Rectangle Fill="LightGreyColor" ux:Binding="Appearance"/>
    </Panel>
</Node>

[Anders_Lassen]

Hi!

Here’s how:

Define a few more color-resources in addition to the C50-C1000 different reds. In particular, i want to define a few greys

Resources are defined using the ux:Key:

<float4 ux:Key="MyCustomColor" ux:Value="#f00" />

<SolidColor ux:Key="MyCustomColor" Color="#f00" />

Resources with different types can have different names. The resources are resolved based on both type and key.

Define some classes for menu buttons and other controls with customized styling.

This is done using ux:Class

<Button ux:Class="MyButton" FontSize="18" />

Note that the UX simulator does currently not support changes to inner classes (this is coming). Whenever you change one of these, you have to do a hard recompile.

Once you have a custom class, you can either style it directly on the class, or in a style tag:

<Style>
    <MyButton Alginment="CenterLeft" />
</Style>

include some fonts with names that I can refer to later

Global resources are defined using ux:Global :

<Font ux:Global="DinNextItalic" File="Fonts/DinNext/DINNextLTPro-Italic.otf" />

And refer to it like this:

<Text Font="DinNextItalic">Hello!</Text>

[Eivind]

Hi Anders, thanks for the examples, but I’ve seen all of those in your various tutorials. The main point of my question was a little on the side of this.

How can I collect all my look-and-feel code in one file? (Or if not possible, what is the recommended way to encapsulate your “look-and-feel”)

[Anders_Lassen]

Yeah, you can create a separate UX file which contains all of this. E.g. use Style as root tag

<Style>

    <float4 ux:Key="MyCustomColor" ux:Value="#f00" />

    <SolidColor ux:Key="MyCustomColor" Color="#f00" />

    <Font ux:Global="DinNextItalic" File="Fonts/DinNext/DINNextLTPro-Italic.otf" />

    <Button ux:Class="MyButton" />

</Style>

[Eivind]

OK, that goes a long way…

I take it that it’s not possible to specify in the same file that we’d like to use BasicTheme with colorscheme=“red”…

[Eivind]

Because I don’t give up so easily, I tried this:

<Fuse.BasicTheme.BasicTheme ux:Class="SocialClient.MyTheme">
    <float4 ux:Key="LightGrey" ux:Value="#ccc" />
    <SolidColor ux:Key="LightGrey" Color="#ccc" />
    <!-- Font ux:Global="DinNextItalic" File="Fonts/DinNext/DINNextLTPro-Italic.otf" /> -->
    <Button ux:Class="MyButton" />
</Fuse.BasicTheme.BasicTheme>

I get: “Object of type ‘SocialClient.MyTheme’ cannot be converted to ‘Fuse.Node’”

What does it mean? Sholdn’t I be able to convert to whatever BasicTheme can convert to, since I am inheriting it?

[Eivind]

My mistake… This works!

Putting this in a file called MyTheme.ux:

<Fuse.BasicTheme.BasicTheme ColorScheme="Red">
    <float4 ux:Key="LightGrey" ux:Value="#ccc" />
    <SolidColor ux:Key="LightGrey" Color="#ccc" />
    <Button ux:Class="MyButton" />
    <Button FontSize="40"/>
</Fuse.BasicTheme.BasicTheme>

And in the main .ux-file:

<App>
    <MyTheme />
    // etc ...
</App>

I’m happy

[Eivind]

I want to put my color definitions in a separate file, but each type must contain only one root node - what type shoud i use if I want to instantiate this directly in my App?

<Node> <-- ???? doesnt work, "no constructor" -->

    <float4 ux:Key="sec0" ux:Value="#1d202c"/>
    <float4 ux:Key="sec1" ux:Value="#3a4158"/>
    <float4 ux:Key="sec2" ux:Value="#7784a6"/>
    <float4 ux:Key="sec3" ux:Value="#bdbfc6"/>

    <float4 ux:Key="pri1" ux:Value="#c2768e"/>
    <float4 ux:Key="pri2" ux:Value="#e8a0a2"/>
    <float4 ux:Key="pri3" ux:Value="#f7cab1"/>
    <float4 ux:Key="pri4" ux:Value="#fdf0cc"/>

    <float4 ux:Key="accent" ux:Value="#ee8485"/>
    <float4 ux:Key="white" ux:Value="#fff"/>
    <float4 ux:Key="black" ux:Value="#000"/>
    <float4 ux:Key="red" ux:Value="#f00"/>

    <float4 ux:Key="controlBg" ux:Value="#FFF"/>
    <float4 ux:Key="controlFg" ux:Value="#7784a6"/>
    <float4 ux:Key="controlFgBright" ux:Value="#cdcfd6"/>
    <float4 ux:Key="controlFgDark" ux:Value="#3a4158"/>
    <float4 ux:Key="controlMargin" ux:Value="5"/>

</Node>

[Fernando_Lins]

I’m bumping this because I want to do the same but when I call TextColor="{Resource someColor}" I always get black text. I also tried it as ux:Global to no success.

[Fernando_Lins]

My issue has been solved:

It used to print the error E0000: Cannot parse '{Resource someColor}' as 'float4': 'Input string was not in a correct format.'

The issue was caused because I was using Object.Property="{Resource key}" shorthand instead of Target="Object.Property" Value="{Resource key}".

For example:

Incorrect Syntax:

<Change searchField.TextColor="{Resource cinzaE}" />

Correct Syntax:

<Change Target="searchField.TextColor" Value="{Resource cinzaE}" />

Mr @hasselknipe said that “{} syntax is not supported with the shorthand syntax.”

[John]

BAAAAAAAM - In my face!!!

Thank you <3

[Anders_Lassen]

This should all be fixed (finally) in the upcoming Fuse 0.36 version.

From that version, it should no longer be necessary to use Fernando’s work-around.