Xamarin.Forms Prism app not showing Master-Detail navigation bar - xamarin

I am trying to get Master-Detail navigation configured in my Xamarin.Forms app with my UWP target running on Windows 10.
When I run the sample Master-Detail app provided by Xamarin (following https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/master-detail-page/), and change the MasterBehavior to Popover, I see the following behavior:
Startup:
Select the hamburger icon:
Make a selection:
In my prism app, I navigate to MainPage/View1:
protected override void OnInitialized()
{
InitializeComponent();
var task = NavigationService.NavigateAsync("MainPage/View1");
...
}
MainPage is my MasterDetailPage with the MasterBehavior set to Popover, and View1 is a ContentPage.
MainPage:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:My.Mobile.Application.Views;assembly=My.Mobile.Application"
x:Class="My.Mobile.Application.Frame.MainPage"
MasterBehavior="Popover">
<MasterDetailPage.Master>
<views:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<views:View1 />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
View1:
public View1()
{
NavigationPage.SetHasNavigationBar(this,false);
InitializeComponent();
}
On startup, I do not see any navigation bar, just the contents of View1 (currently just a red screen):
If I change the MasterBehavior of MainPage.xaml to Default instead of Popover, and remove the SetHasNavigationBar in View1, I see the side menu when the app launches:
MainPage:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:My.Mobile.Application.Views;assembly=My.Mobile.Application"
x:Class="My.Mobile.Application.Frame.MainPage"
MasterBehavior="Default">
<MasterDetailPage.Master>
<views:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<views:View1 />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
View1:
public View1()
{
//NavigationPage.SetHasNavigationBar(this,false);
InitializeComponent();
}
When I make a selection after startup with MasterBehavior set to Default, I now see the hamburger menu.
Is there anything that I can add or verify in my solution to mimic the Xamarin sample behavior with the MasterBehavior set to Popup?

The problem is here: var task = NavigationService.NavigateAsync("MainPage/View1");
Since you want to show the hamburger menu, you need to wrap your Detail in a NavigationPage. So first register a NavigationPage for navigation
Container.RegisterTypeForNavigation<NavigationPage>();
Then add it to your navigation path:
var task = NavigationService.NavigateAsync("MainPage/NavigationPage/View1");
Also, you can remove a the detail markup in your MasterPage XAML because the navigation service will build it up for you.

Try to do something like this:
public partial class ShellView : MasterDetailPage, IMasterDetailPageOptions
{
public ShellView()
{
InitializeComponent();
}
public bool IsPresentedAfterNavigation
{
get { return Device.Idiom != TargetIdiom.Phone; }
}
}

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;

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:

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>

How to add TitleIcon and button to navigation bar of NavigationPage?

I am trying to add TitleIcon and reload button to Navigation Bar of NavigationPage but dont know how to do it. I tried to use Icon property for navigation page but it does not work. About adding buttons to navigationpage i have not found anything.
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App.MasterDetailMenu"
xmlns:local="clr-namespace:App;assembly=App">
<MasterDetailPage.Master>
<local:MasterPage/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail >
<NavigationPage BarBackgroundColor="#7FBE5D" x:Name="NavBar" Icon="image.png">
<x:Arguments>
<local:Feedbacks/>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class AboutPage : ContentPage
{
public AboutPage()
{
InitializeComponent();
NavigationCommand = new Command(NavigationCommandToInfo);
ToolbarItems.Add(new ToolbarItem() { Icon = "Info2.png", Command=NavigationCommand });
}
public ICommand NavigationCommand { get; }
void NavigationCommandToInfo() =>
Navigation.PushAsync(new MainPage());
}

Xamarin Forms NavigationPage BarBackgroundcolor doesn't see the same on every page

I'm newbie at Xamarin Forms. I' ve trouble with NavigationPage BarBackgroundcolor in MasterDetailPage. It doesn't see the same on every page. That's Xamarin Forms Portable project and my code;
<?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:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" BackgroundColor="#fe5722" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage BarBackgroundColor="#fe5722" BarTextColor="White">
<x:Arguments>
<local:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I guess it might be on App page. But how? What can I do to fix that?
I fix my code with that problem is solved. I set the Barbackgroundcolor on MainPage.xaml.cs
var item = e.SelectedItem as MasterPageItem;
if (item != null) {
Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType))
{ BarTextColor=Color.White,BarBackgroundColor=Color.FromHex("fe5722") };
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
You have to set the BackgroundColor of the Master page to appear in the Navigation Bar. Also it would be good to specify it in in the theme for android so that it gives you a material styling.
There is already plenty of discussion done in the forum.
How to change Xamarin Form NavigationPage Title Color
How to change the nav bar background color on Android?
How to change the color of Xamarin.Forms.NavigationPage
NavigationPage - StatusBar Color

Resources