Changing Fill property on a Circle using Change

General
1

I am trying to change the Fill of a circle called “timerCircle” when a rectangle is clicked. Here is my code:

<Circle ux:Name="timerCircle" Width="300" Height="300" Fill="#111" />

<Rectangle Alignment="BottomCenter" Width="100" Height="40" CornerRadius="5" Fill="#3399FF">
    <Clicked>
        <Change timerCircle.Fill="#333" />
        <Callback Handler="{startTimer}"/>
    </Clicked>
    <Text Alignment="Center" Value="Start" TextColor="#fff" />
</Rectangle>

But I get the following error: None of the global resources with alias ‘#333’ can be used here

Can I not change the Fill dynamically? Thanks for the help!

2

I’ve been having this issue too. There are a couple of ways you can get around it:

  • Make an Observable containing the hex code of the circle’s colour, then inside your {startTimer} function you can add some code to change that hex code when the function is called by the <Callback/>
  • Make two circles, one on top of the other, one with the normal colour of the circle and the other with the colour you want it to change to. Give one of the circles 1 opacity and the other one 0 opacity then use <Change /> to change the opacity of the normal circle colour to 0 and the opacity of the clicked circle colour to 1. You’d probably have to implement this inside of a <WhileTrue/> with a <Toggle /> but the advantage of this method over the databinding one above is that you can animate the colour change as opposed to it just instantly changing colour.
3

Try something along the lines of:

<Circle Width="300" Height="300">
    <SolidColor ux:Name="circleColor" Color="#111" />
</Circle>

Then, assign the #333-value to circleColor rather than to the Circle's Fill-property using something like <Change circleColor.Color="#333" />. The Fill="#111" is shorthand for assigning a SolidColor-brush. Sometimes you have to spell it out to be able to target the fill property.

For some more information about brushes, see here: https://www.fusetools.com/learn/fuse#brushes

4

Here’s a full example toggling the fill of the circle:

<App Theme="Basic">
    <Circle Width="300" Height="300">
          <SolidColor ux:Name="circleColor" Color="#111" />
          <Clicked>
              <Toggle Target="colorToggle" />
          </Clicked>
    </Circle>
    <WhileTrue ux:Name="colorToggle">
        <Change circleColor.Color="#333" />
    </WhileTrue>
</App>

(Click the Circle to toggle.)