Using Tabs in a ContentPage Xamarin cross platform app - c#

I have a xamarin cross platform application and my views are in the PCL project and from home page of my application i am using this code to navigate to a new page
var target = new SelectPage();
Navigation.PushAsync(target);
And the xaml of the navigated page is like this
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="SelectPage"
NavigationPage.HasBackButton="False">
<Grid>
want to show 3 tabs here
</Grid>
</ContentPage>
Whats the possibility of showing three listbox items in this page as tabs

Related

Button above the BottomNavigationBar

I created a TabbedPage which opens the various pages that I created within my project.
<myapp:MainPage Title="Page1" IconImageSource="IC001.png" BackgroundColor="Gainsboro"></myapp:MainPage>
<myapp:DiaryPage Title="Page2" IconImageSource="IC002.png" BackgroundColor="Gainsboro"></myapp:MainPage>
Through this namespace on Android I can see the NavigationBar at the bottom of the screen.
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" android:TabbedPage.ToolbarPlacement="Bottom"
I would like to be able to place a Custom Button above the NavigationBar, a button that is within my Page Layout and that covers a portion of the NavigationBar. it's possible?
Example of my page:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
x:Class="MotiVApp.DiaryPage">
<Grid>
<Button/>
</Grid>

Why Toolbar not showing on iOS display using Xamarin

I want to display very simple Toolbar using xamarin on iOS, but I can't see the toolbar on display.
I use this code:
<?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="Test.MainPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Example Item"
IconImageSource="https://img.icons8.com/cute-clipart/64/000000/menu.png"
Order="Primary"
Priority="0" />
</ContentPage.ToolbarItems>
</ContentPage>
There are no errors in the code and the display is empty..
What needs to change to see the toolbar ?
Are you putting your page in NavigationPage? By default ContentPage does not have Navigation bar (Toolbar), you must put your page in NavigationPage, after that Navigation bar will show up with its functionality.
have a look at here : Xamarin.Forms Navigation
So I assume you should do something like this
public App ()
{
MainPage = new NavigationPage (new MainPage());
}

Can you put a NavigationPage inside a ContentPage?

I'm trying to create a music player in Xamarin Forms. Now at the bottom of my page there always is a bar with the music player controls. Instead of always adding the tag and creating a new PlayerBar in each view, I thought it would be useful to create a RootPage with the PlayerBar created once inside and above it a NavigationPage that spans the rest of the view.
In XAML it would look a bit like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:PodBase.Views"
xmlns:controls="clr-namespace:PodBase.Controls"
x:Class="PodBase.Views.RootPage">
<ContentPage.Content>
<Grid>
<NavigationPage>
<x:Arguments>
<views:MainPage/>
</x:Arguments>
</NavigationPage>
<controls:PlayerControl/>
</Grid>
</ContentPage.Content>
</ContentPage>
However when I try it out I get an error saying NavigationPage cannot be added to IGridList. Are there any other options I can use to work this out?
This is not possible. A Page can only be at the root. Inside you can have one VisualElement and within that VisualElement you can nest as many things as you like.
To achieve this kind of behavior, either inherit from the NavigationPage and add the player control at the bottom. Or, you will have to mimic your own navigation page behavior.

Getting 2 title bar in xamarin forms app

There are two title bars in my app when I navigate to another page:
The first one contains back button and the second one contains title of content page. My question is how is it possible to merge them into a single title bar. Here's my code:
Page1.cs
await Navigation.PushAsync(new NavigationPage(new Page2()));
Page2.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="TestApp1.Page2" Title="Page 2">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin Forms!" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Screenshot
For the first page in your app add a new NavigationPage and your page within it:
MainPage = new NavigationPage(new FirstPage());
For the second page, do not create a new NavigationPage, just Push a new page onto the existing NavigationPage:
await Navigation.PushAsync(new SecondPage());

Hide navigation bar but keep back button

I'm using xamarin forms to build android app, and I use navigation page to navigate between pages. I'd like to hide the bar but keep the back button, because I have some else controls to put in the top area. I used HasNavigationBar and HasBackButton for this, but it looks the back button cannot be restored if the bar is hidden. Is there anyway to show the back button?
XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CH.AdDetailPage"
NavigationPage.HasNavigationBar="True"
NavigationPage.HasBackButton="True"
NavigationPage.BackButtonTitle="Back" Title="AdDetail">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Ad Detail Pages!" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
When HasNavigationBar=True, and HasBackButton=True:
When HasNavigationBar=True, and HasBackButton=False:
Both above works.
But when HasNavigationBar=False, and HasBackButton=True: it does not work.
Back button is a part of navigation bar. You can not show it without showing the navbar.
your only way is to create your back button and assign command with NavigationService.GoBack ...

Categories

Resources