How to use ux:Property to a <SolidColor />

How-to Discussions
1

I’m trying to set the background colour of a panel by using a property of the class: OptionsBackground.

<Rectangle Layer="Background">
    <SolidColor ux:Binding="OptionsBackground" ux:Name="bgCol" />
    <Stroke Brush="#BFD8DD" Width="1"/>
</Rectangle>

My property is <Brush ux:Property="OptionsBackground"/> However when building the project I get this error:

'Fuse.Controls.Rectangle does not expose a bindable property called 'OptionsBackground' -
/Users/caseywilliams/Desktop/DropdownMenu/DropdownMenu.ux(26:1):E
2

Hi Casey,

The code you pasted doesn’t make much sense. Can you show more code? Specifically the code that declares OptionsBackground

3

Hi Anders,

Yeah sorry, I’ve just realised the actual file is a bit of a mess haha. I’ll just post the file.

4 
<Panel ux:Class="DropdownMenu" ux:Name="menu">
    <object ux:Property="ListItems" />
    <Brush ux:Property="OptionsBackground" />
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var selected = Observable();

        function selectMe(arg){
            selected.value = arg.data.name;

        }

        module.exports = {
            selected: selected,
            selectMe: selectMe,

        }

    </JavaScript>

    <Panel ux:Class="DropdownOption" ux:Name="self" Height="30">
        <string ux:Property="Text" />
        <Rectangle Layer="Background">
            <SolidColor ux:Binding="OptionsBackground" ux:Name="bgCol" />
            <Stroke Brush="#BFD8DD" Width="1"/>
        </Rectangle>
        <Text Alignment="CenterLeft" Value="{Property self.Text}" FontSize="14" Margin="10,0"/>

        <WhileHovering>
            <Change bgCol.Color="#D9E1E4" />
        </WhileHovering>
    </Panel>
    <Panel ux:Class="DropdownSelectedItem" ux:Name="self" Height="40">
        <string ux:Property="Text" />
        <Text Alignment="CenterLeft" Value="{Property self.Text}" FontSize="16" Margin="10,0"/>
        <Panel Layer="Background">
            <Rectangle Fill="#FBFDFD" Height="100%" Alignment="Top"/>
        </Panel>
    </Panel>


    <Panel Width="200" Height="40">
        <Rectangle>
            <Stroke Brush="#BFD8DD" Width="1"/>
        </Rectangle>
        <DropdownSelectedItem Text="{selected}" />
        <Clicked>
            <Toggle Target="expandDropdown" />
        </Clicked>

        <WhileTrue ux:Name="expandDropdown">
            <StackPanel Offset="0,40">
                <Each Items="{Property menu.ListItems}">
                    <DropdownOption Text="{name}" Clicked="{selectMe}" />
                </Each>
            </StackPanel>
        </WhileTrue>
    </Panel>
</Panel>

It’s pretty all over the place, especially as I have multiple classes within one :confused:

5

Hi!

In this case where you want to access properties from the outer class, you have to declare your inner class ux:InnerClass.

<Panel ux:InnerClass="DropdownOption" ux:Name="self" Height="30">

Next, your syntax for binding the property is wrong. This is how:

<Rectangle Layer="Background" Fill="{Property menu.OptionsBackground}">