Xamarin forms MasterDetailPage navigation - xamarin.forms

So ive been working on an app that uses a MasterDetail page and its going fine but Im just a little bit confused on how its suppose to navigate through pages.
At the moment i have the menu items opening some pages in the app and that parts working great, the side menu stays. The thing im confused with is how to handle having buttons on the main page being displayed. My buttons at the moment just open up a new page but the side menu of the MasterDetail page just disappears into the regular NavigationPage.
I will give my button code below.
btnSocial.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(() =>
{
Navigation.PushAsync(new SocialPage());
})
});
Is this just how a MasterDetail page navigates or do you think im doing something wrong?
** EDITED **
Just incase this helps, i will attach my menuopage and launchpage code:
MenuPage.cs
public class MenuPage : ContentPage
{
public Action<ContentPage> OnMenuSelect { get; set; }
public MenuPage()
{
Title = "Menu";
Icon = "ic_menu.png";
BackgroundColor = ProjectVariables.PRIMARY_COLOR;
var items = new List<MenuItems>()
{
new MenuItems("Social", () => new SocialPage()),
new MenuItems("Career", () => null),
new MenuItems("MySchedule", () => null),
new MenuItems("Videos", () => null),
new MenuItems("Contact", () => null),
new MenuItems("Sign in", () => null)
};
var dataTemplate = new DataTemplate(typeof(TextCell));
dataTemplate.SetValue(TextCell.TextColorProperty, Color.White);
dataTemplate.SetBinding(TextCell.TextProperty, "Name");
var listview = new ListView()
{
ItemsSource = items,
ItemTemplate = dataTemplate
};
listview.BackgroundColor = ProjectVariables.PRIMARY_COLOR;
listview.ItemSelected += (object sender, SelectedItemChangedEventArgs e) =>
{
if(OnMenuSelect != null)
{
var item = (MenuItems)e.SelectedItem;
var itemPage = item.PageFn();
OnMenuSelect(itemPage);
}
};
Content = new StackLayout
{
Orientation = StackOrientation.Vertical,
Children =
{
listview
}
};
}
}
LaunchPage.cs
public class LaunchPage : MasterDetailPage
{
public LaunchPage()
{
var menuPage = new MenuPage();
menuPage.OnMenuSelect = (categoryPage) =>
{
Detail = new NavigationPage(categoryPage);
//Detail.Navigation.PushAsync(categoryPage);
IsPresented = false;
};
Master = menuPage;
Detail = new NavigationPage(new MainPage())
{
BarTextColor = Color.White,
BarBackgroundColor = ProjectVariables.PRIMARY_COLOR
};
MasterBehavior = MasterBehavior.Split;
}
}

Have a look at this documentation page from Xamarin.
It looks like you do not use the navigation service for this. You need a reference to your master page and set the Detail property for it.
Look at this section in particular.
public partial class MainPage : MasterDetailPage
{
public MainPage ()
{
...
masterPage.ListView.ItemSelected += OnItemSelected;
}
void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as MasterPageItem;
if (item != null) {
Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType));
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
}
}
On the selection of a ListView item they set the Detail property and it will do the navigation for you.

Related

How to find whether Listview scrolled up or down in xamarin forms?

I need to hide some view, when listview scrolled up and display that view again, when list view scrolled down.
I used
private void ScheduleServiceList_ItemAppearing(object sender, Xamarin.Forms.ItemVisibilityEventArgs e)
{
var currentItem = e.Item as VehicleService;
double listviewheight = ScheduleServiceListView.Height;
if (viewModel.VehicleServiceList[0].Id == currentItem.Id)
{
SearchEntryLayout.IsVisible = true;
HeadingGrid.Margin = new Thickness(0, -70, 0, 0);
}
}
What about:
var listView = new ListView(ListViewCachingStrategy.RecycleElement)
{
....
ItemTemplate = new DataTemplate(() =>
{
return new MyListViewCellView(new List<int> { ... /* ids to disable or other objects */ });
})
};

Tabbed page swipes gets in the way of a horizontal scroll Xamarin Forms

I want to know how to disable the swipe in a tabbed page. As I have a sort of horizontal scroll listview on a page the swipe keeps changing the page instead of scrolling the listview.
This is how I got the tabbed page to work.
App.xaml.cs
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace App1
{
public partial class App : Application
{
public App()
{
InitializeComponent();
SetMainPage();
}
public static void SetMainPage()
{
Current.MainPage = new TabbedPage
{
Children =
{
new NavigationPage(new page1())
{
Title = "page1",
Icon = Device.OnPlatform<string>("tab_feed.png",null,null)
},
new NavigationPage(new page2())
{
Title = "page2",
Icon = Device.OnPlatform<string>("tab_feed.png",null,null)
},
new NavigationPage(new page3())
{
Title = "page3",
Icon = Device.OnPlatform<string>("tab_feed.png",null,null)
},
}
};
}
}
}
You can use SetIsSwipePagingEnabled.
var page = new TabbedPage
{
Children =
{
new NavigationPage(new MainPage())
{
Title = "page1"
},
new NavigationPage(new MainPage())
{
Title = "page2"
},
new NavigationPage(new MainPage())
{
Title = "page3"
}
}
};
Xamarin.Forms.PlatformConfiguration.AndroidSpecific.TabbedPage.SetIsSwipePagingEnabled(page, false);
Current.MainPage = page;

Master Detail Page is not appearing after Content page

I am working in xamarin.forms. I am creaing an android application. In my application I have to use menu. So I took Master detail page to show the menus. And its working fine.
But my problem is before showing the Master detail page, I have to open a content page which doesn't contain the menus. So I took a content page and set it. But when I am running the application after content page, Master detail page is not appearing. The code is running successfully but the Master page is not appearing.
Can any one tell me how I can show the Master detail page after showing simple content page?
The answer will depend on if you want to maintain the navigation stack or not. If you want to add the new page to the current Navigation Stack then you need to so something like this in the Content Page:
((NavigationPage)Parent).PushAsync(newPage);
If you want to make the new page the root of the Navigation Stack then you need to do something like this:
((App) Parent).MainPage = newPage;
If this doesn't work, post your code.
Giving you a trick ! suppose you have a login page ,after authentication you will go to RootPage which is a masterDetailPage .
Take a hint from from below code
namespace LoginNavigation
{
public class App : Application, IloginInterface
{
public static App current;
public static bool IsUserLoggedIn { get; set; }
public static double ScreenWidth;
public static double ScreenHeight;
public App () {
current = this;
MainPage = new LoginPageWithStack ();
}
public void Logout() {
MainPage = new LoginPageWithStack ();
}
public void ShowMainPage() {
MainPage = new RootPage ();
}
}
}
rootPage:
namespace LoginNavigation
{
public class RootPage:MasterDetailPage
{
MenuPage menuPage;
public RootPage () {
ToolbarItems.Add(new ToolbarItem("Filter", "ring.png", async () => {
var page = new ContentPage();
var result = await page.DisplayAlert("Title", "Message", "Accept", "Cancel");
Debug.WriteLine("success: {0}", result);
}));
menuPage = new MenuPage ();
menuPage.Menu.ItemSelected += (sender, e) => NavigateTo (e.SelectedItem as MenuItemForMaster);
//Master = new MasterMenu();
Master = menuPage;
Detail = new NavigationPage (new TimeSheet()){
BarBackgroundColor = Color.FromHex("008dce"),BackgroundColor = Color.FromHex("008dce")
};
}
void NavigateTo (MenuItemForMaster menu) {
if (menu == null)
return;
Page displayPage = (Page)Activator.CreateInstance (menu.TargetType);
//Detail = displayPage;
Detail = new NavigationPage (displayPage) { BarBackgroundColor = Color.FromHex("008dce"),BackgroundColor = Color.FromHex("008dce")};
menuPage.Menu.SelectedItem = null;
IsPresented = false;
}
}
}
So the trick is ,get the current instance of App class and manipulate Mainpage property of it .

Xamarin forms MasterDetail and PageRenderer

Situation:
Building an application using Xamarin Forms and MasterDetail component.
Question:
How Can I render a specific page on Android based on a PageRender? and keep the Drawer?
Edit
public class MasterBacASable : MasterDetailPage
{
public MasterBacASable ()
{
Icon = null;
Title = "The title";
Detail = (new FirstPage ());
Master = new AppMenuPage ();
}
}
[assembly:ExportRenderer (typeof(BacASable.FirstPage), typeof(BacASable.Droid.FirstPageContentRennderer))]
namespace BacASable.Droid
{
public class FirstPageContentRennderer : PageRenderer
{
public FirstPageContentRennderer ()
{
}
protected override void OnElementChanged (ElementChangedEventArgs<Page> e)
{
base.OnElementChanged (e);
var activity = this.Context as Activity;
var v = activity.LayoutInflater.Inflate (Resource.Layout.AndroidView,this,false);
AddView (v);
}
}
}
Follow this for Xamarin.Forms Master-Detail Documentation
The base Concept is the following
public class MainPageCS : MasterDetailPage
{
MasterPageCS masterPage;
public MainPageCS ()
{
masterPage = new MasterPageCS ();
Master = masterPage;
Detail = new NavigationPage (new ContactsPageCS ());
...
}
}
Your Master is your drawer and Detail the Page (ContentPage, TabbedPage,NavigationPage,CustomPageRenderer ).
So each time you want to display a different page set the Detail property
Detail = new MyContentPage();
I was just forgetting to override the OnLayout in the Renderer.
Thank you all.

Slide menu from second page in xamarin.forms

When we login,I dont want to display top bar in login_page,from second_page after login I would like to display slide menu.Is it possible to display slide from second page in xamarin.forms?
public class RootPage : MasterDetailPage
{
public RootPage()
{
var menuPage = new MenuPage();
menuPage.Menu.ItemSelected += (sender, e) => NavigateTo(e.SelectedItem as MenuItem);
Master = menuPage;
Detail = new NavigationPage(new DashBoardPage());
}
void NavigateTo(MenuItem menu)
{
Page displayPage = (Page)Activator.CreateInstance(menu.TargetType);
Detail = new NavigationPage(displayPage);
IsPresented = false;
}
}
In App.cs i am using loginpage and in loginpage i dont want ot display top menu.after login i want to display.how to display after login page
public static Page GetMainPage()
{
return new LoginPage();
}
Finally i got the solution for this question:
use:
await Navigation.PushModalAsync(new RootPage());
in place of
await Navigation.PushAsync(new RootPage());

Resources