Hide Nav Bar on Main Page - Xamarin Forms - c#

I want to hide Nav bar on the main-start page of my app. but want to make it display with a title and back button on the second page. This is something I did, but it appears on the main page too.
In App.xaml.cs, I used this:
MainPage = new NavigationPage(new MainPage());
In corresponding login page, I created this:
private async void LoginPage_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new LoginPage());
}
When the user will click it'll take to the second page(login page).
Also, how can I change the color of the nav bar?

In the constructor of the page you want to hide the navigation bar, use the following code.
Xamarin.Forms.NavigationPage.SetHasNavigationBar(this, false);
To change the color of the NavigationBar, you can do this.
new NavigationPage(new MainPage())
{
BarBackgroundColor = Color.FromHex("#000000"),
BarTextColor = Color.White
};

As a bonus, you can also remove it via xaml:
<ContentPage ...namespaces... NavigationPage.HasNavigationBar="False">...

In App.cs use
MainPage = new YourProjectNamespace.MainPage();
This will hide your navigation bar on your first page

Related

PopAsync not working when i use it in a TabbedPage ViewModels

Ok so in my previous design, on my MainPage which is called TasksGroupPage, i had a "+" icon that was taking me to a NewTasksGroupPage to fill a form and then click the save command to create a new TasksGroup ( so i don't need the + icon function to load the page anymore).
This was working perfectly and after clicking the save button it would take me to the MainPage.
But my problem is that i changed my design, i now removed the + icon and instead i created a new tab which now takes me to the NewTasksGroupPage.
To create this tab i simply added to my TasksGroupPage( the main page) the following code : <views:NewTasksGroupPage></views:NewTasksGroupPage>
The problem now is that :
When i click the save command in my NewTaskPageViewModel , the page doesn't take me to the last page like it did before ALSO it's leaving all the text in the entry box there and it only create my TasksGroupPage after a while.
How should i set up this new design to work properly ? If impossible to do, is there a way to add a GestureRecognizers to one of the tab ?
Thanks.
Here you can see my code right now :
TasksGroupPage.xaml
<TabbedPage>
<ContentPage>
// some xaml
</contentPage>
<views:NewTasksGroupPage></views:NewTasksGroupPage>
</TabbedPage>
TasksGroupPage.xaml.cs this is the function that i don't need anymore but this is what i was using with the + icon
protected async void GoToNewTaskPage(object sender, EventArgs e)
{
await Navigation.PushAsync(new Views.NewTasksGroupPage());
}
NewTaskPageViewModel.cs this is the end of my save command which before took me to the main page ( TasksGroupPage) but now it just stays there and doesn't reset my entries to blank ( even when switching between other tabbed pages)
async Task SaveNewTask()
{
//some code
await Application.Current.MainPage.DisplayAlert("Save", "La tâche a été enregistrée", "OK");
await Application.Current.MainPage.Navigation.PopAsync();
NotifyPropertyChanged();
}
If you read the document Xamarin.Forms Navigation:
You will find that NavigationPage and TabbedPage are two different ways to navigate pages in Xamarin.forms.
Navigation.PushAsync and Navigation.PopAsync only works in NavigationPage, it does not work in TabbedPage, that's why the page doesn't take me to the last page like it did before.
If you use a TabbedPage, you can use below code to switch page:
async void SaveNewTask(object sender, EventArgs args)
{
//this here means the current ContentPage
//this.Parent = NavigationPage
var tabbedPage = this.Parent.Parent as TabbedPage;
//if you don't have navigationPage, just use:
//var tabbedPage = this.Parent as TabbedPage;
//Switch to first page in tabs
tabbedPage.CurrentPage = tabbedPage.Children[0];
}

Xamarin cache pages - make it so input doesn't disappear

I'm building my first full-scale Xamarin.Forms app and trying to figure out how to keep user input between navigation. After doing some searching online I've read that the default behavior is to completely reload pages each time you navigate, but you can change the default behavior by setting the NavigationCacheMode to true or required, but I've tried to set this attribute in both xaml and C# with no success - it seems like the property is not recognized.
Is there a simple way to make it so that user input does not disappear when navigating between pages? If anyone can show me how to set the NavigationCacheMode that would be great, but I'm also open to any reasonable solution that will keep the user input from disappearing during navigation.
Additional details: My app has a UWP and Android project. I am using a master detail page for navigation. Here is my MenuList_ItemSelected event handler:
private void MenuList_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = (MenuItem)e.SelectedItem;
var title = item.Title;
var page = (Page)Activator.CreateInstance(item.TargetType);
Detail = new NavigationPage(page); //TODO: when menu item is clicked and you're already on that page, the menu should just slide back. (currently it does nothing and stays out).
IsPresented = false;
}
Finally was able to solve this! I adapted this code from a related post which implements a Dictionary that keeps track of the navigation stack:
In the constructor for my Master Detail Page:
public partial class MenuPage : MasterDetailPage
{
Dictionary<Type, Page> menuCache = new Dictionary<Type, Page>();
}
Then in the ItemSelected method:
private void MenuList_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
if (menuCache.Count == 0)
menuCache.Add(typeof(AttendancePage), Detail);
var item = (MenuItem)e.SelectedItem;
if (item != null)
{
if (menuCache.ContainsKey(item.TargetType))
{ Detail = menuCache[item.TargetType]; }
else
{
Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
menuCache.Add(item.TargetType, Detail);
}
menuList.SelectedItem = null; //solves issue with nav drawer not hiding when same item is selected twice
IsPresented = false;
}
}

Switching ContentViews Xamarin.Forms

I am trying to create a custom navigation Bar. I have set up my Navigation Bar and called it NavBar, and added a ContentView above it containing the Current Displayed page. I have created a public variable containing the ContentView like so: public ContentView CurrentPage = new Featured(); and I have a StackLayout set up in the Page like so:
var stacklayout = new StackLayout { Spacing = 0 };
stacklayout.Children.Add(CurrentPage);
stacklayout.Children.Add(NavBar);
Content = stacklayout;
I have a function that is called when a button on my NavBar is pressed to change the value of CurrentPage, set up like this:
void NavToBuy(object sender, EventArgs e)
{
CurrentPage = new Buy();
}
But when the button is pressed, nothing happens. I think that the value is being changed, but not displayed on the screen. Is there any way to fix this? Thanks for any help in advance :)
This answer was taken from reddit user brminnick1
You need to replace CurrentPage inside of the StackLayout, which would
look something like this:
Device.BeginInvokeOnMainThread(() => stackLayout.Children[0] = new Buy());

Global appBar, add other buttons to this appbar for a specific page

I add an appbar with 3 buttons in App.xaml.cs to put it on each page but I have a page where I would like to add another button in addition.
What I do, it's I get the appbar with my 3 defaults buttons from App.xaml.cs, then I add my other button. The problem is when it's added and when I change the page, the button I added stay visible... Thus, it's a problem with the reference of the object because each page reference the same appbar.
I wonder if it's possible to copy this appbar for only the page with 4 buttons...(Icloneable? but I don't know how :/) What do you think?
I should also mention that some buttons use navigation to go another page.
Here is my code:
App.xaml.cs
private ApplicationBar _appBar;
public ApplicationBar AppBar { get { return _appBar; } } //property called in other page
//Method called in the constructor
private void BuildLocalizedApplicationBar()
{
// Set the page's ApplicationBar to a new instance of ApplicationBar.
_appBar = new ApplicationBar();
// Create a new button and set the text value to the localized string from AppResources.
var appBarButtonScan = new ApplicationBarIconButton(new Uri("/Assets/AppBar/White/appbar.qr.png", UriKind.Relative));
appBarButtonScan.Click += AppBarButtonScanOnClick;
appBarButtonScan.Text = AppResources.Scan;
var appBarButtonSearch = new ApplicationBarIconButton(new Uri("/Assets/AppBar/White/appbar.search.png", UriKind.Relative));
appBarButtonSearch.Click += AppBarButtonSearchOnClick;
appBarButtonSearch.Text = AppResources.Search;
var appBarButtonFacebook = new ApplicationBarIconButton(new Uri("/Assets/AppBar/White/appbar.facebook.png", UriKind.Relative));
appBarButtonFacebook.Click += AppBarButtonFacebookOnClick;
appBarButtonFacebook.Text = AppResources.MyAccount;
_appBar.Buttons.Add(appBarButtonScan);
_appBar.Buttons.Add(appBarButtonSearch);
_appBar.Buttons.Add(appBarButtonFacebook);
// Create a new menu item with the localized string from AppResources.
ApplicationBarMenuItem appBarMenuSettings = new ApplicationBarMenuItem(AppResources.SettingsTitle);
_appBar.MenuItems.Add(appBarMenuSettings);
}
In the page where I would like to have one button in addition:
private void BuildLocalizedApplicationBar()
{
App _app = Application.Current as App; //in my page, it's an attribute that I initialize in my constructor.
ApplicationBar = _app.AppBar; //get the appbar with 3 buttons from App.xaml.cs
// Create new buttons and set the text value to the localized string from AppResources.
ApplicationBarIconButton appBarButtonTagPlace = new ApplicationBarIconButton(new Uri("/Assets/AppBar/White/appbar.heart.outline.png", UriKind.Relative));
appBarButtonTagPlace.Text = AppResources.TagThisPlaceTitle;
appBarButtonTagPlace.Click += AppBarButtonTagPlaceOnClick;
ApplicationBar.Buttons.Add(appBarButtonTagPlace);
}
Thank you in advance
You could remove the button when leaving the page that has the extra button.
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
ApplicationBar.Buttons.Remove(appBarButtonTagPlace);
base.OnNavigatedFrom(e);
}

How to load content page into mainPage from another xaml page?

I have 3 separate pages MainPage.xaml, Content.xaml and Nav.xaml. I need to load a Content.xaml in 'ucMainContent' userControl that sits inside MainPage.xaml by clicking a button from Nav.xaml. I am wondering what I am doing wrong. Any advice is highly appreciated.
MainPage.xaml where I set content container with this code:
<UserControl x:Name="ucMainContent" />
I am trying to load Content.xaml into mainPage.xaml from Nav.xaml. The code from Nav.xaml page where is the button:
private void LoadContent_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
var contentPage = new Content();
var ucMainPage = new MainPage();
ucMainPage.ucMainContent.Content = contentPage;
}
If I understand you correctly you need to find the parent Control of Nav.xaml in this case Main.
Check out http://forums.silverlight.net/forums/t/55369.aspx - there is an excellent generic utility which allows you to find the parent of any usercontrol

Categories