Iam using a tab navigation and withing a page and want to open a new one.
In my app.xaml.cs I create the Navigation page:
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new RootPage());
}
In the RootPage I fill the Navigation:
public RootPage()
{
NavigationPage.SetHasNavigationBar(this, false);
Children.Add(new TestPage1
{
Title = "TestPage1"
});
Children.Add(new TestPage2
{
Title = "TestPage2"
});
Children.Add(new TestPage3
{
Title = "TestPage3"
});
}
This type of navigation works pretty well already and looks nice. Now I want to open a new page within the TestPage3: TestPage3.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DemoApplication.TestPage3">
<Button x:Name="openSetup" Clicked="ItemClicked" Text="open Settings"/>
</ContentPage>
TestPage3.xaml.cs:
namespace DemoApplication
{
public partial class TestPage3 : ContentPage
{
public TestPage3()
{
InitializeComponent();
}
void ItemClicked(object sender, EventArgs e)
{
Navigation.PushAsync(new TestPage4());
}
}
}
This also works but doesnt look nice.
The new Content loads below the original tab navigation and after it's loaded the tab navigation disappears - so the content of Page4 is kind of jumping around :)
In other apps like soundcloud they do the same but it looks way more smooth.
Is there any way to like shift the tab-navigation between the back-navigation more smooth?
Thanks for your help :)
if you want to navigate within a tab, each tab should have it's own NavigationPage. The TabbedPage itself should not be within a NavigationPage.
MainPage = new RootPage();
and
Children.Add(new NavigationPage(new TestPage3
{
Title = "TestPage3"
}));
As Jason said: If you want to navigate within a tab while maintaining the tabs, then each tab should have it's own NavigationPage. The TabbedPage itself should not be within a NavigationPage.
This is how it's done in XAML:
App.xaml.cs
public App()
{
InitializeComponent();
MainPage = new RootPage();
}
RootPage.xaml
<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns:Pages="clr-namespace:AppName"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AppName.Rootpage">
<NavigationPage Title="TestPage1">
<x:Arguments>
<Pages:TestPage1/>
</x:Arguments>
</NavigationPage>
</TabbedPage>
TestPage1.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage NavigationPage.HasNavigationBar="false"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AppName.TestPage1">
<Button Clicked="ButtonClicked"/>
</ContentPage>
TestPage1.xaml.cs
public TestPage1()
{
InitializeComponent();
}
void ButtonClicked(object sender, EventArgs e)
{
Navigation.PushAsync(new TestPage2());
}
Note that with this setup you'll have to apply NavigationPage.HasNavigationBar="false"
to all the pages you don't want the navigation bar shown, like I do in TestPage1.xaml . Applying it to your <TabbedPage>
, in this case RootPage.xaml , won't work.
public partial class Home : TabbedPage
{
public Home()
{
var alphaPage = new NavigationPage(new ExistingAlphaPage());
alphaPage .Title = "Alpha";
var betaPage = new NavigationPage(new ExistingBetaPage());
betaPage.Title = "Beta";
var gamaPage = new NavigationPage(new ExistingGamaPage());
gamaPage .Title = "Gama";
Children.Add(alphaPage);
Children.Add(betaPage);
Children.Add(gamaPage);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.