PageControl, Each and navigation

How-to Discussions
1

I’m trying to populate a PageControl with Pages generated from an Each. I then want to navigate that PageControl using a Set, as shown in the A dynamic tab bar example. However, when I click the headers, the pages don’t change. I can however change pages normally by swiping between them in the PageControl itself.

I’m using Fuse 1.0.1 on Sierra, and the problem happens both in preview and .net export.

Here’s a full reproduction:

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var pages = ["foo", "bar"];
		module.exports = {pages}
	</JavaScript>
	<DockPanel>
		<Panel Dock="Top">
			<StackPanel Orientation="Horizontal">
				<Each Items="{pages}">
					<Text Value="{}" HitTestMode="LocalBounds">
						<Tapped>
							<DebugAction Message="{}"/>
							<Set nav.Active="{}"/>
						</Tapped>
					</Text>
				</Each>
			</StackPanel>
		</Panel>
		<PageControl ux:Name="nav">
			<Each Items="{pages}">
				<Page ux:Name="{}">
					<Text Value="{}" FontSize="40"/>
				</Page>
			</Each>
		</PageControl>
	</DockPanel>
</App>

What am I doing wrong?

2

Hi Anders,

I found that if you change the ux:Name to just Name on the Pages, then it works as expected:

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var pages = ["foo", "bar"];
        module.exports = {pages}
    </JavaScript>
    <DockPanel>
        <Panel Dock="Top">
            <StackPanel Orientation="Horizontal">
                <Each Items="{pages}">
                    <Text Value="{}" HitTestMode="LocalBounds">
                        <Tapped>
                            <DebugAction Message="{}"/>
                            <Set nav.Active="{}"/>
                        </Tapped>
                    </Text>
                </Each>
            </StackPanel>
        </Panel>
        <PageControl ux:Name="nav">
            <Each Items="{pages}">
                <Page Name="{}">
                    <Text Value="{}" FontSize="40"/>
                </Page>
            </Each>
        </PageControl>
    </DockPanel>
</App>

I’m actually not sure if that’s a bug or a feature, and I’ll check on that.

Related: it is recommended that you use the PageIndicator class to create page tabs, as seen in this example.

3

Thanks Uldis!

It sounds like a bug to me, since ux:Name works when I unroll the loop:

<App>
	<DockPanel>
		<Panel Dock="Top">
			<StackPanel Orientation="Horizontal">
					<Text Value="foo" HitTestMode="LocalBounds">
						<Tapped>
							<DebugAction Message="foo"/>
							<Set nav.Active="foo" />
						</Tapped>
					</Text>
					<Text Value="bar" HitTestMode="LocalBounds">
						<Tapped>
							<DebugAction Message="bar"/>
							<Set nav.Active="bar" />
						</Tapped>
					</Text>
			</StackPanel>
		</Panel>
		<PageControl ux:Name="nav">
				<Page ux:Name="foo">
					<Text Value="foo" FontSize="40"/>
				</Page>
				<Page ux:Name="bar">
					<Text Value="bar" FontSize="40"/>
				</Page>
		</PageControl>
	</DockPanel>
</App>

And it’s also what’s being used in the example.

Anyway, I’ll look into that example, I didn’t know about PageIndicator.

4

Took some time to check this, but at least we have an answer. ux:Name is a compile-time attribute, while Name is its run-time equivalent. Setting ux:Name automatically sets Name too.

So basically, if you want to data-bind the name of a node to something that you have in JavaScript, you should use Name instead of ux:Name.

Hope this helps!

5

That does help, thanks a lot! :slight_smile: