MasterDetailPage - can't find any way to target 'detail' page window - xamarin

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

Related

How to redirect after login about TabbedPage in Xamarin

I have:
MainView.xaml
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="#fff"
...
>
<views:Page1 Title="Page1" IconImageSource="homeicon" BackgroundColor="#fff"/>
<views:Page2 Title="Page2" IconImageSource="order" BackgroundColor="#fff"/>
<views:Page3 Title="Page3" IconImageSource="ads" BackgroundColor="#fff"/>
<views:Page4 Title="Page4" IconImageSource="usericon" BackgroundColor="#fff"/>
</TabbedPage>
and i have 1 login page. After logging in, you will be redirected to Page4.
I use: App.Current.MainPage = new NavigationPage(new Page4())
if (response.IsSuccessStatusCode)
{
var responseBody = await response.Content.ReadAsStringAsync();
App.Current.MainPage = new Page4();
}
However I don't show TabbedPage
How to show the list of Tabs below. Please help me with the solution. Thank you
Update
I try
On Log in => App.Current.MainPage = new MainView();
Log Out => App.Current.MainPage = new LoginPage();
It still doesn't work
Put your page inside a navigation page. That should help you fix it.
Update:
In MainView.xaml.cs put this
public MainView(int index)
{
InitializeComponent();
SetPage(index);
}
void SetPage(int index) { CurrentPage=Children[index]; }
after login, do this
App.Current.MainPage = new NavigationPage(new MainView(3))
When you change App.Current.MainPage, you change the MainPage of the app for anything you put there so that page is the only page that exists in the app. Try to set your tabbed page there and you will have the tabbed page as the 'MainPage'.
Now that your MainPage is the Tabbed Page, you can change the Page that is shown using the code below (inside the TabbedPage):
CurrentPage = Children[3]; // 0, 1, 2, 3
You will notice that you can change between any ContentPage attached to the TabbedPage
There is access to the MainPage everywhere now using (App.Current.MainPage as TabbedPage) so it's easy to change the shown page from other places

Xamarin Calling a TabbedPage using a Button

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.

Xamarin.Forms UWP Startup Issues regarding NavigationPage as App MainPage

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.

Xamarin.Forms Pages are merging together

When I navigate to a new page, adding it to the stack, if it is not full height of the page, it shows part of that page and part of the previous page (like a modal). I have a Xamarin.Forms app which uses a master detail page. I have upgraded to Xamarin.Forms Nuget 2.3.3.168 and am on the latest Xamarin version for Visual Studio.
I also checked the Navigation stack when going to a new page and everything looks correct. I have 1 master page which is the menu and the detail page has a navigation page with more pages in the stack, they just display partially on top of each other.
The only other thing I have changed is when I needed to initialize my App() constructor by setting the MainPage to a new MasterDetail page because it was failing if I did not do that in the constructor for Android. Any ideas?
Here is my App.cs:
public App()
{
InitializeComponent();
var masterDetailPage = new MasterDetailPage
{
Master = new Page() { Title = "Title" },
Detail = new Page(),
IsPresented = false
};
App.Current.MainPage = masterDetailPage;
}
Then, when I figure out if the user is logged in or not, I reset the master detail page with this function:
public static void SetMainPage(Page newPage)
{
var rootPage = new NavigationPage(newPage) { BarBackgroundColor = Color.White};
_nav.Initialize(rootPage);
_dialogService.Initialize(rootPage);
App.Current.MainPage = new MasterDetailPage
{
Master = new Menu(),
Detail = rootPage,
BindingContext = new MowMagicMobileViewModelBase(),
IsPresented = false
};
}
Then from there I call Navigation PushAsync() to pop a page onto the stack.
Wow it was actually that I just did not set a background color at all. I guess if you do not explicitly set it for the page it is transparent, unless that gets inherited from somewhere?
I dont know if its the solution but i have masterdetail page too..
But my page is like this
Master = new MenuPage();// it is a content page
Detail = new NavigationPage(new HomePage());
try it to see
If you want to change background i did sth like that
public class NavigationPageBase:NavigationPage
{
public NavigationPageBase (ContentPage c):base(c)
{
/*if (c.GetType().Equals(typeof(LoginPage)))
SetHasNavigationBar(c, false);
else
SetHasNavigationBar(c, true);*/
SetHasNavigationBar(c, true);
BarBackgroundColor = Styles.toolbarColor;
BackgroundColor = Styles.bgPageColor;
}
}
and for detailpage you can use it for example like
Detail = new NavigationPageBase (new HomePage ());
And from your App() constructor you can do simply
MainPage = new MyMasterDetailPage();
Hope it helps

Showing different toolbar buttons on each page with Xamarin Forms

I have 2 pages in my Xamarin Forms app. My first page has 4 icons in the toolbar. My second page is a login page and has a tick and a cross in the toolbar.
I can't get the login page to show any icons unless I make it a navigation page. I also have to clear ToolBarItems on the first page before calling PushAsync() otherwise it complains there are too many toolbar items.
If I call PopAsync() on the login page it does not return to the first page. I'm guessing this is due to their being 2 navigation pages. I also tried PopToRootAsync().The back button works however.
My question is - how do I show different toolbar icons on 2 different pages in a way that allows navigation to work?
I'm testing this on Windows Phone 8.0
Here is the code calling the login page:
private async void ShowLoginPage()
{
ToolbarItems.Clear();
var page = new NavigationPage(new LoginPage());
await Navigation.PushAsync(page);
}
and here is the code to return to the first page:
private void Cancel()
{
Navigation.PopToRootAsync();
}
I'm running Xamarin.Forms v1.2.2.6243
One thing you could try is to keep your Login Page inside of a NavigationPage, and then instead of running PopAsync() within the Login Page after they have logged in successfully, simply replace the MainPage with your old Navigation page:
In your App class:
public NavigationPage AppNavPage = new NavigationPage(new FirstPage());
public App() {
MainPage = AppNavPage;
}
In your FirstPage:
private async void ShowLoginPage() {
ToolbarItems.Clear();
var page = new NavigationPage(new LoginPage());
await Navigation.PushAsync(page);
}
In Login Page:
private async void OnCreateClicked(object sender, EventArgs e) {
bool loginInfoIsGood = CheckLoginInfo(); //Check their login info
if(loginInfoIsGood) {
Application.Current.MainPage = App.AppNavPage;
}
}
Otherwise, I have also done a custom renderer for the NavigationRenderer on iOS to insert toolbar items onto the right side of the Navigation Bar and have overridden some Menu related stuff on Android to change the icon text/colors.
One option that you have, and one that I implemented in my own app, is a custom renderer that removes the navigation header from the app and then you could build your own custom header. With this approach, you do lose some of the native feel of the app, and you have to implement much of the transitional functionality your self. However, it gives you alot more control over the look.
CustomRenderer that removes the navigationBar:
//add using statements
// add all view here that need this custom header, might be able to build a
//base page that others inherit from, so that this will work on all pages.
[assembly: ExportRenderer(typeof(yourView), typeof(HeaderRenderer))]
class HeaderRenderer : PageRenderer
{
public override void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
this.NavigationController.SetNavigationBarHidden(true, true);
}
}
After this you can build a header view that can be placed on the top of every page (I am using xaml) so I don't know if it is relevant in you application.
Edit: You might need to change this renderer for differnt page types.

Resources