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>
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 trying to create the following effect in my Xamarin Forms 5 app and I need some guidance on how to achieve it.
In my flyout footer, I want to display two icons. One of them is the settings icon and when the user taps it, I want to send the user to a tabbed page -- see below:
How do I define tabs in my AppShell footer and tie them to this icon?
Here's my AppShell:
<TabBar>
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</TabBar>
<FlyoutItem Title="Home">
<FlyoutItem.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource HomeIcon}"
Color="White" />
</FlyoutItem.Icon>
<Tab Title="Feed">
<ShellContent Route="Feed" ContentTemplate="{DataTemplate home:Feed}"/>
</Tab>
<Tab Title="Products">
<ShellContent Route="Products" ContentTemplate="{DataTemplate home:Products}"/>
</Tab>
<Tab Title="History">
<ShellContent Route="History" ContentTemplate="{DataTemplate home:History}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="School">
<FlyoutItem.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource SchoolIcon}"
Color="White" />
</FlyoutItem.Icon>
<Tab Title="Courses">
<ShellContent Route="Courses" ContentTemplate="{DataTemplate school:Courses}"/>
</Tab>
</FlyoutItem>
<Shell.FlyoutFooterTemplate>
<DataTemplate>
<Grid RowDefinitions="120" ColumnDefinitions="150, 150">
<Image
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="StartAndExpand"
Margin="50,0,0,0">
<Image.Source>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource SettingsIcon}"
Color="White"/>
</Image.Source>
</Image>
<Image
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="EndAndExpand"
Margin="0,0,30,0">
<Image.Source>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource PowerIcon}"
Color="White"/>
</Image.Source>
</Image>
</Grid>
</DataTemplate>
</Shell.FlyoutFooterTemplate>
IntelliSense is not allowing me to define <Tab>'s inside a <Grid>. How do I link this icon to tabs?
I think this is what your are looking for .
First use Image.GestureRecognizers
For the showing of the FLyout in Settings use Shell.Current.FlyoutIsPresented = false;
The easy way to use Tabs in the Settings if you want is to use a TabbedPage
And for the Tabs in Settings.xaml Shell.TabBarIsVisible="False"
AppShell.xaml
<Shell.FlyoutFooterTemplate>
<DataTemplate>
<Grid RowDefinitions="30" ColumnDefinitions="150, 150">
<Image
Grid.Row="0"
Grid.Column="0"
Source="Settings.png"
HorizontalOptions="StartAndExpand"
Margin="50,0,0,0"
>
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Image
Grid.Row="0"
Grid.Column="1"
Source="Power.png"
HorizontalOptions="EndAndExpand"
Margin="0,0,30,0">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped_1"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</DataTemplate>
</Shell.FlyoutFooterTemplate>
AppShell.xaml.cs
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
Routing.RegisterRoute(nameof(Settings), typeof(Settings));
await Shell.Current.GoToAsync("Settings");
Shell.Current.FlyoutIsPresented = false;
}
Add Clicked event to the image.
<Image
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="EndAndExpand"
Margin="0,0,30,0">
<Image.Source>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource PowerIcon}"
Color="White"/>
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnImageNameTapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
then in the xaml.cs , after creating your tabbedpage with your three tabs
void OnImageNameTapped(object sender, EventArgs args)
{
try
{
await Navigation.PushAsync(new TabbedPage1());
// or await Application.Current.MainPage.Navigation.PushAsync(new TabbedPage1());
}
catch (Exception ex)
{
throw ex;
}
}
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?
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