Resources are objects that are identified by a string key, either globally for your app or for certain pages/subtrees.

Types of resources

Resources can be of any type, but it is most commonly used for fonts, colors, constant values, strings etc.

Classes that inherit from Node can only be rooted with one parent at a time, and is therefore rarely useful as global resources. Consider creating a ux:Class instead and instantiate multiple objects whenever needed.

Global resources (ux:Global)

The ux:Global attribute can be used on an UX node to convert it to a global resource.

For example, a global Font resource can be defined like this:

<Font File="arial.ttf" ux:Global="MyDefaultFont" />

And then used like this:

<Text Font="MyDefaultFont" />

When the global key is used directly (with no binding syntax), the resource is resolved statically at build time, and you get an error message if no appropriate resource is found.

Dynamic resource bindings

When you want resources to resolve at runtime and respect tree-local resources, you can also use the dynamic resource binding syntax:

<Text Font="{Resource MyDefaultFont}" />

Local resources (ux:Key)

The ux:Key attribute is used to convert a node to a tree-local resource.

This allows you to do local overrides in the tree, using the ux:Key attribute:

<Panel>
    <Font File="verdana.ttf" ux:Key="MyDefaultFont" />
    <Panel>
        <Text Font="{Resource MyDefaultFont}" />
    </Panel>
</Panel>

You can think of ux:Global as a way to set global defaults for dynamic resource keys (ux:Key)

Resource key uniqueness

Global resource keys must be unique for the given type of the resource. Multiple resources can have the same name as long as they are unrelated types.

For example, Fuse defines multiple resources with the key Blue, and the right resource is determined based on the expected type where it used. It can either be a float4 color value or a SolidColor brush.

<float4 ux:Global="Red" ux:Value="#f00" />
<SolidColor ux:Global="Red" Color="Red" />