Using ReadProperty with BringToFront on clicked

Hi

I have “fab” type element that has a click event which i add a bringToFront so that it acts accordingly independent of the layout.

<Clicked>
	<Toggle Target="clickedState"/> 
	<BringToFront Target="RootParent" />
</Clicked>

I target the root parent element in the .ux file as the component’s z-index needs to scope to the MainView.ux

 <DockPanel ux:Class="fab.toolbar" ux:Name="RootParent">

Now, this works as intended until i add {ReadPropeprty} to that .ux file. So everything works fine and on click the BringToFront works as expected… but then breaks after adding a simple string ReadProperty. I basically want to change the icon color on the component like so ( In the MainView.ux )

<fab.toolbar IconColor="Red" />

and then in the fab.toolbar.ux file I add

<string ux:Property="IconColor" />

and then in the rectangle for my custom icon i add

<Rectangle Color="{ReadProperty IconColor}" />

And then this breaks the code with a error:

'this' declared in preview.card.ux(1) is a member of 'preview.card' and cannot be accessed 
from 'fab.toolbar'. To  make this work, consider making 'fab.toolbar' an ux:InnerClass of 
'preview.card'. 'this' does not contain property 'IconColor'

I dont understand why its saying something about the preview.card because it’s completely unrelated. The preview .card is a very simple plain component used further on in the MainView.ux file, with no connection to my fab.toolbar component

I just want to make sure that when the fab thing is clicked and the animations trigger, that they are set to the front , else if i have another component that is higher in the z-index stack they animation is hidden when it reaches that specific point in the view

this is the implicit ux:Name of ux:Classes. One that is used when you don’t assign an explicit ux:Name yourself.

When you do, like you did: ux:Name="RootParent", this no longer refers to the ux:Class you are in, but some arbitrary parent up the UX tree, which does not have an explicit ux:Name given.

When you set a ux:Name on a ux:Class, make sure to use that name to prefix your property definitions, and it will be all fine. Like so:

<Rectangle Color="{ReadProperty RootParent.IconColor}" />

Perfect. Thank you