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>
Related
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;
}
}
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}" />
...
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>
I'm using Shell with buttom nav and want to be able to have one of the tabs as a TabbedPage. Also one of my contentpages in Shell have a toolbar item which leads to a tabbedpage, this also does not work in iOS, but both working fine in Android.
What I mean by not working is that even though I set the background color to white, I just get a black "blank-screen", I see nothing.
I tried to create a new TabbedPage, same issue, tryed the newest 3.6 forms release and also the 4.0 beta 9pre release, still same issue.
Update
Here is my tabbedpage:
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Page.TabbedPageTest"
BackgroundColor="White">
<!--Pages can be added as references or inline-->
<ContentPage Title="Tab 1" BackgroundColor="White">
<Label Text="Label in tab 1" TextColor="Orange" />
</ContentPage>
<ContentPage Title="Tab 2" BackgroundColor="White">
<Label Text="Label in tab 2" TextColor="Orange" />
</ContentPage>
<ContentPage Title="Tab 3" BackgroundColor="White">
<Label Text="Label in tab 3" TextColor="Orange" />
</ContentPage>
</TabbedPage>
Here is where I load it:
<ShellItem>
<ShellSection Title="PageOne" Icon="ic_action_myicon1.png">
<ShellContent ContentTemplate="{DataTemplate local:MyListView}" />
</ShellSection>
<ShellSection Title="PageTwo" Icon="ic_action_myicon2.png">
<ShellContent ContentTemplate="{DataTemplate local:MyContentPage}" />
</ShellSection>
<ShellSection Title="PageThree" Icon="ic_action_myicon3.png">
<ShellContent ContentTemplate="{DataTemplate local:TabbedPageTest}"/>
</ShellSection>
</ShellItem>
The listview and contentPage works fine. The TabbedPage are just black from top to buttom.