PageIndicator, all dots as active

Bug Reports
1

I put together this code from examples in the lear section.

Everything is working perfect except for the circles that are all scaled as actives.

am I doing something wrong?

<StackPanel>
    <Panel>
        <PageIndicator Navigation="pageControl"  Alignment="BottomCenter">
            <Circle ux:Generate="Factory" ux:Binding="DotFactory" Margin="5" Width="7" Height="7">
                <SolidColor Color="#FFF"/>
                <Stroke Width="1" Brush="#000" />
                <ActivatingAnimation>
                    <Scale Factor="1.3"/>
                </ActivatingAnimation>
            </Circle>
        </PageIndicator>
        <Panel>
            <Style>
                <Panel>
                    <EnteringAnimation>
                        <Move X="-1" RelativeTo="ParentSize"/>
                    </EnteringAnimation>
                    <ExitingAnimation>
                        <Move X="1" RelativeTo="ParentSize"/>
                    </ExitingAnimation>
                </Panel>
            </Style>
            <LinearNavigation Easing="CircularOut" ux:Name="pageControl"/>
            <SwipeNavigate SwipeDirection="Left" SwipeEnds="Closed"/>
            <Page>
                <Image File="assets/images/categoria_cover.jpg" />
            </Page>
            <Page>
                <Image File="assets/images/categoria_cover.jpg" />
            </Page>        
            <Page>
                <Image File="assets/images/categoria_cover.jpg" />
            </Page> 
        </Panel>
    </Panel>
</StackPanel>
2

doing some debugging I think this error happens when this code is inside another <Page>

3

I just ran into this issue today. Does seem to be an issue when nested in another Page

4

If I understand correctly you’re saying that the above code works, but it behaves strangely when it’s combined with something else? If so, can you please provide some code that actually misbehaves? :slight_smile:

It could be that the active-state of a surrounding page confuses the page indicator, but we need to see it in action in order to debug.

5

Thanks Remi for looking at this below is an example. This will make every dot active.

<App Theme="Basic" Background="#eeeeeeff">
    <ClientPanel>
        <DirectNavigation Active="tab1" ux:Name="_tabNav" />
        <Style>
            <Panel>
                <EnteringAnimation>
                    <Move X="1" RelativeTo="Size" Duration="0.3" Easing="CircularInOut" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="-1" RelativeTo="Size" Duration="0.3" Easing="CircularInOut" />
                </ExitingAnimation>
                <WhileActive Threshold="0.5">
                    <BringToFront />
                </WhileActive>
            </Panel>
        </Style>
        <Panel Background="#FF0" ux:Name="tab1">
            <Button Text="Go to tab 2">
                <Clicked>
                    <NavigateTo Target="tab2" NavigationContext="_tabNav" />
                </Clicked>
            </Button>
        </Panel>
        <Panel Background="#FF0" ux:Name="tab2">
            <ActivatingAnimation>
                <Change _tabItem1Background.Color="#61949e" Duration="0.3" DurationBack="0" />
                <Change _edgeItem2Background.Color="#b0151eff" Duration="0.3" DurationBack="0" />
            </ActivatingAnimation>
            <HierarchicalNavigation ux:Name="_subNavTab2" Duration="0.5" Easing="QuinticInOut" />
            <Page>
                <Button Text="Starter">
                    <Clicked>
                        <NavigateTo Target="_tab2SubPage1" NavigationContext="_subNavTab2" />
                    </Clicked>
                </Button>
            </Page>
            <Page ux:Name="_tab2SubPage1" ux:AutoBind="false">    
                <DockPanel>
                    <Panel>
                        <PageControl ux:Name="pageControl">
                            <Page ux:Name="RedPage" Background="Red" />
                            <Page Background="Blue" />
                            <Page Background="Green" />
                            <Page Background="Yellow" />
                        </PageControl>
                    </Panel>

                    <PageIndicator Navigation="pageControl" Dock="Bottom" Alignment="Center">
                        <Circle ux:Generate="Factory" ux:Binding="DotFactory" Margin="5" Width="20" Height="20">
                            <Stroke Width="1" Brush="#ff0" />
                            <SolidColor Color="#333" />
                            <ActivatingAnimation>
                                <Scale Factor="0.5" />
                                <DebugAction Message="next!" />
                            </ActivatingAnimation>
                        </Circle>
                    </PageIndicator>
                </DockPanel>
            </Page>
        </Panel>
    <ClientPanel>
</App>
6

The new build Fuse version 0.9.8 (build 5700) fixes this issue for me