issue

chiztorismo · January 26, 2016, 2:20am

Pleas how can add more than one type of navigationt to my app. e.g

MainView.ux …

‘’’

   <!-- button for facebook -->
       <Button ux:Class="FacebookButton" IgnoreStyle="true" Name="self_facebook" Margin="20,0,20,10" Padding="10,15,10,15">
           <Fuse.BasicTheme.ButtonText ux:Name="buttonText" TextColor="#fff" Value="{Property self_facebook.Text}" TextAlignment="Center" />
           <!-- <SolidColor Color="#1C3054"/> -->
           <Rectangle Layer="Background" CornerRadius="6">
               <SolidColor Color="#3b5998" />
           </Rectangle>
       </Button>

       <!-- button for email -->
       <Button ux:Class="EmailButton" IgnoreStyle="true" Name="self_email" Margin="20,0,20,0" Padding="10,15,10,15">
           <Fuse.BasicTheme.ButtonText ux:Name="buttonText" TextColor="#646666" Value="{Property self_email.Text}" TextAlignment="Center" />
           <!-- <SolidColor Color="#1C3054"/> -->
           <Rectangle Layer="Background" CornerRadius="6">
               <SolidColor Color="#FFF" />
           </Rectangle>
       </Button>
       <!-- end of email button -->

       <!-- button for continue -->
       <Button ux:Class="ContinueButton" IgnoreStyle="true" Name="self_continue" Margin="20,0,20,0" Padding="10,15,10,15">
           <Fuse.BasicTheme.ButtonText ux:Name="buttonText" TextColor="#FFF" Value="{Property self_continue.Text}" TextAlignment="Center" />
           <!-- <SolidColor Color="#1C3054"/> -->
           <Rectangle Layer="Background" CornerRadius="6">
               <SolidColor Color="#6ECF7B" />
           </Rectangle>
       </Button>
       <!-- end of email continue -->






<Panel>
   <HierarchicalNavigation ux:Name="menu" ReuseExistingNode="false" Active="loginScreen" />
   <Style>
       <Page>
           <EnteringAnimation>
               <Move X="1" RelativeTo="ParentSize" />
           </EnteringAnimation>
           <ExitingAnimation>
               <Move X="-1" RelativeTo="ParentSize" />
           </ExitingAnimation>
       </Page>
   </Style>



   <!-- Log in page of the all login buttons -->
   <Page ux:Name="loginScreen">


       <Style>
           <Image StretchMode="UniformToFill" />
           <Text TextColor="#FFF" />
           <!-- <Button Alignment="Center" Padding="120,10,120,10" /> -->
       </Style>
       <StackPanel Alignment="Bottom">
           <StackPanel Margin="0,0,0,300">
               <Text Value="Wanderlust" FontSize="40" Alignment="Center" TextColor="#FFF" />
           </StackPanel>
           <Text Value="We will not post to your Facebook" FontSize="15" Alignment="Center" Margin="0,0,0,20" />

           <FacebookButton>
               <DockPanel>
                   <fa_facebook_f FontSize="20" Padding="20,0,0,0" />
                   <Text Value="Sign in with Facebook" Alignment="Center" />
               </DockPanel>
           </FacebookButton>
           <EmailButton>
               <DockPanel>
                   <fa_envelope FontSize="20" Padding="20,0,0,0" TextColor="#646666" />
                   <Text Value="Sign up using email" TextColor="#646666" Alignment="Center" />
                   <Clicked>
                       <NavigateTo Target="emailSignUp" />
                   </Clicked>
               </DockPanel>
           </EmailButton>

           <WrapPanel Alignment="Center" Margin="0,10,0,30">
               <Text Value="Already have an account? " FontSize="15" Alignment="Center" />
               <Text Value="Log In" FontSize="19">
                   <Clicked>
                       <NavigateTo Target="emailLogin" />
                   </Clicked>
               </Text>
           </WrapPanel>
       </StackPanel>
           <Image File="Assets/background_login.jpg" />
   </Page>
   <!-- End of page for all login buttons -->

   <!-- page for email registration form -->
   <!-- page for email registration form -->

   <Page ux:Name="emailSignUp">
       <ScrollView>
           <StackPanel>


               <Grid RowCount="1" ColumnCount="3" Margin="0,30,0,10">
                   <fa_envelope FontSize="20" Row="0" Column="0" Alignment="Center" TextAlignment="Center" Opacity="0.45" />
                   <Text Value="Email sign up" FontSize="20" Row="0" Column="1" Alignment="Center" />
                   <fa_close FontSize="30" Alignment="Right" Row="0" Column="2" Margin="0,0,20,0" Opacity="0.44">
                       <Clicked>
                           <NavigateTo Target="loginScreen" />
                       </Clicked>
                   </fa_close>
               </Grid>
               <StackPanel Margin="30,10,30,0">
                   <TextInput PlaceholderColor="#000" PlaceholderText="First name" Opacity="0.54" />
                   <TextInput PlaceholderColor="#000" PlaceholderText="Last name" Opacity="0.54" />
                   <TextInput PlaceholderColor="#000" PlaceholderText="Username" Opacity="0.54" />
                   <TextInput PlaceholderColor="#000" PlaceholderText="Email address" Opacity="0.54" />
                   <TextInput PlaceholderColor="#000" PlaceholderText="Password" IsPassword="true" Opacity="0.54" />
                   <TextInput PlaceholderColor="#000" PlaceholderText="Confirm password" IsPassword="true" Opacity="0.54" />

                   <!-- <Text Value="Gender" FontSize="20" Opacity="0.54" /> -->
                   <Grid RowCount="1" ColumnCount="2" Margin="0,0,0,10">
                       <Text Value="Male:" Opacity="0.54" Row="0" Column="0" />
                       <Switch Value="{male}" Column="1" Clicked="{male_control}" />
                   </Grid>
                   <Grid RowCount="1" ColumnCount="2" Margin="0,0,0,40">
                       <Text Value="Female:" Opacity="0.54" Row="0" Column="0" />
                       <Switch Value="{female}" Row="0" Column="1" Clicked="{female_control}" />
                   </Grid>

                   <ContinueButton Text="CONTINUE" />

               </StackPanel>


           </StackPanel>
       </ScrollView>
   </Page>
   <!-- end of page for email registration form -->


   <!-- end of page for email registration form -->



   <!-- page for email login form -->
   <Page ux:Name="emailLogin">
       <Style>
           <Image StretchMode="UniformToFill" />
           <TextInput TextColor="#FFF" />
       </Style>
       <ScrollView>
           <StackPanel>
           <Grid >
                   <fa_arrow_left TextColor="#FFF" FontSize="30" Alignment="Left" Row="0" Column="0" Margin="10,10,0,0" Opacity="0.70" />
                   <fa_close TextColor="#FFF" FontSize="30" Alignment="Right" Row="0" Column="1" Margin="10,10,10,0" Opacity="0.70">
                       <Clicked>
                           <NavigateTo Target="loginScreen" />
                       </Clicked>
                   </fa_close>
           </Grid>
               <StackPanel Margin="30,200,30,0">
                   <TextInput PlaceholderColor="#FFF" PlaceholderText="Username" />
                   <TextInput PlaceholderColor="#FFF" PlaceholderText="Password" IsPassword="true" />

                   <WrapPanel Margin="30,50,30,0">
                       <Text Value="Forgot your password? " TextColor="#FFF" />
                       <Text Value="Reset" TextColor="#FFF">
                           <Clicked>
                               <NavigateTo Target="forgetPassword" />
                           </Clicked>
                       </Text>
                   </WrapPanel>
                   <ContinueButton Text="LOG IN" Margin="30,100,30,0">
                       <Clicked>
                           <NavigateTo Target="ScrapBook" />
                       </Clicked>
                   </ContinueButton>

               </StackPanel>


           </StackPanel>
       </ScrollView>
       <Image File="Assets/background_login_2.jpg">
           <Blur />
       </Image>
   </Page>
   <!-- end of page for email login form -->


   <!-- page for forget password form -->
   <Page ux:Name="forgetPassword">
       <Style>
           <Image StretchMode="UniformToFill" />
           <TextInput TextColor="#FFF" />
           <Text TextWrapping="Wrap" />
       </Style>
       <ScrollView>
           <StackPanel>


               <fa_close TextColor="#FFF" FontSize="30" Alignment="Right" Row="0" Column="2" Margin="0,20,20,0" Opacity="0.70">
                   <Clicked>
                       <NavigateTo Target="loginScreen" />
                   </Clicked>
               </fa_close>

               <StackPanel Margin="30,200,30,0">

                   <Text Value="If you forgot your password, we can send you an email to reset it. " TextColor="#FFF" />
                   <TextInput PlaceholderColor="#FFF" PlaceholderText="Email" Margin="0,50,0,0" />


                   <ContinueButton Text="SEND EMAIL" Margin="60,100,30,0" />

               </StackPanel>


           </StackPanel>
       </ScrollView>
       <Image File="Assets/background_login_2.jpg" Opacity="1">
           <Blur />
       </Image>
   </Page>
   <!-- end of page for forget password  form -->
</Panel>

   <ScrapBooks ux:Name="ScrapBook"/>


</DockPanel>

‘’’

I want to also add a PageControl to this but it doesnt work

ScrapBooks.ux

‘’’

    <Page ux:Name="Camera">
        <Text Value="B" />
    </Page>

    <Page ux:Name="Location">
        <Text Value="C" />
    </Page>

‘’’

But its not working… Please your help and explanation would be helpful.

skezo · January 26, 2016, 11:09am

Forgive me if this is not helpful but are you looking to do the following? https://www.fusetools.com/community/forums/general/app_with_multiple_ux_files

Vegard_Strand_Lende · January 26, 2016, 11:31am

Hi!

What kind of navigation are you trying to describe? If you explain your usecase I can show you how to make it in UX Sometimes when building nested and complex navigation in UX you have to be keep an eye out for where you SwipeNavigates and NavigateTo end up since conflicts in handeling input may happen if two SwipeNavigates receive input events at the same time

chiztorismo · January 26, 2016, 11:36am

Ok so I want to have a first set of page that has slides and then it takes the user to the login screen and then when the user logs in it should take the user to a dashboard that has 3 pages that are also swipe able.

Vegard_Strand_Lende · January 26, 2016, 11:46am

Have a look at this example:

<App Theme="Basic" Background="#ddd">
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <DockPanel>

            <Panel Dock="Fill">

                <LinearNavigation Duration="0.5" Easing="CubicInOut" ux:Name="_appNav" />

                <Page ux:Class="AppPage" ClipToBounds="true">
                    <EnteringAnimation>
                        <Move X="-1.5" RelativeTo="Size" />
                        <Scale Factor="0.5" />
                    </EnteringAnimation>
                    <ExitingAnimation>
                        <Move X="1.5" RelativeTo="Size" />
                        <Scale Factor="0.5" />
                    </ExitingAnimation>
                </Page>

                <AppPage ux:Name="_loginPage">
                    <HierarchicalNavigation Duration="0.5" Easing="QuinticInOut" />

                    <Page ux:Class="MainPage">
                        <EnteringAnimation>
                            <Move X="1" RelativeTo="Size" />
                        </EnteringAnimation>
                        <ExitingAnimation>
                            <Move X="-1" RelativeTo="Size" />
                        </ExitingAnimation>
                    </Page>

                    <MainPage ux:Class="FacebookLogin" Background="#00bbee">
                        <BackButton Alignment="TopLeft" Text="Back" />
                    </MainPage>
                    <MainPage ux:Class="EmailLogin" Background="#eebb00">
                        <BackButton Alignment="TopLeft" Text="Back" />
                    </MainPage>

                    <MainPage Background="#00eebb">
                        <StackPanel Alignment="Bottom" Margin="50">
                            <Button Text="Facebook login">
                                <Clicked>
                                    <NavigateTo Target="_fbLogin" />
                                </Clicked>
                            </Button>
                            <Button Text="Email login">
                                <Clicked>
                                    <NavigateTo Target="_eLogin" />
                                </Clicked>
                            </Button>
                        </StackPanel>
                    </MainPage>

                    <FacebookLogin ux:Name="_fbLogin" ux:AutoBind="false">
                        <StackPanel Alignment="Center">
                            <Text Value="FacebookLogin" />
                            <Button Text="Login">
                                <Clicked>
                                    <NavigateTo Target="_app" NavigationContext="_appNav" />
                                </Clicked>
                            </Button>
                        </StackPanel>
                    </FacebookLogin>
                    <EmailLogin ux:Name="_eLogin" ux:AutoBind="false">
                        <StackPanel Alignment="Center">
                            <Text Value="EmailLogin" />
                            <Button Text="Login">
                                <Clicked>
                                    <NavigateTo Target="_app" NavigationContext="_appNav" />
                                </Clicked>
                            </Button>
                        </StackPanel>
                    </EmailLogin>
                </AppPage>

                <AppPage ux:Name="_app" Background="#fc0">
                    <PageControl>
                        <Page Background="#fc0">
                            <Text Alignment="Center" Value="Page1" />
                        </Page>
                        <Page Background="#0fc">
                            <Text Alignment="Center" Value="Page2" />
                        </Page>
                        <Page Background="#0cf">
                            <Text Alignment="Center" Value="Page3" />
                        </Page>
                    </PageControl>
                </AppPage>
            </Panel>
        </DockPanel>
        <BottomBarBackground Dock="Bottom" />
    </DockPanel>
</App>

chiztorismo · January 26, 2016, 11:51am

Thanks wow… It works. Awesome. So what’s the idea behind this structure so that I can explain to the people around me who are also learning this framework

Vegard_Strand_Lende · January 26, 2016, 12:56pm

With navigation in fuse try to think how you can split things up into smaller “cells” of navigation and then nest it all together. Doing that this will become really simple to do. So the above code is really just:

<Panel>
    <LinearNavigation />

    <LoginPage>
        <HierarchicalNavigation />
        <MainPage />
        <FaceBookLogin />
        <EmailLogin />
    </LoginPage>

    <PageControl>
        <Page />
        <Page />
        <Page />
    </PageControl>

</Panel>

Notice the scoping/where stuff is put

Topic		Replies	Views
Bind page from PageController How-to Discussions	6	700	March 21, 2016
Two stacks of pages How-to Discussions	7	712	January 8, 2016
Navigator in side another Navigator, Page Control Problem Bug Reports	6	545	January 5, 2016
How to have multiple pages with set accessibility How-to Discussions	4	962	January 6, 2016
Nested Gesture Navigation Pages and Scrollviews How-to Discussions	5	735	May 16, 2016

issue

Related topics