Hi I have just started using xamarin to try and develop a cross platform application but I have hit a problem very early on with my winphone project.
I have a tabbedpage which contains 2 navigationpages. Both these navigationpages have identical content the only thing that differs is the Title of each. The problem comes when swiping between the tabbed pages. When first loaded it renders correctly but once I have gone around the tabbed once I seem to lose a Title and the other 1 jumps to the top of the page which I don't want. The location tabbedpage renders fine.
MainPage.xaml
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:iLarm;assembly=iLarm"
x:Class="iLarm.MainPage">
<NavigationPage Title="Alarm">
<x:Arguments>
<local:AlarmListPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Location" >
<x:Arguments>
<local:LocationListPage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
AlarmListPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="iLarm.AlarmListPage"
Title="iLarm">
</ContentPage>
locationListPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="iLarm.LocationListPage"
Title="iLarm">
</ContentPage>
According to your codes, I wrote a demo. But the title of ContentPage didn't show at all.
From your screenshot I suppose you want to add title to top of the TabbedPage. According to this requirement you just need to set Title of TabbedPage likes below.
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:iLarm;assembly=iLarm"
x:Class="iLarm.MainPage"
Title="iLarm">
<NavigationPage Title="Alarm">
<x:Arguments>
<local:AlarmListPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Location">
<x:Arguments>
<local:LocationListPage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
Related
I have successfully created my app and am finally ready to start testing before continuing with designs, however, while testing I find that after using my toolbar buttons twice it just disappears for no reason.
Here is the Xaml code for the item:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:ODDJOBS.Views"
x:Class="ODDJOBS.Views.TabbedAppPage">
<TabbedPage.ToolbarItems>
<ToolbarItem Text="ODDJOBS" Priority="1"></ToolbarItem>
<ToolbarItem Text="+" Priority="2" Command="{Binding NavigateToAddPageCommand}">
</ToolbarItem>
</TabbedPage.ToolbarItems>
<!--Pages can be added as references or inline-->
<pages:NextPage Title="Jobs"/>
<pages:ServiceView Title="Services"/>
</TabbedPage>
I have a master detail page with a burger icon at the top that shows the drawer menu. But the master detail itself is only one page, id like it to be 2 pages ( like in the tabbed page, where u can swipe between the two).
I have tried the following:
<MasterDetailPage.Detail>
<TabbedPage>
<TabbedPage.Children>
<ContentPage Title="Page 1" Icon="ja.png" />
<ContentPage Title="Page 2" Icon="ja.png" />
<ContentPage Title="Page 3" Icon="ja.png" />
</TabbedPage.Children>
</TabbedPage>
</MasterDetailPage.Detail>
This does display mulitple pages inside the master detail, but it also removes the burger and the whole navigation bar also.
Is there a way to enable a tabbed page inside a master detail and still have the navigation bar with the burger icon?
Thank you!
I only works when you have another page that is a tabbed page and render it here:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Q2go.View.MasterDetailPage1"
xmlns:pages="clr-namespace:Q2go.View">
<MasterDetailPage.Master>
<pages:MasterDetailPage1Master x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:TabbedPage1/>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Try wrapping your TabbedPage in a NavigationPage as such:
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<TabbedPage>
<TabbedPage.Children>
<ContentPage Title="Page 1" Icon="ja.png" />
<ContentPage Title="Page 2" Icon="ja.png" />
<ContentPage Title="Page 3" Icon="ja.png" />
</TabbedPage.Children>
</TabbedPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
My xamarin forms application is based on the tabbed structure. What I want to achieve is as follows: I want to show a button at the bottom of all tabbed pages, it should be the same button. When I navigate to other tab, the same button should appear with same logic behind it. How can I achieve this?
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:views="clr-namespace:DriverApp.Views"
xmlns:vm="clr-namespace:DriverApp.ViewModels"
x:Class="DriverApp.Views.PlanningDetailPage">
<TabbedPage.Children>
<NavigationPage Title="Activity">
<x:Arguments>
<views:ActivityPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Vehicle">
<x:Arguments>
<views:VehiclePage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Driver">
<x:Arguments>
<views:DriverPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Checklist">
<x:Arguments>
<views:CheckListPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Attachment">
<x:Arguments>
<views:AttachmentPage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Damage">
<x:Arguments>
<views:DamagePage />
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
I'm extending the prism sample here to also include icons, and some additional navigation. My goal is to add something like the code below (where the icon information is) and am unsure how to add that to either my view, or the view model correctly.
<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:WebOfTrust.Views"
x:Class="WebOfTrust.Views.Client.WebOfTrustMainPage"
Title="{Binding Title}">
<TabbedPage.Children>
<!-- HOW DO I SET AN ICON FOR THESE? Either in the View or Model? -->
<NavigationPage Title="Contacts" >
<x:Arguments>
<local:Client.MyPeople.MyPeopleList/>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Places" Icon="Image7DoesntWork.png">
<x:Arguments>
<local:Client.MyPlaces.MyPlacesList/>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Docs" Icon="Image7DoesntWork.png">
<x:Arguments>
<local:Client.MyWallet.WalletCards/>
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>
What normally works
I normally have a navigation page in the view where I specify the icon below.
<NavigationPage Title="Trust Anchor List">
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_feed.png"/>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<local:Client.TrustAnchorList />
</x:Arguments>
</NavigationPage>
Question
What is the right way to set an icon in either the view or the model when using Prism?
just add the icon attribute in the children of the tabbed page.
It works fine for me
<local:ContactUs Icon="Icons/History_Tab.png" Title="{Translate:TranslateExtension Text=NewMessage}" />
my icons are under a folder in the resources but you can put them anywhere.
I have a problem making a tabbed layout on my master detail page. I have tried to do it like this:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MasterDetailTest.View"
x:Class="MasterDetailTest.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:Home />
</x:Arguments>
</NavigationPage>
<TabbedPage>
<TabbedPage.Children>
<ContentPage Title="Home" Icon="home.png"/>
<ContentPage Title="Home" Icon="home.png"/>
<ContentPage Title="Home" Icon="home.png"/>
</TabbedPage.Children>
</TabbedPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
But for some reason it's not working adding tabbed page just on xaml, should i've to try this at the cs?
you can't put TabbedPage inside NavigationPage. The right order is:
- TabbedPage > NavigationPage > page.
In Fact, you shouldn't mix it. Use MasterDetailPage > NavigationPage
OR TabbedPage > NavigationPage BUT NOT MasterDetailPage > TabbedPage.
this would works for you:
MasterDetail:
https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/master-detail-page/
TabbedPage:
https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/tabbed-page/