I want to have a Tab Bar and a Drawer in the form
In this form I use Shell
I do not intend to display any Tabbar items in Drawer
now
I created the Tabbar at the bottom of the page once with the following code:
<TabBar Title="Tab bar FlyoutItem" FlyoutDisplayOptions="AsSingleItem" >
<Tab Title="T1" Icon="T1.png" >
<ShellContent ContentTemplate="{DataTemplate views: page1}" />
</Tab>
<Tab Title="T2" Icon="T2.png" >
<ShellContent ContentTemplate="{DataTemplate views: page2}"/>
</Tab>
<Tab Title="T3" Icon="T3.png" >
<ShellContent ContentTemplate="{DataTemplate views: page3}"/>
</Tab>
<Tab Title="T4" Icon="T4.png" >
<ShellContent ContentTemplate="{DataTemplate views: page4}"/>
</Tab>
<Tab Title="T5" Icon="Home.png" >
<ShellContent ContentTemplate="{DataTemplate views: page5}"/>
</Tab>
</TabBar>
Output :
View image
And once again I used Flyout instead of tabbar (code below):
< FlyoutItem Title=”Tab bar FlyoutItem” FlyoutDisplayOptions=”AsSingleItem” >
<Tab Title=”T1” Icon=”T1.png” >
<ShellContent ContentTemplate=”{DataTemplate views: page1}” />
</Tab>
<Tab Title=”T2” Icon=”T2.png” >
<ShellContent ContentTemplate=”{DataTemplate views: page2}”/>
</Tab>
<Tab Title=”T3” Icon=”T3.png” >
<ShellContent ContentTemplate=”{DataTemplate views: page3}”/>
</Tab>
<Tab Title=”T4” Icon=”T4.png” >
<ShellContent ContentTemplate=”{DataTemplate views: page4}”/>
</Tab>
<Tab Title=”T5” Icon=”Home.png” >
<ShellContent ContentTemplate=”{DataTemplate views: page5}”/>
</Tab>
</ FlyoutItem >
OUTPUT :
View image
I created the Drawer using the following code :
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="T6" Icon="email.png" >
<ShellContent ContentTemplate="{DataTemplate views:page6}" />
</Tab>
<Tab Title="T7" Icon="email.png" >
<ShellContent ContentTemplate="{DataTemplate views:page7}"/>
</Tab>
<Tab Title="T8" Icon="email.png" >
<ShellContent ContentTemplate="{DataTemplate views:page8}"/>
</Tab>
<Tab Title="T9" Icon="email.png" >
<ShellContent ContentTemplate="{DataTemplate views:page9}"/>
</Tab>
</FlyoutItem>
This time Drawer is displayed but its Title Of Tabbar is also displayed in Drawer as shown in the figure.
OUTPUT :
View image
Please help me how I can not display the Title in Drawer.
Thank
I'M find
The
Shell.FlyoutBehavior="Flyout"
must be added to the TabBar
I share the code below :
<TabBar Title="Tab bar FlyoutItem" Shell.FlyoutBehavior="Flyout" FlyoutDisplayOptions="AsSingleItem" >
<Tab Title="T1" Icon="T1.png" >
<ShellContent ContentTemplate="{DataTemplate views:T1}" />
</Tab>
<Tab Title="T2" Icon="T2.png" >
<ShellContent ContentTemplate="{DataTemplate views:T2}"/>
</Tab>
<Tab Title="T3" Icon="T3.png" >
<ShellContent ContentTemplate="{DataTemplate views:T3}"/>
</Tab>
<Tab Title="T4" Icon="T4.png" >
<ShellContent ContentTemplate="{DataTemplate views:T4}"/>
</Tab>
<Tab Title="T5" Icon="Home.png" >
<ShellContent ContentTemplate="{DataTemplate views:HomePage}"/>
</Tab>
</TabBar>
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems" Shell.TabBarIsVisible="True">
<Tab Title="T6" Icon="email.png" >
<ShellContent ContentTemplate="{DataTemplate views:T6}" />
</Tab>
<Tab Title="T7" Icon="email.png" >
<ShellContent ContentTemplate="{DataTemplate views:T7}"/>
</Tab>
<Tab Title="T8" Icon="email.png" >
<ShellContent ContentTemplate="{DataTemplate views:T8}"/>
</Tab>
<Tab Title="T9" Icon="email.png" >
<ShellContent ContentTemplate="{DataTemplate views:T9}"/>
</Tab>
</FlyoutItem>
Related
I'm experimenting with TabbedPage and Shell in MAUI to create Horizontally scrollable tabs. I have got the expected behavior but in Android it shows a blank white space at top of Tabs and in iOS it shows Bar with a title of Tab Selected. I have attached a screenshot of Android.
Any one know how to remove it?
Code I have created:
Note: here page: are Content pages I have created in TabPages folder in project
MainPage.xaml
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Tyler.Energov.Mobile.EH.UI.InspectionOverview.InspectionOverviewPage"
xmlns:page="clr-namespace:Tyler.Energov.Mobile.EH.UI.InspectionOverview.TabPages"
Title="InspectionOverviewPage">
<Shell FlyoutBehavior="Disabled" FlyoutHeaderBehavior="Default">
<FlyoutItem Title="Abc">
<Tab>
<ShellContent Title="Parent record" ContentTemplate="{DataTemplate page:ParentRecordPage}"/>
<ShellContent Title="Additional info" ContentTemplate="{DataTemplate page:AdditionalInfoPage}"/>
<ShellContent Title="Contacts" ContentTemplate="{DataTemplate page:ContactsPage}"/>
<ShellContent Title="Previous inspections" ContentTemplate="{DataTemplate page:PreviousInspectionPage}"/>
<ShellContent Title="Attachments" ContentTemplate="{DataTemplate page:AttachmentsPage}"/>
</Tab>
</FlyoutItem>
</Shell>
</TabbedPage>
Tab Background color and Text color I have updated from the Style.xaml
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
<Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
<Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
</Style>
Output:
You can use the Shell as the root element.
I created a demo and achieved this function.
You can refer to the following code:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="TabedPageDemo.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TabedPageDemo"
xmlns:pages="clr-namespace:TabedPageDemo.Pages"
Shell.FlyoutBehavior="Disabled">
<TabBar>
<Tab Title="Test"
Icon="icon.png">
<ShellContent Title="Parent Record"
ContentTemplate="{DataTemplate pages:DiscoverPage}" />
<ShellContent Title="Additional Info"
ContentTemplate="{DataTemplate pages:AdditionalInfoPage}" />
<ShellContent Title="Contacts"
ContentTemplate="{DataTemplate pages:EpisodeDetailPage}" />
<ShellContent Title="Previous Inspection"
ContentTemplate="{DataTemplate pages:CategoriesPage}" />
<ShellContent Title="Attachements"
ContentTemplate="{DataTemplate pages:DiscoverPage}" />
<ShellContent Title="Updated Inspection"
ContentTemplate="{DataTemplate pages:ShowDetailPage}" />
<ShellContent Title="Inspector Profile"
ContentTemplate="{DataTemplate pages:EpisodeDetailPage}" />
<ShellContent Title="About us"
ContentTemplate="{DataTemplate pages:CategoriesPage}" />
</Tab>
</TabBar>
</Shell>
I'm currently trying to achieve a navigation with Xamarin.Forms Shell with a flyout menu containing certain routes and a tab bar containing others.
For example when i'm arriving on HomePage, i have my flyout menu who need to contain as FlyoutItem my HomePage and other items and as tabbar Test1 Test2 and Test3 constantly:
And when my Flyout is open i want to only have Home or some specific flyout items with menu items:
From now i successfully arrived to mask the tabbar items from flyout menu but i don't arrive to do the opposite to mask the Home flyoutItem from tabbar.
I tried to pass it to IsVisible False and making an menuItem with manual navigation on Commands but the route isn't found anymore in this specific cases.
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Title="Home" Route="HomePage" ContentTemplate="{DataTemplate view:HomePage}" IsTabStop="False">
<ShellContent.Icon>
<FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.House}"/>
</ShellContent.Icon>
</ShellContent>
<ShellContent Title="Test1" Route="CoursePage" ContentTemplate="{DataTemplate view:CoursePage}" FlyoutItemIsVisible="False">
<ShellContent.Icon>
<FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.Barcode}"/>
</ShellContent.Icon>
</ShellContent>
<ShellContent Title="Test2" Route="StudentMonitoringPage" ContentTemplate="{DataTemplate view:StudentMonitoringPage}" FlyoutItemIsVisible="False">
<ShellContent.Icon>
<FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.GraduationCap}"/>
</ShellContent.Icon>
</ShellContent>
<ShellContent Title="Test3" Route="AvailableOffersPage" ContentTemplate="{DataTemplate view:AvailableOffersPage}" FlyoutItemIsVisible="False">
<ShellContent.Icon>
<FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.GraduationCap}"/>
</ShellContent.Icon>
</ShellContent>
</FlyoutItem>
<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to -->
<!--<MenuItem Text="Accueil" StyleClass="MenuItemLayoutStyle" Command="{Binding RedirectionCommand}" CommandParameter="{x:Static viewmodels:ShellViewModel+NavigationPages.Home}">
<MenuItem.IconImageSource>
<FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.House}"/>
</MenuItem.IconImageSource>
</MenuItem>-->
<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Command="{Binding LogoutCommand}">
<MenuItem.IconImageSource>
<FontImageSource FontFamily="FASolid" Color="Black" Glyph="{x:Static fa:FontAwesomeIcons.PowerOff}"/>
</MenuItem.IconImageSource>
</MenuItem>
<!--
TabBar lets you define content that won't show up in a flyout menu. When this content is active
the flyout menu won't be available. This is useful for creating areas of the application where
you don't want users to be able to navigate away from. If you would like to navigate to this
content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
-->
<TabBar>
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate view:LoginPage}"/>
</TabBar>
From now i'm currently here, what i'm tried is to put the HomePage into tabBar then navigate by the MenuItem but in that case tabbar and flyout doesn't display.
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="About" />
<FlyoutItem>
<ShellContent Title="Account" ContentTemplate="{DataTemplate local:AccountPage}" />
<ShellContent Title="Browser" ContentTemplate="{DataTemplate local:BrowserPage}" />
</FlyoutItem>
Code behind:
public partial class AppShell : Xamarin.Forms.Shell
{
public AppShell()
{
InitializeComponent();
Routing.RegisterRoute("about", typeof(AboutPage));
BindingContext = this;
}
public ICommand AboutCommand => new Command(async () => await NavigatedToAccount());
async Task NavigatedToAccount()
{
await Shell.Current.GoToAsync("about");
Shell.Current.FlyoutIsPresented = false;
}
}
The icons I set for tabs in my Xamarin Forms 5 app work perfectly in Android but in iOS they're way too small.
I define them in the Shell -- see below:
<FlyoutItem Title="Home">
<FlyoutItem.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource HomeIcon}"
Color="White" />
</FlyoutItem.Icon>
<Tab Title="Tab 1">
<Tab.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource NewspaperIcon}"
Color="{StaticResource SecondaryDark}"
Size="15"/>
</Tab.Icon>
<ShellContent Route="News" ContentTemplate="{DataTemplate home:News}" />
</Tab>
<Tab Title="Contacts">
<Tab.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource ContactsIcon}"
Color="{StaticResource SecondaryDark}"
Size="15"/>
</Tab.Icon>
<ShellContent Route="Contacts" ContentTemplate="{DataTemplate home:Contacts}" />
</Tab>
<Tab Title="Settings">
<Tab.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource SettingsIcon}"
Color="{StaticResource SecondaryDark}"
Size="15"/>
</Tab.Icon>
<ShellContent Route="Settings" ContentTemplate="{DataTemplate home:Settings}" />
</Tab>
</FlyoutItem>
I can simply increase the Size=15 to something larger but then icons will get larger on Android as well.
How do I make sure the tab icons appear large enough on both platforms?
UPDATE:
I tried OnPlatform as follows but I keep getting an error that reads:
Property 'Size' does not support values of type 'OnPlatform'1 (Size)
Here's how I implemented OnPlatform:
<Tab Title="Tab 1">
<Tab.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource NewspaperIcon}"
Color="{StaticResource SecondaryDark}">
<FontImageSource.Size>
<OnPlatform x:TypeArguments="Size">
<On Platform="Android">15</On>
<On Platform="iOS">25</On>
</OnPlatform>
</FontImageSource.Size>
</FontImageSource>
</Tab.Icon>
<ShellContent Route="News" ContentTemplate="{DataTemplate home:News}" />
</Tab>
<FontImageSource.Size>
<OnPlatform x:TypeArguments="Double">
<On Platform="Android">15</On>
<On Platform="iOS">25</On>
</OnPlatform>
</FontImageSource.Size>
I'm using Shell on a Xamarin Forms app and the icons that I'm using on the TabBar are a little bit too high up
I would like to change their positions to the center but I can't find a way how.
How would I change the positions/alignment of the icons?
TabPage xaml
<!--TabBar Styles and Resources-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="FreeStyle" TargetType="Element">
<Setter Property="Shell.TabBarBackgroundColor" Value="#f7f7f7" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#999999"/>
<Setter Property="Shell.TabBarTitleColor" Value="#61c9f7"/>
</Style>
</ResourceDictionary>
</Shell.Resources>
<!--BluePill Pages-->
<TabBar Style="{StaticResource FreeStyle}">
<!--TeleMED Tab-->
<Tab Icon="telemedicineIcon.png">
<ShellContent ContentTemplate="{DataTemplate views:TelemedicineMainPage}"/>
</Tab>
<!--Fleming Tab-->
<Tab Icon="chatbotIcon.png">
<ShellContent ContentTemplate="{DataTemplate views:ChatbotPage}"/>
</Tab>
<!--FirstAid Tab-->
<Tab Icon="firstaidIcon.png">
<ShellContent ContentTemplate="{DataTemplate views:FirstAidPage}"/>
</Tab>
<!--User Profile Tab-->
<Tab Icon="profileIcon.png">
<ShellContent ContentTemplate="{DataTemplate views:UserProfilePage}"/>
</Tab>
</TabBar>
I would like to make my app have three flyout menu options as follows:
Configuration
Collect Data
About
When a user selects the Configuration flyout menu option, I would like there to be a bottom group of two tabs that say
Network Configuration ------ Data Configuration
I only want the bottom tabs visible when the Configuration flyout menu option is selected. Is there a way to do this in Xaml or do I need to do it in code manually showing and hiding the bottom tabs?
Yes, you can do it in Xaml. You can define differnet ShellContent in each FlyoutItem.
Create a new project with Shell template and then add those codes to config shell:
<Shell.FlyoutHeader>
<Grid BackgroundColor="Black">
<Label Text="Test"
TextColor="White"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</Grid>
</Shell.FlyoutHeader>
<FlyoutItem Title="Configuration"
>
<ShellContent Title="Network Configuration">
<views:NetworkConfiguration />
</ShellContent>
<ShellContent Title="Data Configuration">
<views:DataConfiguration />
</ShellContent>
</FlyoutItem>
<FlyoutItem Title="Collect Data"
>
<Tab>
<ShellContent Title="Configuration"
ContentTemplate="{DataTemplate views:Page2}" />
<ShellContent Title="Collect Data"
ContentTemplate="{DataTemplate views:Page3}" />
</Tab>
</FlyoutItem>
<FlyoutItem Title="About">
<ShellContent ContentTemplate="{DataTemplate views:AboutPage}" />
</FlyoutItem>
You can refer this example: shell-example-xamarin.forms