I've just started working on my very first Xamarin Forms app for Android, iOS and UWP and have looked through a lot of examples and code in order to get started.
The app is built using MVVM structure, as i guess most Xamarin.Forms apps are and I am currently facing two issues that I can't find any answer to.
These problems might be Xamarin.Forms 101 so I apologize if these are "stupid" questions.
App.xaml.cs -> App.MainPage = new NavigationPage(new MainPage())
In the App.xaml.cs file I have defined which page that should be set as the startup-page based on Device idiom.
Page startupPage = null;
if (Device.Idiom == TargetIdiom.Phone)
startupPage = new NavigationPage(new MainPage());
else
startupPage = new NavigationPage(new MainPageTablet());
MainPage = startupPage;
This works fine, but i face one issue with this.
OnAppearing() and OnDisappearing() are both called on startup
When the app starts, both OnAppearing() and OnDisappearing() are called inside MainPage.xaml.cs/MainPageTablet.xaml.cs file(s).
Is this a bug, or should this happen?
When removing "NavigationPage" from the declaration of startupPage only OnAppearing() is called on startup
Page startupPage = null;
if (Device.Idiom == TargetIdiom.Phone)
startupPage = new MainPage();
else
startupPage = new MainPageTablet();
MainPage = startupPage;
Now the startup works, like I feel it should with only calling OnAppearing() on startup.
This however now introduces some new "problem(?)". The ToolbarItem that i have inside MainPage.xaml/MainPageTablet.xaml disappears.
<?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:local="clr-namespace:TestApp.Classes;assembly=TestApp"
x:Class="TestApp.Views.MainPageTablet">
<ContentPage.ToolbarItems>
<ToolbarItem Name="MenuItem1" Order="Secondary" Text="Log out" Command="{Binding LogOutCommand}" Icon="settingsImage.png" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
....
</ContentPage.Content>
</ContentPage>
Can a ToolbarItem only be used in a NavigationPage, or do I have to do more than just adding it to the in order to get it to work?
Any help or comments regarding this would be really helpful.
Thanks
If you are running your app on mobile, then on startup OnAppearing() of MainPage() should only be called.
If the page is setup as Navigation page, then only default navigation bar appears.
So when you add toolbar item it will be visible. But as you have not set main page as navigation page, navigation bar will not appear and so toolbar item is not visible.
Related
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;
I have a problem. I want to load a TabbedPage when I click on a button in a different page, so I created this code:
protected void imgAdd_Clicked(object sender, EventArgs args)
{
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new Page1());
tabbedPage.Children.Add(new Page2());
App.Current.MainPage = tabbedPage;
}
But the result is as follows:
As you can see the Image leaves a trail of the image when you swipe between the pages.
However, when I load the Tabbed Page using the App.xaml.cs it loads correctly without the flickering, so it seems to only occur when I call the tabbed page from another page...
Any ideas?
I make the sample to test. You could check the sample TabbedPageDemo on my github.
https://github.com/WendyZang/Test.git
Create two pages.
Page1.xaml:
<StackLayout >
<Image Source="pig.jpg"></Image>
</StackLayout>
Page2.xaml:
<StackLayout>
<Image Source="world.jpg"></Image>
</StackLayout>
With the code you provided.
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new Page1());
tabbedPage.Children.Add(new Page2());
App.Current.MainPage = tabbedPage;
Result:
Need more explanation about the issue,
The tabs in the Tabbedpage are dynamically created?
Suggestion: Use https://help.syncfusion.com/xamarin/tabbed-view/getting-started
it will save your time.
I have created a Master Detail Page
I am loading a list of items into the 'detail' frame / window
I want to replace the contents of that page with a template / view which never has any reason to exist as an item in the Menu Items
I have tried replacing MainPage and Navigation which load the page but you lose the Master Detail context - the menu
Please can someone tell me what I call in order to replace the current page with one of my choice while staying within the context of Master Detail?
This does not work, for example - it removes the MasterDetail menu
Navigation.PushAsync(new Arcade.Index());
I have created the MasterDetailPage by pretty much letting Visual Studio generate it. I set it after a successful login, like so:
var welcome = new Pages.Welcome();
Application.Current.MainPage = welcome;
This is an excerpt of the XAML for Welcome
<MasterDetailPage.Master>
<pages:WelcomeMaster x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:Index />
</x:Arguments>
</NavigationPage>
I've added this to the code behind for Welcome
InitializeComponent();
MasterPage.ListView.ItemSelected += ListView_ItemSelected;
this.Detail = new NavigationPage(new Arcade.Index());
In spite of all that, when I call this later, the MasterDetail menu disappears
((MasterDetailPage)Application.Current.MainPage).Detail = new Arcade.Index();
In you App.xaml.cs add static method then you can use it to navigate in you code
public static void SetDatailPage(Page page)
{
if (App.Current.MainPage is MasterDetailPage)
{
var masterPage = (MasterDetailPage)App.Current.MainPage;
masterPage.Detail = new NavigationPage(page);
}
}
And use it like this
App.SetDatailPage(new YourPageYouWannaNavigateTo());
1 - use App.Current.Mainpage
var md = (MasterDetailPage)App.Current.MainPage;
md.Detail = new MyPage();
2 - use navigation
when you initially create your detail, wrap it in a NavigationPage
this.Detail = new NavigaitionPage(new Page1());
then later, Page1 can navigate to Page2 within the Detail pane
Navigation.PushAsync(new Page2());
3 - explicitly pass a reference to the MasterDetailPage
// when you create Page1, pass a reference to the MasterDetailPage
// you will also need to modify Page1's constructor
this.Detail = new Page1(this);
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();
}
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