# PageControl, Each and navigation

**URL:** <https://forums.fusetools.com/t/pagecontrol-each-and-navigation/1697>\
**Category:** How-to Discussions\
**Created:** [July 6, 2017, 9:00am UTC](https://forums.fusetools.com/t/pagecontrol-each-and-navigation/1697 "2017-07-06T09:00:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anders](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders/32/41_2.png) [@Anders](https://forums.fusetools.com/u/Anders)\
**Post date:** [July 6, 2017, 9:00am UTC](https://forums.fusetools.com/t/pagecontrol-each-and-navigation/1697/1 "2017-07-06T09:00:33Z")

</div>

I’m trying to populate a `PageControl` with `Page`s generated from an `Each`. I then want to navigate that `PageControl` using a `Set`, as shown in the [A dynamic tab bar](https://www.fusetools.com/examples/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:

```auto
<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?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [July 6, 2017, 6:50pm UTC](https://forums.fusetools.com/t/pagecontrol-each-and-navigation/1697/2 "2017-07-06T18:50:22Z")

</div>

Hi Anders,

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

```auto
<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](https://www.fusetools.com/docs/fuse/controls/pageindicator) class to create page tabs, as seen in [this example](https://www.fusetools.com/examples/tab-bar-navigation).

---

<div class="post-metadata">

**Author:** ![Anders](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders/32/41_2.png) [@Anders](https://forums.fusetools.com/u/Anders)\
**Post date:** [July 7, 2017, 6:04am UTC](https://forums.fusetools.com/t/pagecontrol-each-and-navigation/1697/3 "2017-07-07T06:04:54Z")

</div>

Thanks Uldis!

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

```auto
<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`.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [July 7, 2017, 9:54pm UTC](https://forums.fusetools.com/t/pagecontrol-each-and-navigation/1697/4 "2017-07-07T21:54:09Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Anders](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders/32/41_2.png) [@Anders](https://forums.fusetools.com/u/Anders)\
**Post date:** [July 11, 2017, 10:16am UTC](https://forums.fusetools.com/t/pagecontrol-each-and-navigation/1697/5 "2017-07-11T10:16:52Z")

</div>

That does help, thanks a lot! 🙂