Xamarin master detail page with static header and context menu - xamarin

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.

Related

Add a custom button in the Tabbar in Xamarin Forms

Is there any way to add a custom button in the tabbar of Xamarin.Forms, like it's seeable on the mock below?
Thanks in advance.
Cue.
You can use relative layout to add the tabs in Xaml,
If you need any coding help let me know I'll help you to design this layout.
I came across this question while looking into implementing a very similar tab bar. There is one other option I've found to do this without writing those hefty custom renders yourself. Check out Sharpnado. It provides a variety of possible customizations for a Xamarin.Forms tab bar.
There is also a blog post on implementing a few options, complete with sample code you can clone.

Have any way to let the drawer navigator Item not be show

I don't want to let all routers show the itemView. It is because that there are some routers I need custom the item in other position.Thanks your help.
I had the same problem, if I understood your question right. I looked a long time for a way to disable or hide certain drawer items to only navigate to through a custom link. I didn't find a simple way to do this in the React navigation docs. Instead, I created a custom drawer and created all of the links myself.
I gave a longer answer to a similar question on https://stackoverflow.com/a/44205159/8071132.

How to create a view for a single control?

What is the best way to create a view for a single control that I need to load into a Shell region in a Prism app. I know I can wrap the control in a UserControl, but I suspect there may be a better way.
I am working on a demo app to learn Prism 4. Each module will load a navigation button into an ItemsControl in a region in the Shell. These navigation buttons will function like the Mail, Calendar, and other buttons in Outlook.
I am creating the view in each module that will hold the module's navigation button. The simplest way to create the view seems to be to wrap it in a UserControl. My question is this: Is there a better way to do it? Thanks for your help.
If you need graphical control, what you are doing is the way to go. If you find yourself making all of the buttons look the same (copy - pasting) you might find that a menu registration service is the way to go.
You'd have a service like IMenuService that you register with your container and modules can come around and register menu items to. You can then create buttons for the module. I've provided a sample for this here:
http://dl.getdropbox.com/u/376992/CAGMenus.zip
Your question, though, seems to be about whether or not you need to wrap a control in a UserControl to register them with a region? If that's the question, I believe the answer is no, although you might amend your question to tell us what you are running up against that makes you think this.
I ended up wrapping the control in a UserControl, and it seems to work fine. I am still interested in seeing if there is a better way to load the button, so I will hold this question open for a few days.
Edit 02/22/2011: I tried using a control without a UserControl wrapper, and I got the following error:
Library project file cannot specify ApplicationDefinition element.
I wrapped the control in a UserControl and the error went away.

How to show XAML inside a Tab Control in Silverlight 4

I am wondering how to display a XAML page within a tab control that is part of another XAML page. Or, for that matter, if this is even possible. I want to be able to click a button on page1 and be able to view the page2 from within a tab control that is on page1.
Would this be something to be handled within a Frame control? Or something different? Or is there a better approach to this altogether?
I am programming in Silverlight-4.0, C#-4.0 from within Visual Studio 2010.
You could use the navigation framework, but that isn't really what you're asking. You want to know how to put the contents of one file into a tab, while the contents of another file are in the other tab.
A page in silverlight is simply a user control. You can put a usercontrol into the tab just like you would any other control. In order to use a local usercontrol in another xaml file, you'll need to do the following:
Add this to the root element of the page containing the tabs:
xmlns:local="clr-reference.MyApplicationNamespace"
Then you can add this to add the control into the tab:
<local:usercontrolname name="mycontrol" someproperty="value" />
You can check the Silverlight Navgition Framework You can show "frames" inside your control. It also support deep linking, which is the killer feature here..
This is a very good intro - by Tim Heuer

Changing Views Within a Prism Module?

So I have a PRISM v2 (M-V-VM) application up and running. It's 4 modules that load into a tab control. Great.
Now my question is - where to go from here? Most tutorials seem to stop at this point.
Maybe I'm overthinking this, but it almost seems like I'd need each module to be its own PRISM application, but that can't be right.
Please help a PRISM n00b figure out where to go from here.
What I'm looking to do next: Each tab (module) has its own toolbar with buttons, etc. Clicking a button should change the content (view) below the toolbar.
How to achieve this (correctly) with PRISM? Each module (tab) should have control over its content, however, clicking cetain buttons in one tab may trigger an event in another tab (hence the use of PRISM).
So what's the correct-PRISM way to change views within a module?
I think you are thinking about this a bit hard. I'll explain.
What is commonly referred to as the "Shell" should contain all of your navigation controls. For example, if I wanted a tabbed UI, my Shell would contain a tab control (usually you'd decorate that TabControl with a RegionName, like "ShellTabs").
Your Modules will contribute views to these shell elements. So let's say you have the email module, it will contribute an inbox view to your collection of tabs. It could contribute these views by registering them with the RegionManager for the app (like registering your view with the Region called "ShellTabs").
Modules don't have to contribute anything visual. I have one module in our app that takes care of logging and other background processes.
Hopefully this clears up some of the nomenclature and helps you know what the responsibility of each part is.

Resources