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>
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>
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 working on a Xamarin Forms app and my problem consists on two factors:
I need the login page as startup page. If I set CurrentItem="{x:Reference homeTab} (or loginTab), the bottom TabBar no longer appears on any page. Currently it's hidden only on login and even if I set Shell.TabBarIsVisible="True" on the home page it won't appear. Also, removing the CurrentItem line will make it visible again.
How can I set click events on the TabBar? I need to have some logic behind it and not only navigate to a specific route.
Below is my shell 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:local="clr-namespace:PlusErp.Wms.Mobile.Views"
xmlns:resources="clr-namespace:PlusErp.Wms.Mobile.Resources"
Title="PlusErp.Wms.Mobile"
x:Class="PlusErp.Wms.Mobile.AppShell"
CurrentItem="{x:Reference homeTab}"
>
<!--
The overall app visual hierarchy is defined here, along with navigation.
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<TabBar>
<ShellContent Title="{x:Static resources:AppResources.Back}" Icon="arrow_left.png" ContentTemplate="{DataTemplate local:HomePage}" />
<ShellContent x:Name="loginTab" Title="{x:Static resources:AppResources.Logout}" Icon="logout.png" Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
<ShellContent x:Name="homeTab" Title="{x:Static resources:AppResources.Home}" Icon="home.png" Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" />
<ShellContent Title="{x:Static resources:AppResources.InfoStock}" Icon="search.png" ContentTemplate="{DataTemplate local:LoginPage}" />
<ShellContent Title="{x:Static resources:AppResources.Forward}" Icon="arrow_right.png" Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</TabBar>
</Shell>
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>
I'm writing a xamarin app that targets Android, iOS, and UWP.
We're using the shell stack for routing and have a bottom bar with some flyout items.
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:views="clr-namespace:CADLearning.App.Views"
xmlns:user="clr-namespace:CADLearning.App.Views.User"
xmlns:controls="clr-namespace:CADLearning.App.Controls"
xmlns:services="clr-namespace:CADLearning.App.Services"
BackgroundColor="{DynamicResource HeaderBackgroundColor}"
FlyoutBackgroundColor="{DynamicResource HeaderBackgroundColor}"
x:Name="this"
x:Class="CADLearning.App.AppShell">
<!--
Styles and Resources
-->
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{DynamicResource BackgroundColor}" />
<Setter Property="Shell.ForegroundColor" Value="{DynamicResource ForegroundColor}" />
<Setter Property="Shell.TitleColor" Value="{DynamicResource ForegroundColor}" />
<Setter Property="Shell.DisabledColor" Value="{DynamicResource DisabledForegroundColor}" />
<Setter Property="Shell.UnselectedColor" Value="{DynamicResource UnselectedForegroundColor}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource HeaderBackgroundColor}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{DynamicResource OrangeColor}"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="{DynamicResource UnselectedForegroundColor}"/>
<Setter Property="Shell.TabBarTitleColor" Value="{DynamicResource OrangeColor}"/>
</Style>
<Style TargetType="Tab" BasedOn="{StaticResource BaseStyle}" />
<Style x:Key="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="16"/>
<Setter Property="TextColor" Value="{DynamicResource ForegroundColor}"/>
<Setter Property="VerticalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
<controls:FlyoutHeader />
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
<DataTemplate>
<StackLayout Padding="5,15,5,0" Orientation="Horizontal">
<Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
<Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.ItemTemplate>
<Shell.MenuItemTemplate>
<DataTemplate>
<StackLayout Padding="5,15,5,0" Orientation="Horizontal">
<Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
<Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.MenuItemTemplate>
<!--Actual Items-->
<FlyoutItem Title="Home" Icon="home.png" Route="home">
<Tab Title="Dashboard" Icon="workflow.png" Route="dashboard">
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}"/>
</Tab>
<Tab Title="Roles & Goals" Icon="goal.png" Route="goals">
<ShellContent ContentTemplate="{DataTemplate views:GoalsPage}"/>
</Tab>
<Tab Title="Library" Icon="library.png" Route="library">
<ShellContent ContentTemplate="{DataTemplate views:LibraryPage}"/>
</Tab>
<Tab Title="Playlists" Icon="playlist.png" Route="playlists">
<ShellContent ContentTemplate="{DataTemplate views:PlaylistsPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="Support" Icon="Q.png" Route="support">
<ShellContent ContentTemplate="{DataTemplate views:QPage}"/>
</FlyoutItem>
<FlyoutItem Title="Settings" Icon="settings.png" Route="user">
<Tab Title="Settings" Icon="settings.png" Route="settings">
<ShellContent ContentTemplate="{DataTemplate user:SettingsPage}"/>
</Tab>
<Tab Title="Transcript" Icon="transcript.png" Route="transcript">
<ShellContent ContentTemplate="{DataTemplate user:TranscriptPage}"/>
</Tab>
</FlyoutItem>
<MenuItem Text="Logout" Icon="login.png" x:Name="miLogout" Clicked="miLogout_Clicked"/>
</Shell>
on Android and iOS this works okay and the bottom tabbed items display.
However in UWP they don't display unless you hover over them
Could anyone point me in the right direction on getting this to work in UWP?