White display instead of a page content

General
1

This is my code but with I test it I get a white screen first. But when I click the button “scrapbook” or upload I see my content normally. Please what am I doing wrongly?

<App Theme="Basic">
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <Panel Dock="Fill">
            <LinearNavigation Duration="0.5" Easing="CubicInOut" ux:Name="_appName" Active="Dashboard" />
            <Text ux:Class="Titles" FontSize="55" />
            <Text ux:Class="Large" FontSize="40" />
            <Text ux:Class="MediumX" FontSize="30" TextAlignment="Center" />
            <Text ux:Class="Medium" FontSize="20" TextAlignment="Center" />
            <Text ux:Class="MediumS" FontSize="16" TextAlignment="Center" />
            <Text ux:Class="Small" FontSize="10" />
            <Rectangle CornerRadius="15" ux:Class="ButtonCust" Height="60" Width="330" />
            <Rectangle ux:Class="GridButton" Height="60" Width="150" />
            <Page ux:Class="AppPage" ClipToBounds="true">
                <EnteringAnimation>
                    <Move X="-1" Duration="0.5" RelativeTo="Size" />
                    <!-- <Scale Factor="0.5"/> -->
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="1" Duration="0.5" RelativeTo="Size" />
                    <!-- <Scale Factor="0.5"/> -->
                </ExitingAnimation>
            </Page>

            <!-- Intro -->
            <AppPage ux:Name="Intro">
                <PageIndicator Navigation="_intro" Alignment="BottomCenter" Margin="0,0,0,80">
                    <Circle ux:Generate="Factory" ux:Binding="DotFactory" Width="15" Height="15" Margin="6">
                        <SolidColor ux:Name="color" Color="#5AF37C" />
                        <ActivatingAnimation>
                            <Change color.Color="#fff" />
                        </ActivatingAnimation>
                    </Circle>
                </PageIndicator>
                <PageControl ux:Name="_intro" Opacity="0" Alignment="Bottom">

                    <Page Background="#fc0">

                        <StackPanel Alignment="Top">
                            <Medium Value="Skip" Alignment="Right" Margin="0,30,20,0" TextColor="#5AF37C" />
                        </StackPanel>
                        <StackPanel Alignment="Center" Margin="10,-400,0,0">
                            <Titles Value="Wanderlust" Alignment="Center" TextColor="#fff" Margin="0,200,0,150" />
                            <Medium Value="Wanderlust photo scrapbook" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <Medium Value="let's you capture everyday travel moments" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                        </StackPanel>
                    </Page>

                    <Page Background="#0fc">
                        <StackPanel Alignment="Top">
                            <Medium Value="Skip" Alignment="Right" Margin="0,30,20,0" TextColor="#5AF37C" />
                        </StackPanel>
                        <StackPanel Alignment="Center" Margin="10,-400,0,0">
                            <Titles Value="Wanderlust" Alignment="Center" TextColor="#fff" Margin="0,200,0,150" />
                            <Medium Value="By tracking your location " TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <Medium Value="we know when you're in a new city" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                        </StackPanel>
                    </Page>

                    <Page Background="#0cf">
                        <StackPanel Alignment="Top">
                            <Medium Value="Done" Alignment="Right" Margin="0,30,20,0" TextColor="#5AF37C" />
                        </StackPanel>
                        <StackPanel Alignment="Center" Margin="10,-400,0,0">
                            <Titles Value="Wanderlust" Alignment="Center" TextColor="#fff" Margin="0,200,0,150" />
                            <Medium Value="We will send you a reminder to capture " TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <Medium Value="a travel moment in every new city" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <Medium Value="you visit" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <Medium Value="Share your travel moments" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" Margin="0,30,0,0" />
                            <Medium Value="with friends and family" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                        </StackPanel>
                    </Page>
                </PageControl>
            </AppPage>

            <!-- signup -->
            <AppPage ux:Name="Signup">

                <HierarchicalNavigation Duration="0.5" Easing="QuinticInOut" />
                <Panel Background="#fff" ux:Name="_mainSignup">

                    <StackPanel Alignment="Center" Margin="10,-300,10,0">
                        <Titles Value="Wanderlust" Alignment="Center" TextColor="#000" Margin="0,300,0,250" />

                        <MediumS Value="We will not post your Facebook" Margin="0,0,0,40" />
                        <ButtonCust Fill="#325FCB">
                            <Medium Value="Sign in with Facebook" Alignment="Center" TextColor="#fff" />
                        </ButtonCust>
                        <ButtonCust Fill="#EAEAEA" Margin="0,20,0,0">
                            <Medium Value="Sign up using email" Alignment="Center" TextColor="#C0C0C0" />
                        </ButtonCust>
                        <Grid ColumnCount="2" Alignment="Center">
                            <MediumS Value="Already have an account?" />
                            <MediumS Value=" LOG IN">
                                <Clicked>
                                    <NavigateTo Target="Login" NavigationContext="_appName" />
                                </Clicked>
                            </MediumS>
                        </Grid>
                    </StackPanel>
                </Panel>


            </AppPage>

            <!-- Login -->
            <AppPage ux:Name="Login">
                <Panel Background="#fff" ux:Name="_login">

                    <StackPanel Margin="0,200,0,0">
                        <TextInput PlaceholderText="Username" Margin="50,0,50,0" />
                        <TextInput PlaceholderText="Password" Margin="50,0,50,0" />
                        <Medium Value="Forgot your password?" Alignment="Left" Margin="50,40,0,0" />
                        <ButtonCust Background="#78FF7F" Margin="0,200,0,0">
                            <Medium Value="LOG IN" Alignment="Center" TextColor="#fff" />
                        </ButtonCust>

                    </StackPanel>
                </Panel>
            </AppPage>

            <!-- Forget -->

            <AppPage ux:Name="Forget">
                <Panel Background="#fff" ux:Name="_login">

                    <StackPanel Margin="0,200,0,0">
                        <MediumS Value="If you forgot your password, we" Alignment="Center" Margin="0,40,0,0" />
                        <MediumS Value="can send you an email to reset it" Alignment="Center" Margin="0,0,0,30" />
                        <TextInput PlaceholderText="Email" Margin="50,0,50,0" />
                        <ButtonCust Background="#78FF7F" Margin="0,200,0,0">
                            <Medium Value="SEND EMAIL" Alignment="Center" TextColor="#fff" />
                        </ButtonCust>

                    </StackPanel>
                </Panel>
            </AppPage>




            <!-- Dashboard -->

            <AppPage ux:Name="Dashboard">


                <PageControl ux:Name="_dash">
                    <Panel Alignment="Bottom">
                    <Grid ColumnCount="3">
                        <GridButton Fill="#E6E6E6">
                            <Clicked>
                                <NavigateTo Target="_scrapbook" />
                            </Clicked>
                            <Text Value="Scrapbook" Alignment="Center" />
                        </GridButton>

                        <GridButton Fill="#E6E6E6">
                            <Clicked>
                                <NavigateTo Target="_upload" />
                            </Clicked>
                            <Text Value="Upload" Alignment="Center" />
                        </GridButton>

                        <GridButton Fill="#E6E6E6">
                            <Clicked>
                                <NavigateTo Target="_location" />
                            </Clicked>
                            <Text Value="Location" Alignment="Center" />
                        </GridButton>
                    </Grid>
                    </Panel>
                    <Page Background="#fc0" ux:Name="_scrapbook">

                        <StackPanel Alignment="TopCenter">
                            <MediumS Value="Life's too short to stay in one " Alignment="Center" TextWrapping="Wrap" Margin="0,30,20,0" TextColor="#000" />
                            <MediumS Value="city for too long!" Alignment="Center" TextWrapping="Wrap" Margin="0,0,20,0" TextColor="#000" />
                        </StackPanel>
                        <StackPanel Alignment="BottomCenter" Margin="10,0,0,100">
                            <MediumS Value="Tap on the camera" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <MediumS Value="to start creating your" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <MediumS Value="scrapbook" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                        </StackPanel>
                    </Page>

                    <Page Background="#0fc" ux:Name="_upload">
                        <StackPanel Alignment="Top">
                            <Medium Value="Skip" Alignment="Right" Margin="0,30,20,0" TextColor="#5AF37C" />
                        </StackPanel>
                        <StackPanel Alignment="Center" Margin="10,-400,0,0">
                            <Titles Value="Wanderlust" Alignment="Center" TextColor="#fff" Margin="0,200,0,150" />
                            <Medium Value="By tracking your location " TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <Medium Value="we know when you're in a new city" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                        </StackPanel>
                    </Page>

                    <Page Background="#0cf" ux:Name="_location">
                        <StackPanel Alignment="Top">
                            <Medium Value="Done" Alignment="Right" Margin="0,30,20,0" TextColor="#5AF37C" />
                        </StackPanel>
                        <StackPanel Alignment="Center" Margin="10,-400,0,0">
                            <Titles Value="Wanderlust" Alignment="Center" TextColor="#fff" Margin="0,200,0,150" />
                            <Medium Value="We will send you a reminder to capture " TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <Medium Value="a travel moment in every new city" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <Medium Value="you visit" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                            <Medium Value="Share your travel moments" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" Margin="0,30,0,0" />
                            <Medium Value="with friends and family" TextWrapping="Wrap" Alignment="Center" TextColor="#fff" />
                        </StackPanel>
                    </Page>

                </PageControl>
            </AppPage>


        </Panel>
    </DockPanel>
</App>
2

Hi,

Can you please try to reduce the test case to something smaller?

3

Ok,


<PageControl ux:Name="_dash">

                    <Grid ColumnCount="3" Alignment="Bottom">
                        <GridButton Fill="#E6E6E6">
                            <Clicked>
                                <NavigateTo Target="_scrapbook" />
                            </Clicked>
                            <Text Value="Scrapbook" Alignment="Center" />
                        </GridButton>

                        <GridButton Fill="#E6E6E6">
                            <Clicked>
                                <NavigateTo Target="_upload" />
                            </Clicked>
                            <Text Value="Upload" Alignment="Center" />
                        </GridButton>

                        <GridButton Fill="#E6E6E6">
                            <Clicked>
                                <NavigateTo Target="_location" />
                            </Clicked>
                            <Text Value="Location" Alignment="Center" />
                        </GridButton>
                    </Grid>

                    <Page Background="#fff" ux:Name="_scrapbook">

                        <StackPanel Alignment="TopCenter" Margin="0,30,0,0">
                            <Circle Fill="#000" Width="100" Height="100"/>
                            <MediumS Value="Life's too short to stay in one " Alignment="Center" TextWrapping="Wrap" Margin="0,30,20,0" TextColor="#000" />
                            <MediumS Value="city for too long!" Alignment="Center" TextWrapping="Wrap" Margin="0,0,20,0" TextColor="#000" />
                        </StackPanel>
                        <StackPanel Alignment="BottomCenter" Margin="10,0,0,100">
                            <MediumS Value="Tap on the camera" TextWrapping="Wrap" Alignment="Center" TextColor="#B3B3B3" />
                            <MediumS Value="to start creating your" TextWrapping="Wrap" Alignment="Center" TextColor="#B3B3B3" />
                            <MediumS Value="scrapbook" TextWrapping="Wrap" Alignment="Center" TextColor="#B3B3B3" />
                        </StackPanel>
                    </Page>

                    <Page Background="#000" ux:Name="_upload">
                        <StackPanel Alignment="TopCenter" Margin="0,30,0,0">
                            <MediumS Value="Initialising " Alignment="Center" TextWrapping="Wrap" Margin="0,30,20,0" TextColor="#fff" />
                            <MediumS Value="Camera Api..!" Alignment="Center" TextWrapping="Wrap" Margin="0,0,20,0" TextColor="#fff" />
                        </StackPanel>
                    </Page>

                    <Page ux:Name="_location">
                        <StackPanel Alignment="TopCenter">
                            <MediumS Value="Loading Google Maps... " Alignment="Center" TextWrapping="Wrap" Margin="0,30,20,0" TextColor="#000" />
                            <WebView Url="https://www.google.com/maps?q=liverpool"/>
                        </StackPanel>
                    </Page>

                </PageControl>
4

The repro case doesn’t build as-is but I suspect the problem is that you have the Grid with the navigation buttons inside the PageControl.

Any child of the PageControl becomes part of your navigation, not just the Page ones. And since that Grid doesn’t have any Entering- and Exiting-animations it just stays on screen all the time.

What you should do is to instead place the navigation controls outside the PageControl, in a panel which holds them both. :slight_smile:

E.g.

<DockPanel>
    <PageControl>
        ...
    </PageControl>
    <Grid Dock="Bottom">
        navigation contol buttons here
     </Grid>
</DockPanel>
5

when I use your solution the pageControl overlays the Grid

<DockPanel>
    <PageControl>
        ...
    </PageControl>
    <Grid Dock="Bottom">
        navigation contol buttons here
     </Grid>
</DockPanel>

I added a margin to it so that the grid can be visible but when I click on the navigation this is what I get

"Fuse.Controls.Page already has a parent (Fuse.Controls.Panel)

6

When I do that with your example (the 2nd one you posted) the PageControl does not overlay the Grid. You can easily verify that (if you use the sublime plugin) by moving the caret into the PageControl tag and then see (in preview) which area gets a pulsating rectangle around it. :slight_smile:

However, if there are more things inside the same DockPanel, other than the PageControl and the Grid, then you need to set explicit Dock properties for those as well. It works in the example above because there’s only 2 of them and since the Grid is docked to Bottom the PageControl automatically fills the remaining space.

Also, now that the NavigateTo actions are outside of the PageControl you’ll have to set the context property on them to get the correct navigation. E.g. <NavigateTo NavigationContext="_dash" Target="_scrapbook" /> etc…

The error you mention (Fuse.Controls.Page already has a parent (Fuse.Controls.Panel)) implies that you’re trying to NavigateTo a page that’s outside of the Navigator you’re trying to use. From looking at your first (the long) example I assume this could be because you have multiple navigators that get mixed up. If you just set the NavigationContext as described above that might solve itself. :slight_smile: