It is possible to make sure that the (Dashboard / Statistics) tab remains fixed without being modified by the various FlyoutItem choices? thanks
image
<TabBar>
<Tab Title="Dasboard">
<Tab.Icon>
<FontImageSource FontFamily="{StaticResource FontAwesomeSolid}"
Glyph="{StaticResource IconHome}"
Color="Black"/>
</Tab.Icon>
<ShellContent Route="HomePage" ContentTemplate="{DataTemplate _v:AccountPage}" />
</Tab>
<Tab Title="Statistiche">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate _v:AccountPage}" />
</Tab>
</TabBar>
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Title="Online Store" Icon="ic_online_store" ContentTemplate="{DataTemplate _v:AccountPage}" />
<ShellContent Title="About Us" Icon="ic_about_us" ContentTemplate="{DataTemplate _v:AccountPage}" />
<ShellContent Title="Contact Us" Icon="ic_contact_us" ContentTemplate="{DataTemplate _v:AccountPage}" />
<ShellContent Title="Sign In" Icon="ic_login" Route="LoginPage" ContentTemplate="{DataTemplate _v:AccountPage}" />
</FlyoutItem>
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Title="Test1" Icon="ic_online_store" ContentTemplate="{DataTemplate _v:AccountPage}" />
<ShellContent Title="Test2" Icon="ic_about_us" ContentTemplate="{DataTemplate _v:AccountPage}" />
</FlyoutItem>
You could use the MenuItem to show the items in the Flyout. And use the FlyoutItem to show the tabs in the bottom tabbar without setting the FlyoutDisplayOptions property to AsMultipleItems.
The MenuItem would show the item in flyout and the items in FlyoutItem would show in the bottom tabbar.
<MenuItem
Command="{Binding AboutCommand}"
Icon="tab_about.png"
Text="Online Store" />
<FlyoutItem>
<ShellContent Title="Dasboard" ContentTemplate="{DataTemplate _v:AccountPage}" />
<ShellContent Title="Statistiche" ContentTemplate="{DataTemplate _v:AccountPage}" />
</FlyoutItem>
Code behind:
public partial class AppShell : Xamarin.Forms.Shell
{
public AppShell()
{
InitializeComponent();
Routing.RegisterRoute("account", typeof(AccountPage));
BindingContext = this;
}
public ICommand AboutCommand => new Command(async () => await NavigatedToAccount());
async Task NavigatedToAccount()
{
await Shell.Current.GoToAsync("account");
Shell.Current.FlyoutIsPresented = false;
}
}
Related
In this example,
enter image description here
click the item item to jump to the detail page,
enter image description here
but I don't want to display the bottom tab on the total page. I used [shell. Current. Navigation. Pushmodal async], but the result is that it doesn't realize the top navigation bar. Now I want to ask how to jump to display the top navigation bar without displaying the bottom tab
some code:
<FlyoutItem Route="animals"
FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="Domestic"
Route="domestic"
Icon="paw.png">
<ShellContent Route="cats"
Style="{StaticResource DomesticShell}"
Title="Cats"
Icon="cat.png"
ContentTemplate="{DataTemplate views:CatsPage}" />
<ShellContent Route="dogs"
Style="{StaticResource DomesticShell}"
Title="Dogs"
Icon="dog.png"
ContentTemplate="{DataTemplate views:DogsPage}" />
</Tab>
<ShellContent Route="monkeys"
Style="{StaticResource MonkeysShell}"
Title="Monkeys"
Icon="monkey.png"
ContentTemplate="{DataTemplate views:MonkeysPage}" />
<ShellContent Route="elephants"
Style="{StaticResource ElephantsShell}"
Title="Elephants"
Icon="elephant.png"
ContentTemplate="{DataTemplate views:ElephantsPage}" />
<ShellContent Route="bears"
Style="{StaticResource BearsShell}"
Title="Bears"
Icon="bear.png"
ContentTemplate="{DataTemplate views:BearsPage}" />
</FlyoutItem>
and
await Shell.Current.GoToAsync($"//animals/monkeys/monkeydetails?name={monkeyName}");
Now I want to ask how to jump to display the top navigation bar
without displaying the bottom tab
The simplest method is to add following code for your detail page:
Shell.TabBarIsVisible="False"
The whole sample code is:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xaminals.Views.ElephantDetailPage"
Shell.TabBarIsVisible="False"
Title="Elephant Details">
<ScrollView>
<StackLayout Margin="20">
<!--other code-->
</StackLayout>
</ScrollView>
</ContentPage>
I'm using the Xamarin.Form Shell
Link Sample: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout
Please help me. How to show the Tabbar in the About page?
The source code of AppShell.xaml
<FlyoutItem Route="animals"
Title="Animals"
FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Route="bears"
Style="{StaticResource BearsShell}"
Title="Bears"
Icon="bear.png"
ContentTemplate="{DataTemplate views:BearsPage}" />
</FlyoutItem>
<ShellContent Route="about"
Style="{StaticResource AboutShell}"
Title="About"
Icon="info.png"
ContentTemplate="{DataTemplate views:AboutPage}" />
...
I'm trying to convert my Xamarin.Forms app from a MasterDetailPage with Menu and TabPage to the new Xamarin.Forms Shell.
I'm trying to move the tabs to the bottom. I also want them to look the same as the TabPage ones. Is this event possible with the basic Shell XAML layout?
AppShell.xaml:
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-MyApp.Views"
xmlns:volDash="clr-MyApp.Views.VolDash"
x:Class="MyApp.AppShell">
<FlyoutItem Title="Dashboard 1" FlyoutDisplayOptions="AsSingleItem">
<Tab>
<ShellContent Title="Signups" Icon="ic_assignment.png">
<volDash:SignupsPage />
</ShellContent>
<ShellContent Title="Events" Icon="ic_event.png">
<volDash:AreasPage />
</ShellContent>
<ShellContent Title="Mailbox" Icon="ic_mail_outline.png">
<volDash:MailboxPage />
</ShellContent>
<ShellContent Title="Rankings" Icon="fa_trophy.png">
<volDash:MyRankingsPage />
</ShellContent>
<ShellContent Title="Videos" Icon="ic_ondemand_video.png">
<volDash:TrainingVideoCategoriesPage />
</ShellContent>
</Tab>
</FlyoutItem>
<FlyoutItem Title="Dashboard 2" FlyoutDisplayOptions="AsSingleItem">
<Tab>
<ShellContent Title="Tab 1" Icon="ic_assignment.png">
<volDash:SignupsPage />
</ShellContent>
<ShellContent Title="Tab 2" Icon="ic_event.png">
<volDash:AreasPage />
</ShellContent>
</Tab>
</FlyoutItem>
<ShellContent Title="Account" Icon="ic_account_box_white.png">
<views:AccountPage />
</ShellContent>
</Shell>
One alternative I found is to call a TabPage from the FlyoutItem. The tabs are shown properly at the bottom. However, I end up with an ugly gap at the top.
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-MyApp.Views"
xmlns:volDash="clr-MyApp.Views.VolDash"
x:Class="MyApp.AppShell">
<FlyoutItem Title="Volunteer Dashboard" FlyoutDisplayOptions="AsSingleItem">
<ShellContent Title="Videos" Icon="ic_account_box_white.png">
<views:VolunteerDashboardPage />
</ShellContent>
</FlyoutItem>
<FlyoutItem Title="Organizer Dashboard" FlyoutDisplayOptions="AsSingleItem">
<ShellContent Title="Videos" Icon="ic_account_box_white.png">
<views:OrganizerDashboardPage />
</ShellContent>
</FlyoutItem>
<ShellContent Title="Account" Icon="ic_account_box_white.png">
<views:AccountPage />
</ShellContent>
</Shell>
You can not using Tab style to define the FlyoutItem . The Tab in Shell Apllication will be different with the tab of Tabbed Page .
The Tab and ShellContent defined as follow in Shell Application .
Tab, which represents grouped content, navigable by bottom tabs. Every Tab object is a child of a FlyoutItem object or a TabBar object.
ShellContent, which represents the ContentPage objects in your application. Every ShellContent object is a child of a Tab object. When more than one ShellContent object is present in a Tab, the objects will be navigable by top tabs.
Therefore , here you can modify shared code as follow to have a try :
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-MyApp.Views"
xmlns:volDash="clr-MyApp.Views.VolDash"
x:Class="MyApp.AppShell">
<FlyoutItem Title="Dashboard 1" FlyoutDisplayOptions="AsSingleItem">
<ShellContent Title="Signups" Icon="ic_assignment.png">
<volDash:SignupsPage />
</ShellContent>
<ShellContent Title="Events" Icon="ic_event.png">
<volDash:AreasPage />
</ShellContent>
<ShellContent Title="Mailbox" Icon="ic_mail_outline.png">
<volDash:MailboxPage />
</ShellContent>
<ShellContent Title="Rankings" Icon="fa_trophy.png">
<volDash:MyRankingsPage />
</ShellContent>
<ShellContent Title="Videos" Icon="ic_ondemand_video.png">
<volDash:TrainingVideoCategoriesPage />
</ShellContent>
</FlyoutItem>
<FlyoutItem Title="Dashboard 2" FlyoutDisplayOptions="AsSingleItem">
<ShellContent Title="Tab 1" Icon="ic_assignment.png">
<volDash:SignupsPage />
</ShellContent>
<ShellContent Title="Tab 2" Icon="ic_event.png">
<volDash:AreasPage />
</ShellContent>
</FlyoutItem>
<ShellContent Title="Account" Icon="ic_account_box_white.png">
<views:AccountPage />
</ShellContent>
</Shell>
I am using Shell in my Xamarin forms application,
I have an issue when My user registers successfully he is redirected to Homepage, however there is no Tab Menu on the bottom while if I redirect him to AppShell the page is blank. Do you have any suggestions?
My redirection
await App.Current.MainPage.Navigation.PushModalAsync(new AppShell());
My AppShell
<TabBar >
<Tab x:Name="HomePage" Icon="home.png" Title="{x:Static resources:AppResources.LabelHome}" >
<ShellContent ContentTemplate="{DataTemplate views:HomePage}"/>
</Tab>
<Tab x:Name="Categories" Icon="collections.png " Title="{x:Static resources:AppResources.LabelCategory}">
<ShellContent ContentTemplate="{DataTemplate views:CategoriesPage}"/>
</Tab>
<Tab x:Name="Add" Icon="add.png" Title="{x:Static resources:AppResources.LabelAddingPage}">
<ShellContent ContentTemplate="{DataTemplate views:AddingPage}"/>
</Tab>
<Tab x:Name="Inbox" Icon="mail.png" Title="{x:Static resources:AppResources.LabelInbox}" >
<ShellContent ContentTemplate="{DataTemplate views:InboxPage}"/>
</Tab>
<Tab x:Name="Profile" Icon="userg.png" Title="{x:Static resources:AppResources.LabelProfil}">
<ShellContent ContentTemplate="{DataTemplate views:UserProfilePage}"/>
</Tab>
</TabBar>
And my app
public App()
{
InitializeComponent();
MainPage = new AppShell();
}
from your redirection await App.Current.MainPage.Navigation.PushModalAsync(new AppShell()); , i think you have another Shell Application just for your login.
try await App.Current.MainPage = new AppShell(); to initialize the Shell as your mainPage.
hope this helps ;)
You will have to make the following changes :-
Your redirection should be :-
await Shell.Current.GoToAsync("//main");
Your App Shell should have this :-
<TabBar Route="main">
...
</TabBar>
Hopefully this helps.
How to add items of type ShellContent dynamically with data binding considering the MVVM pattern. I want to bind a last of TabViewModels to the Tab.Items collection. NOT codebehind which I can not test.
Instead of the 6 ShellContent objects I want to bind any number during runtime.
MainPage.xaml
<FlyoutItem Route="animals"
Title="Animals"
FlyoutDisplayOptions="AsSingleItem">
<Tab Title="Domestic"
Route="domestic"
Icon="paw.png">
<Tab.Items>
<ShellContent Route="cats"
Style="{StaticResource DomesticShell}"
Title="sisi"
Icon="cat.png"
ContentTemplate="{DataTemplate views:CatsPage}" />
<ShellContent Route="dogs"
Style="{StaticResource DomesticShell}"
Title="Dogs"
Icon="dog.png"
ContentTemplate="{DataTemplate views:DogsPage}" />
<ShellContent Route="dogs"
Style="{StaticResource DomesticShell}"
Title="Dogs"
Icon="dog.png"
ContentTemplate="{DataTemplate views:DogsPage}" />
<ShellContent Route="dogs"
Style="{StaticResource DomesticShell}"
Title="Dogs"
Icon="dog.png"
ContentTemplate="{DataTemplate views:DogsPage}" />
<ShellContent Route="dogs"
Style="{StaticResource DomesticShell}"
Title="Dogs"
Icon="dog.png"
ContentTemplate="{DataTemplate views:DogsPage}" />
<ShellContent Route="dogs"
Style="{StaticResource DomesticShell}"
Title="Dogs"
Icon="dog.png"
ContentTemplate="{DataTemplate views:DogsPage}" />
</Tab.Items>
</Tab>
</FlyoutItem>
You can add property x:Name="myTab" for your Tab and use function void Add(T item); to add child item into your Tab.For example:
<FlyoutItem Route="animals" x:Name="mFlyoutItem"
Title="Animals"
FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="Domes.123"
Route="domestic"
x:Name="myTab"
Icon="paw.png">
<Tab.Items>
<ShellContent Route="cats"
Style="{StaticResource DomesticShell}"
Title="Cats"
Icon="cat.png"
ContentTemplate="{DataTemplate views:CatsPage}" />
<ShellContent Route="dogs"
Style="{StaticResource DomesticShell}"
Title="Dogs"
Icon="dog.png"
ContentTemplate="{DataTemplate views:DogsPage}" />
</Tab.Items>
</Tab>
</FlyoutItem>
Then add ShellContent in your code behind like this:
myTab.Items.Add(new DogsPage());
If you want to change the property of ShellContent(e.g. the Title), you can use following code:
ShellContent shellContent = new ShellContent();
shellContent.Content = new DogsPage();
shellContent.Title = "testTitle";
myTab.Items.Add(shellContent);
Update
For ShellContent.BindingContext , you can refer to this issue:https://github.com/xamarin/Xamarin.Forms/issues/6444
This bug has already been fixed,so we need to update Xamarin Form to the latest version.
The sample code is:
<TabBar>
<Tab >
<ShellContent >
<ShellContent.ContentTemplate>
<DataTemplate>
<local:Page1 BindingContext="{Binding Page1VM}"/>
</DataTemplate>
</ShellContent.ContentTemplate>
</ShellContent>
</Tab>
</TabBar>