i want to navigate from a page to an other page - xamarin

i want to navigate from a page(not main page) which is in a tabbed page to a page when clicking on a button. i tried this :
MainPage = new NavigationPage(new listofinterest());
MainPage = new TabbedPageMain()
{
BarBackgroundColor = Color.FromHex("#F8F8F8"),
};
////////
public partial class listofinterest : ContentPage
{
private async void Add(object sender, EventArgs e)
{
await Navigation.PushAsync(new NavigationPage(new MainPage()));
}
}
it didn't work i get this error
"PushAsync is not supported globally on Android, please use a NavigationPage.'"
i need help please.

The problem is your overriding the MainPage with the TabbedPageMain. Only set it once.
First set the MainPage in App.xaml.cs:
MainPage = new NavigationPage(new MyPage());
Then you can push other pages from MyPage like this:
await Navigation.PushAsync(new MyOtherPage());

it didn't work i get this error "PushAsync is not supported globally on Android, please use a NavigationPage.'" i need help please.
From your code and description, you want to navigate from one of Tabbedpages to other page in project. If yes, please add to a navigation stack is referred to as the root page of the application in App.xaml.cs.
public App()
{
InitializeComponent();
MainPage =new NavigationPage( new tabbedpage.TabbedPage1());
}
then Tabbedpage.xaml:
<TabbedPage
x:Class="FormsSample.tabbedpage.TabbedPage1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FormsSample.simplecontrol">
<!-- Pages can be added as references or inline -->
<TabbedPage.Children>
<local:Page1 />
<local:Page3 />
<local:Page4 />
</TabbedPage.Children>
Wanting to navigate Page1 from Tabbedpage to other page.
<ContentPage
x:Class="FormsSample.simplecontrol.Page1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="page 1">
<ContentPage.Content>
<ScrollView>
<StackLayout x:Name="Contenttest">
<Button
x:Name="btn1"
Clicked="btn1_Clicked"
Text="navigate to another page" />
</StackLayout>
</ScrollView>
</ContentPage.Content>
private void btn1_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new simplecontrol.Page5());
}
About Navigation detailed info, please refer to
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical

Related

Navigation bar not displaying page title in Xamarin Forms

I have been unable to get a simple test working to display a title in the Navigation bar of my Xamarin forms app. I am providing my code below, basically when I set the title on the content page and wrap the content page in a navigation page, the navigation bar is not displaying the corresponding title from the content page.
App.cs
public partial class App : Application
{
public App()
{
InitializeComponent();
Current.MainPage = new NavigationPage(new Presentation.Views.SettingsDeviceUnitView());
}
}
ContentPage.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SettingsDeviceUnitView : ContentPage
{
public SettingsDeviceUnitView()
{
InitializeComponent();
}
}
ContentPage.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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Controls="clr-namespace:GFIApp.Presentation.Controls"
mc:Ignorable="d"
x:Class="TestApp.Presentation.Views.SettingsDeviceUnitView"
BackgroundColor="{StaticResource Key=ColorPrimary}"
Title="TestTitle">
<ContentPage.Content>
<Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
Yet I see nothing in the navigation bar
Has anyone seen this behavior before or have any suggestions? Thank you!
Per FreakyAli's response I tested setting the navigation bar text color and I am now able to see the title. Thank you for the suggestion FreakyAli!
For reference, I added the following in my App.cs
NavigationPage nav = new NavigationPage(new Presentation.Views.SettingsDeviceUnitView());
nav.BarTextColor = Color.White;
Current.MainPage = nav;

Remove auto generate button in Humberger menu of Xamarin.Forms Shell using Shell.FlyoutHeader

I have started learning Xamarin Forms Shell. I've create my first app using Shell and add sample Home Page. In my AppShell Page I've add and Shell.FlyoutHeader contains only boxview. When I run the application and click the Humberger Menu, there is additional button or Label(I'm not sure) that I didn't include in my FlyoutHeader Page. Please help me to remove that additional button. Thanks!
Shell Code:
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamShell.Views.ListOfProductsPage"
Visual="Material"
xmlns:local="clr-namespace:XamShell.Views"
FlyoutBehavior="Flyout"
xmlns:controls="clr-namespace:XamShell.Controls"
Routing.Route="ProductList">
<Shell.FlyoutHeader>
<controls:FlyoutHeader/>
</Shell.FlyoutHeader>
<local:HomePage />
</Shell>
FlyoutHeader
<Grid BackgroundColor="White">
<BoxView
BackgroundColor="Yellow"
Opacity="0.6" />
<Label Text="Animals"
TextColor="Red"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</Grid>
enter image description here
Do you want to achieve the result like following GIF.
If so, First of all, Please refer to this screenshot.
Please If you want to remove these button, please make sure your AppShell.xaml AppShell.xaml.cs file did not include the FlyoutItem and <views:XXXPage IconImageSource="XXX.png" /><views:XXX IconImageSource="XXXX.png" /> like this link
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-items
But I suggest you to create a new project.
Create a new shell file like following code.
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SearchListDemo"
xmlns:controls="clr-namespace:SearchListDemo.Controls"
Navigating="OnNavigating"
Navigated="OnNavigated"
x:Class="SearchListDemo.MainPage">
<Shell.FlyoutHeader>
<controls:FlyoutHeader/>
</Shell.FlyoutHeader>
<local:HomePage/>
</Shell>
MainPage.xaml.cs
[DesignTimeVisible(true)]
public partial class MainPage : Shell
{
public Dictionary<string, Type> Routes { get { return routes; } }
Dictionary<string, Type> routes = new Dictionary<string, Type>();
public MainPage()
{
InitializeComponent();
RegisterRoutes();
}
void RegisterRoutes()
{
routes.Add("homwpage", typeof(HomePage));
foreach (var item in routes)
{
Routing.RegisterRoute(item.Key, item.Value);
}
}
void OnNavigating(object sender, ShellNavigatingEventArgs e)
{
}
void OnNavigated(object sender, ShellNavigatedEventArgs e)
{
}
}
regist SetFlag before Xamarin.Forms.Forms.Init(e) in the MainActivity.cs
Xamarin.Forms.Forms.SetFlags("Shell_Experimental");

How to add a photo in the navigation bar in Xamarin Forms app

How to add a photo in the navigation. On click on the photo should be navigating to edit user screen. I am using a tabbed page design, Home, Map and Settings are my tabbed pages.
You can use the ToolbarItems to add icon on the right hand side of the Navigationbar
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TabPageSample.Views.MyTabbedPage">
<TabbedPage.ToolbarItems>
<ToolbarItem Icon="profileicon.png" Clicked="OnProfilePicClicked"/>
</TabbedPage.ToolbarItems>
<ContentPage Title="HOME" />
<ContentPage Title="MAP" />
<ContentPage Title="SETTINGS" />
</TabbedPage>
In the Page's backend class you add event:
private void OnProfilePicClicked(object sender, EventArgs e)
{
//Navigate to Edit Profile page here
}
PS: Programatically:
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new Home());
tabbedPage.Children.Add(new Map());
tabbedPage.Children.Add(new Settings());
//Create Toolbar Item
var profilePicTollbarItem = new ToolbarItem()
{
Icon = "profileicon.png"
};
profilePicTollbarItem.Clicked += OnProfilePicClicked;
tabbedPage.ToolbarItems.Add(profilePicTollbarItem);
The Result will look like:

Remove navigation bar in contentpage Xamarin

I am trying to remove navbar from my pages in Xamarin Forms, but I am not able to get it working. I have tried by adding NavigationPage.SetHasNavigationBar(this, false); inside constructor of page eg.
public RegisterUser ()
{
InitializeComponent ();
NavigationPage.SetHasNavigationBar(this, false);
}
And / or by adding NavigationPage.HasNavigationBar="False" inside xaml page
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PetApp.Pages.RegisterUser"
NavigationPage.HasNavigationBar="false">
But none of those helps.
Is there some better best practice to just show clean page with scrollview or should it be possible to remove navbar totally?
It works in Mainpage but not the rest of pages that I am navigating to via
await Navigation.PushAsync(new NavigationPage(new RegisterUser()));
I found a solution, instead of using Navigation.PushAsync I used
Navigation.PushModalAsync(new NavigationPage(new RegisterPet()));
and also OnAppearing of RegisterPet page I added SetHasNavigationBar
protected override void OnAppearing()
{
InitializeSettings();
NavigationPage.SetHasNavigationBar(this, false);
base.OnAppearing();
}

Prism - Xamarin Forms: How to keep bottom tab active during navigation

I am a xamarin forms prism app, I have 3 tabs and the tab bar is active only on that specific page, If i navigate deep inside a specific tab, the bottom tab is gone. Is there a way to keep the bottom tab active through even when we navigate to other pages inside these tabs?
I tried to do something like this but i am not able to do it in prism.
Without prism it’s pretty straight forward to do as shown in above link but I’m not ablr todo with prism. Can anyone suggest how I can achieve it?
MY CODE:
App.Xaml.cs
protected override async void OnInitialized()
{
InitializeComponent();
await NavigationService.NavigateAsync("NavigationPage/MainPage");
}
MainPage.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"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:windows="clr-namespace:Xamarin.Forms.PlatformConfiguration.WindowsSpecific;assembly=Xamarin.Forms.Core"
xmlns:local="clr-namespace:MyTabs.Common.Views"
x:Class="MyTabs.Common.Views.MainPage" BackgroundColor="Olive" BarBackgroundColor="Maroon">
<TabbedPage.Children>
<local:PageOne Title="PageOne"
Icon="PageOne.png" />
<local:PageTwo Title="PageTwo"
Icon="PageTwo.png" />
<NavigationPage Title="PageThree" Icon="PageThree s.png">
<x:Arguments>
<local: PageThree/>
</x:Arguments>
</NavigationPage>
<local:PageFour Title="PageFour"
Icon="PageFour.png" />
</TabbedPage.Children>
</TabbedPage>
PageThreeViewModel:
public class PageThreeViewModel : ViewModelBase
{
private ICommand pageFiveCommand;
public ICommand PageFiveCommand { get { return pageFiveCommand; } }
private void OnCloseCommand()
{
_navigationService.GoBackAsync();
}
public PageThreeCommand ViewModel()
{
pageFiveCommand = new DelegateCommand(OnPageFiveCommand);
}
private async void OnPageFiveCommand()
{
//await _navigationService.NavigateAsync(?NavigationPage/PageFive");
await _navigationService.NavigateAsync("GiftCardPage");
}
}
You can achieve this by Wrapping the ContentPage inside the TabbedPage with NavigationPage.
Code :
<TabbedPage>
<TabbedPage.Children>
<NavigationPage Title="Home" Icon="home.png">
<x:Arguments>
<ContentPage>
//Your ContentPage here
//You can have a ViewModel for this ContentPage and Navigate inside that and will still have the Tabbed Page outside.
</ContentPage>
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>

Resources