I am completely new to Xamarin.
I am working on a project where Prism framework is used for navigation (my first xamarin project) The requirement needed a custom title bar. I have implemented it as detailed out in this tutorial
https://wolfprogrammer.com/2016/07/07/custom-app-header-in-forms/
Now with prism navigation, how to show the masterdetail page menu i.e. set the IsPresented property of MasterPage to true when the user clicks the custom hamburger icon.
I have been reading about this for hours now and not able to understand any of the solutions mentioned nor are they working for me? Could someone please break it down for a complete beginner here?
Some links that I have referred so far
https://forums.xamarin.com/discussion/93409/prism-how-show-hide-programmatically-the-masterdetailpage-menu
https://github.com/PrismLibrary/Prism/issues/570
Just have a boolean property in your Master page's ViewModel, let's call it IsMenuPresented, then in your MasterPage XAML:
<MasterDetailPage
x:Class="YourProject.Views.MasterPage"
...
MasterBehavior="Popover"
IsPresented="{Binding IsMenuPresented, Mode=TwoWay}">
If you want to be able to toggle the menu from code, you can either:
1) do something like
(App.Current.MainPage is MasterDetailPage mainPage).IsPresented = true;
2) Use Prism's Event Aggregator to subscribe to an event in the Master Page's ViewModel that will listen for a true/false value that gets published from some other ViewModel and set IsMenuPresented accordingly (thereby showing/hiding the menu).
Related
I need to do a master detail layout page in Xamarin which then will be used in child pages.
Please check the screenshot below:
I need to have a header part with button for notifications and a button for context menu plus a header.
What is the best approach how I can create this layout in Xamarin?
I will assume that you want to use Xamarin.Forms, instead of using Xamarin.Android and Xamarin.iOS separately.
One approach would be to use default MasterDetailPage as described here or even better to try it with Shell as described here.
Then, you would need to create your CustomNavigationPage and write a custom renderer for it.
Second approach would be to do some tricks, again creating your CustomNavigationPage with template(so that the navigation bar is always displayed) and that you change content dynamically.
Also, you would need to hide default navigation bar and attach click events to your menu button to really open up the menu.
Hope you got it clearly.
MasterDetailPage already provides nearly all functionality that you have asked for, so in some way your question isn't quite clear as you already mention MasterDetailPage. The only remaining problem I can see is how to set up a custom header, and that is than with NavigationPage.TitleView.
Xamarin Forms navigation examples I see leverage a NavigationPage...
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new HyperTrack2.Login());
}
and then when an event occurs to move to the next page...
async void OnLogin(object sender, EventArgs e)
{
await Navigation.PushAsync(new MapPage());
}
How can one show a view without using the NavigationPage?
Depends on what you consider a view to be.
The process you outlined in your question is the prefered way to navigate using Xamarin pages. Xamarin pages contain one or more controls, or views. Usually some layout views at the root and then they branch out as needed.
The built in navigation mechanism actually utilises the optimal native techniques for navigating inside your application and will allow you to use standard gestures and buttons for navigations, display standard toolbars and title views, etc.
I fully recommend that unless you have very specific needs, you keep using the built in navigation mechanism.
Otherwise, your other option for moving through xamarin.forms pages is by just settting the MainPage property of your Application class (called App by default)
You can either access it through Application.Current.MainPage = new MyPage(); or if writing code within the app class, directly by calling MainPage = new MyPage();
Lastly, you specifically mention showing a view and not a page. If you are talking about a single control within a page, you can either bind it's IsVisible property to some value in your ViewModel, or you can give it an x:Name="myControl" (if using XAML) or store a reference to it (if creating UI in code behind) and then do myControl.IsVisible = true/false somewhere in your code behind. This toggles the visibility of a single control, which will then become a part of your page hiearchy.
If you instead wish to display the view as a "popup" over the existing page, without it actually becoming a part of the page, there are some built in simple UI elements you can use, such as action sheet and display alert. These provide simple popup windows that offer a couple of actions or display a message.
For more complex UI, look into Nuget plugin packages, or if you prefer, you can write your own by implementing the functionality on all the target platforms you require.
I suggest looking into Acr User dialogs as it's a wonderful plugin that has served me quite well. It has a much broader set of UI elements you can use, but it still won't let you define any element that you want and display it in a popup, to do that, search for popup plugins for Xamarin.Forms. There are quite a few, but none work perfectly imho.
In the sample code from Xamarin website, the Detail page was added to a NavigationPage
Detail = new NavigationPage(new TestPage());
Does TestPage have to be wrapped by NavigationPage? If I remove NavigationPage and just put new TestPage(), it will work on me. If I keep NavigationPage in, I have the error which I have posted in here.
Reference from my other post
If without NavigationPage, the hamburger icon will be gone, even though still able to show the master page.
From official Xamarin documentation:
Public Constructors
NavigationPage()
Initializes a new NavigationPage object.
NavigationPage(Page)
Creates a new NavigationPage element with root as its root element.
So you only need/want/have to pass a page as argument if you want to specify that it's a root element.
Also in case you developing an UWP app with MasterDetailPage you should keep in mind:
Generally, you'll set these two properties to objects of type
ContentPage, but currently, to get MasterDetailPage to work on the
Universal Windows Platform, the detail page must be a NavigationPage.
I refer from this StackOverflow question, regarding to MVVM Light:
I am trying to have a hamburger menu style navigation (see this
sample). app by Microsoft on an example of how to do this) to:
1- have a convenient solution shared across all my pages. The sample
mentioned above uses an AppShell Page as the root of the app instead
of a Frame, that encapsulates the navigation menu and some behavior of
the back button. That would be ideal.
2- Use the MVVM-Light navigation service to handle all the navigation
from my view model conveniently.
Here is how the App.xml.Cs initializes the shell page onLaunched:
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
var shell = Window.Current.Content as AppShell;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (shell == null)
{
// Create a AppShell to act as the navigation context and navigate to the first page
shell = new AppShell();
// Set the default language
shell.Language = ApplicationLanguages.Languages[0];
shell.AppFrame.NavigationFailed += OnNavigationFailed;
}
// Place our app shell in the current Window
Window.Current.Content = shell;
if (shell.AppFrame.Content == null)
{
// When the navigation stack isn't restored, navigate to the first page
// suppressing the initial entrance animation.
var setup = new Setup(shell.AppFrame);
setup.Initialize();
var start = Mvx.Resolve<IMvxAppStart>();
start.Start();
}
// Ensure the current window is active
Window.Current.Activate();
}
The thing is, as long as i navigate over the menu proviced by the AppShell everything works. But the ShowViewModel from MVVM Cross doesn't have any effect.
I thought there shouldn't be any difference if pass the shell as Frame or the frame set on the AppShell.
Does anyone have an idea what I can do about this or if there is an example with a working hamburger menu with MVVM cross?
The repository is open source on GitHub if you need an better overview or so.
https://github.com/Apply-Solutions/MoneyManager
I use MVVM Cross v4.0.0.0-beta1. Beta2 has currently another issue who prevents building in a UWP.
Thanks
NPadrutt
Not entirely sure what you are trying to do, but what you will probably need to navigate pages with a hamburger menu in a UWP app using MvvmCross as a framework, is a custom presenter, which handles the ShowViewModel method, and displays the associated view for the requested ViewModel in your hamburger container view.
Okey this embarrassing. The issue was that the View for the ViewModel couldn't be resolved. And the reason for that was that I didn't replace the inheritance from page to views:MvxWindowsPage.
With this, everything works with the default page presenter.
EDIT: in order to work with the navigation in the app shell, these pages need to be Pages. So you may either have to rewrite the navigation in the Appshell or may not adjust all Pages to MvxPage.
I am designing a template in belnd 4. I am new to .net and blend. I am trying to link a click event to the button but when I go tp properties and click the Events, I get this
The document item has no code-behind file. Add a code-behind file and a class before adding event handlers
I will appreciate help
I think you are trying to add an event handler for a button which is inside a ResourceDictionary file. A ResourceDictionary is just for storing control's styles. You can only do that in a UserControl or Page.