Navigation bar not displaying page title in Xamarin Forms - xamarin

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;

Related

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:

How to customize master details page header in xamarin forms

I am displaying a master details page.
Master page has the list of menu items and details page will have selected item details.
By default detail page is displaying title at left of the screen. I want to customize details page title to show at center of page.
Is there anyway to customize details page title bar in Xamarin forms?
Screenshots attached here
Option 1:
I think TitleView (available since XF 3.2) is what you are looking for. All you have to do is create a the View you want to have as TitleView and asign it to the NavigationPage as:
Code
public class TitleViewPage : ContentPage
{
public TitleViewPage()
{
var titleView = new Slider { HeightRequest = 44, WidthRequest = 300 };
NavigationPage.SetTitleView(this, titleView);
...
}
}
XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigationPageTitleView.TitleViewPage">
<NavigationPage.TitleView>
<Slider HeightRequest="44" WidthRequest="300" />
</NavigationPage.TitleView>
...
</ContentPage>
Reference: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar
Option 2:
Back in the days, before TitleView was available i used to simply remove navigation bar:
Code
NavigationPage.SetHasNavigationBar(this, false);
XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...
NavigationPage.HasNavigationBar="False">
And then i just put on top of my NavigationPage a StackLayout (my custom title bar) with all the icons/buttons/images/formatted text/etc that i wished.

how to remove multiple back button from navigation in xamarin?

please help me to sort out following issue.
this is my issue.if push without animation(false)then issue.if animation true then working fine.
// await Navigation.PushAsync<DeleteDealsAndOffersViewModel>(); --> **working fine**
// await Navigation.PushAsync(new DeleteDealsAndOffersViewModel());**working fine**
vm = new DeleteDealsAndOffersViewModel
{
DealsAndOffersList = dealLists,
//CategoryColor = CategoryColor,
IsDelete = true
};
//await Navigation.PushAsync(vm,false); **issue with back button**
I have used following code for back button.this is my base class.
<?xml version="1.0" encoding="UTF-8"?>
<v:ExtendedContentPage
xmlns:v="clr-namespace:Core.Views;assembly=Core"
xmlns="http://xamarin.com/schemas/2014/forms"
LeftBarButtonTitle="< Back"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Vi.Views.BasicV">
<ContentPage.Content>
</ContentPage.Content>
</v:ExtendedContentPage>
now I create another page and set base class on that page
DeleteDealsAndOffersListPage.xaml
<?xml version="1.0" encoding="UTF-8"?>
<view:BasicV
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:view="clr-namespace:Vi.Views;assembly=FlagSpree"
xmlns:sty="clr-namespace:VillageVesl.Styles;assembly=FlagSpree"
xmlns:v="clr-namespace:Core.Views;assembly=Core"
xmlns:comp="clr-namespace:VillageVesl.Views.Components;assembly=FlagSpree"
x:Name="main" Title="{Binding Title}"
LeftBarButtonTitle="Cancel"
BackgroundColor="{x:Static sty:Colors.BGColor}"
x:Class="Vi.Views.DeleteDealsAndOffersListPage">
<ContentPage.ToolbarItems>
<ToolbarItem IsDestructive="true" Text="Delete" Command="{Binding DeleteAllSelectedDealsCommand}" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
</ContentPage.Content>
</view:BasicV>
"DeleteDealsAndOffersListPage.xaml.cs".
namespace Vi.Views
{
public partial class DeleteDealsAndOffersListPage : BasicV
{
public DeleteDealsAndOffersListPage()
{
InitializeComponent();
}
}
}
Now problem is that when I push on DeleteDealsAndOffersListPage then display two back button.
It looks like you are creating your own Back Button. Xamarin will add it's own back button to any page that you push onto a Navigation stack, is that the extra back button you are seeing? If so, before you do the push, add:
NavigationPage.SetHasBackButton(vm, false);

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>

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

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; }
}
}

Resources