UX Expressions not working when using Each

How-to Discussions
1

Hi

Using: Fuse 0.35 on a Mac

the following code works:

<Panel>

    <ScrollView>
        <Panel>
            <PageControl>
                <Each Count="2"> 
                    <Page>
                        <Panel Alignment="Top">
                            <Each Count="1">
                                <Rectangle Width="150" Height="100" Fill="#f00" Y="y(second)" Alignment="Center"/>
                                <Rectangle Width="150" Height="100" Fill="#0f0" Y="y(first)" Alignment="Center"/>
                            </Each>
                        </Panel>
                    </Page>
                </Each>
            </PageControl>
            <StackPanel>
                <MyRectangle Fill="#f00" ux:Name="first"/>
                <MyRectangle Fill="#0f0" ux:Name="second"/>
                <MyRectangle Fill="#00f" ux:Name="third"/>
                <MyRectangle Fill="#ff0" ux:Name="fourth"/>
            </StackPanel>
            
        </Panel>
    </ScrollView>

</Panel>

<Rectangle ux:Class="MyRectangle" Alignment="Left" Width="100" Height="180" >
</Rectangle>

it draws 2 rectangles at the same Y of the ux:Name=“second” and ux:Name=“first”

BUT

if i want to change the “Each Count” for an Observable it stops working (it draws the rectangles at the top):

<Panel>

    <ScrollView>
        <Panel>
            <PageControl>
                <!-- pages = observable with 2 items for example -->
                <Each Items="{pages}"> 
                    <Page>
                        <Panel Alignment="Top">
                            <Each Count="1">
                                <Rectangle Width="150" Height="100" Fill="#f00" Y="y(second)" Alignment="Center"/>
                                <Rectangle Width="150" Height="100" Fill="#0f0" Y="y(first)" Alignment="Center"/>
                            </Each>
                        </Panel>
                    </Page>
                </Each>
            </PageControl>
            <StackPanel>
                <MyRectangle Fill="#f00" ux:Name="first"/>
                <MyRectangle Fill="#0f0" ux:Name="second"/>
                <MyRectangle Fill="#00f" ux:Name="third"/>
                <MyRectangle Fill="#ff0" ux:Name="fourth"/>
            </StackPanel>
            
        </Panel>
    </ScrollView>

</Panel>

<Rectangle ux:Class="MyRectangle" Alignment="Left" Width="100" Height="180" >
</Rectangle>

is that a bug? the expected behaviour or am I doing something wrong ?

thnx!

2

Hi zaulin,

we are currently investigating what might be the cause for this odd behaviour. Will keep you posted.

3

Hi zaulin,

Thanks for reporting this. This is a subtle bug that only occurs in preview (exported apps will work fine).

A fix has been submitted internally and will roll out in a future release.