MasterDetailPage + Bottom Tabs in Xamarin Forms - c#

Is there a good/efficent way to have a MasterDetailPage (FlyoutPage) while also having shell like tabs at the bottom of the page?
Because I am using Prism I assume that using Shell as well is probably not ideal.
The Gmail and MyAnimeList App are great references for what I am trying to archive.

Prism and shell don't work properly together. You should create a MasterDetail Page, and in it, as part of the detail page, you should add a NavigationPage.
From here, you can try two things inside the NavigationPage
a Tabbed page inside the navigation page (I haven't tried this approach though)
You could use a normal ContentPage and inside that, add TabView from XamarinCommunity Toolkit
https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/tabview

Related

MAUI Shell + TabbedPage

I have application based on Shell. Application contains pages with tabs which are deffined in Shell. Everything works properly and correctly.
I need create second level page with tabs whitch contains options for return to previous page. In the case of standard "ContentPage", "Routing.RegisterRoute" and "Shell.Current.GoToAsync" it is no problem. However, if I create a TabbedPage like this, my application ends with exception:
0xFFFFFFFFFFFFFFFF in Android.Runtime.JNIEnv.monodroid_debugger_unhandled_exception
I am aware of this information:
TabbedPage is incompatible with .NET MAUI Shell apps, and an exception will be thrown if you attempt to use TabbedPage in a Shell app.
However, I am not sure if this also applies to the second level page, or only to pages that are directly referenced in Shell.
How can I create second level page with tabs?
Is there anyone who has encountered a similar problem, or someone who can give me advice?
Thanks a lot
Using shell, you are limited to content pages.
Navigating to such page is not a problem. Calling GoToAsync will give you the "second layer" you request.
The more interesting part is how to implement tab control, so you have tabs in that ContentPage.
One way to solve this is by using BindableLayouts.
(Here is a good example: https://dev.to/davidortinau/making-a-tabbar-or-segmentedcontrol-in-net-maui-54ha)
You can make really neat UI with this.
It will be worth your time.
Ask if you have any questions.
You can combine TabbedPage, FlyoutPage and NavigationPage instead of shell if you really want to create second level page with tabs. Obviously shell is based on flyouts and tabs, so if you use FlyoutPage and TabbedPage alone in your project, it will be more flexible and troublesome than the shell.
These are the documents about the specific use of FlyoutPage and TabbedPage, you can refer to them if you need: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/flyoutpage?view=net-maui-7.0 and https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/navigationpage?view=net-maui-7.0.
Hope this will help you.

How to create a Carousel Page in Xamarin Forms using Fresh MVVM?

I want to create a carousel page in my Xamarin Forms App using Fresh MVVM, the problem is that FreshMVVM does not offer a class to create a carousel page like it does with FreshNavigationContainer or with FreshMasterDetailNavigationContainer, so I cant bind the page with the view model nor I can call it from my navigation stacks.
I have found two or three posts about this matter, but all of them were outdated (from 2016 or 2017) and they did not have a way to implement carousel pages using Fresh MVVM.
With this said, is there any way to implement a carousel page in 2020 or it is still impossible?
As CarouselView is control available in Xamarin.Forms 4.4, you can use it like any other Xamarin control including in Fresh MVVM.

Xamarin fixed navigation bar

How can I have a fixed footer like Instagram through multiple pages in a xamarin forms app without determining it on every page?
I find out I can use a nuget package to make this like a tapped page but it makes me write all the codes in one page like this:
https://www.youtube.com/watch?v=Cp_2F621Az0
how can I implement this more efficiently
In this cenario I suggest you use Tabbed Page. Because the tabs will are part down in your app.
In this link you can read and understand how works a tabbed page:
https://developer.xamarin.com/samples/xamarin-forms/Navigation/TabbedPageWithNavigationPage/

Xamarin Forms with Prism MasterDetail navigation

I have started building an app on Xamarin Studio using Prism with Xamarin.Forms. My issue is that I can't seem to find a snippet of code as an example of MasterDetail navigation inside the app.
Every time I navigate to a page it just renders a new view on top of the previous master view. Is there an example somewhere, or instructions on how to use switchable views in order to achieve master/detail navigation with prism on xamarin? I have found some prism examples for windows forms applications but nothing specific to xamarin forms.
Thank you in advance and sorry for the generalized question.
Check out the sandbox sample that is in the Prism repo.. It's actually quite simple.
https://github.com/PrismLibrary/Prism/tree/master/Sandbox/Xamarin/HelloWorld
You just have to call navigate from your MasterDetilPage ViewModel. This will set the Detail page accordingly.

slide content in on button click

I have sign up and sign in layout files (both with form elements on them), a home page (Main.axml) with a two buttons which each setContentView() to their particular layout. When you click the sign up button the signup layout should slide in from the right all the way, covering the home page and the same for the sign in page. Almost setting new content view but the view slide in all the way like Spotify login/signup on their app.
Which component am I best using, viewPage, DialogFragment, hidden content with animation? What do you guys think is best?
Best example I want to follow is Spotify's app home page when you have yet to sign up/in.
You are greeted by a screen with two buttons, login/signup. Say for example you click the signup then the signup page slides in from the right fully covering the main screen.
Image below demonstrates:
How can I duplicate this with Android built in Xamarin C#?
Have a look at "Navigation Drawer". Hope it helps you.
Navigation Drawer - Android Developer
Navigation Drawer - Xamarin

Categories

Resources