I am showing bottom tabs in Xamarin forms using TabbedPage. For that I have added the child pages (Page1,Page2,Page3) programatically to the TabbedPage. First I have login screen, onclick of Login button it will redirect to tabbed page and will show all the three tabs at the bottom.
There are other pages(Page4,Page5) that we are not showing as child pages in tabbed page. But as per the requirement when user opens page4 or page5 the bottom tab bar should show.
Overall what I mean is the bottom tab bar should show to all the screens in the application even though some of the screens are not the children of the TabbedPage.
Could anyone please tell me how to achieve this task. Thanks in advance.
You can wrap TabbedPage's children within NavigationPages, so that when you navigate to another page from one of those tabs they will still appear:
<?xml version="1.0" encoding="UTF-8" ?>
<TabbedPage
x:Class="SampleTabbedPage.Views.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:SampleTabbedPage.Views;assembly=SampleTabbedPage"
NavigationPage.HasNavigationBar="False">
<!-- Page 1 -->
<NavigationPage IconImageSource="ic_home">
<x:Arguments>
<views:HomePage />
</x:Arguments>
</NavigationPage>
<!-- Page 2 -->
<NavigationPage IconImageSource="ic_profile">
<x:Arguments>
<views:ProfilePage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
In code behind:
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new NavigationPage(new Page1()));
tabbedPage.Children.Add(new NavigationPage(new Page2()));
tabbedPage.Children.Add(new NavigationPage(new Page3()));
Then you can just call from one of the child pages:
await Navigation.PushAsync(new YourNewPage());
Related
I have an image of the name logout.png that I try to display in a Tabbedpage. But it shows me a big grey circle. And when I put it on another page, it appears without problem
<NavigationPage Title="{Static properties:Resources.LabelLogout}" Icon="logout.png">
<x:Arguments>
<views:LogoutPage/>
</x:Arguments>
</NavigationPage>
You should use IconImageSource="logout.png" to set Icon for Tabbar , not Icon="logout.png" . Have a look at follow sample code :
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
x:Class="TabbedPageWithNavigationPage.MainPage">
<local:TodayPage />
<NavigationPage Title="Schedule" IconImageSource="schedule.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
Here is an official sample project for reference .
i want to bind viewmodel to nested tab views in xamarin prism framework
i created 4 main pages(A,B,C,D) as main tabs and inside first tab(A) i created two more tabs(A1,A2).but data for nested tabs are not binding.even viewmodel for that views(A1,A2) are not hitting
MenuPage.xml
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Views.MenuPage"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:views="clr-namespace:MyApp.Views"
BarBackgroundColor="White"
android:TabbedPage.ToolbarPlacement="Bottom"
NavigationPage.HasNavigationBar="True">
<TabbedPage.Children>
<views:A Title="A" Icon="abc.png" />
<views:B Title="B" Icon="abc.png" />
<views:C Title="C" Icon="abc.png" />
<views:D Title="D" Icon="abc.png"/>
</TabbedPage.Children>
</TabbedPage>
and my page A is like
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:MyApp.Views"
x:Class="MyApp.Views.A">
<!--Pages can be added as references or inline-->
<TabbedPage.Children>
<views:A1 Title="A1" />
<views:A2 Title="A2" />
</TabbedPage.Children>
</TabbedPage>
and i have separate viewmodel for A1 and A2.
so if i directly bind A1 to main navigation page it will work properly and render data.but if i do like above viewmodel for A1 is not hitting the constructor and nothing is displaying apart from static data.i am new to tabbed page navigation.any help is appreciated.this the view i am trying t achieve
I find we should add AutowireViewModel in the page's XAML to load the view model we want:
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
Generally, we use containerRegistry.RegisterForNavigation<>(); to bind the custom view model to a certain view. But you placed a sub tabbed page in the root tabbed page. This caused the nested view losing the mapping to the corresponding view model. After adding the AutowireViewModel, this issue fixed. We could still use RegisterForNavigation to bind your custom view model to your special view instead of the automatic naming conversation.
Here is my sample for a simple nested tabbed page: https://github.com/landl0526/PrismTabDemo. Refer to it for more detailed code.
Moreover, this only works on the Android platform as iOS only has the bottom aligned tabbar.
I'm making an app in Xamarin Forms and when I deploy it to Android, I get a weird problem. It appears that I have two toolbar items when I only declared one in XAML. Also, I believe this is proper behaviour, but I was wondering if it's possible to not display the navbar title on a lower line and rather display it upper center. Thanks!
Screenshot
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Biziboards.Views.MerchantListPage"
Title="Merchants">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Home"
x:Name="btnHome"
Clicked="btnHome_Clicked"
Order="Primary"/>
</ContentPage.ToolbarItems>
In your pages Xaml.cs file:
NavigationPage.SetHasNavigationBar(this, false);
In my xamarin app,I want to add a search bar on top of the page in my tabbed page.
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Sample.Mobile.Test">
<StackLayout>
<SearchBar></SearchBar>
</StackLayout>
<TabbedPage.Children>
<ContentPage x:Name="tab1" Title="Home">
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
You can use follow this link for the Search bar Implementation
https://developer.xamarin.com/api/type/Xamarin.Forms.SearchBar/
I want to setup a tabbed page with three content pages they are page1, page2 and page3 all of them are content pages. When the program starts I want to show page1 content page with page1 tab selected. They do not follow item template model since they are all different content pages compared to the example showing in the Tabbed Page example # xamarian.
<TabbedPage.Children>
<ContentPage Title="Page 1" />
<ContentPage Title="Page 2" />
<ContentPage Title="Page 3" />
</TabbedPage.Children>
What property I should set here so that I can point to the content of the associated content page or do I follow tab selecte event and manually call the appropriate content page? I would like to try to do it with XAML as much as possible.
Thanks
Found the answer here just in case looking for the same question. In my case, I was able to do it in the code behind, but you can do the same in XAML as the post says. One additional thing is, when you add a content page to a tab item and if you want to add title and Icon to it, then you can reference the index of the child and you can set them manually as .Tile and .Icon.
this.Children.Add( new Page1 ());
this.Children[0].Title = "Page 1";
this.Children[1].Icon = "page1.png"