I'm trying to add icons to my tabs with font awesome, in my Xamarin iOS/android app, I looked in many tutorials and I tried to do the same but something is wrong with the following code:
<TabbedPage.Children>
<mypages:List Title="Lista">
<Tab.Icon>
<FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Glyph="" Size="Small" />
</Tab.Icon>
</mypages:List>
</TabbedPage.Children>
Everything worked until I add the <Tab.Icon> Stuff.
The error you got is self-explanatory:
"The attachable property "Icon" was not found in type 'Tab' ", with <Tab.Icon> underlined.
There is no property called Icon in type Tab, you can use below but as you can see, it is IconImageSource which requires to provide a resource image name and not a font glyph.
<TabbedPage.Children>
<apptest:Page2 IconImageSource="imageName.png"/>
</TabbedPage.Children>
An alternative in order to use font icons would be to use Shell to build your tabs instead of TabbedPage, which provides font icon support thru FontImageSource:
<Shell>
...
<Tab Title="title">
<Tab.Icon>
<FontImageSource FontFamily="FontAwesome" Glyph="{x:Static fonts:IconFont.AddressBook}"/>
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate local:Page1}"/>
</Tab>
Details about fontawesome in xamarin.forms: How to use Font Awesome icons in project as an icon of ImageButton
Related
In my Xamarin Forms 5 app, I'm trying to add a ToolbarItem to a ContentPage which is a "child" of a TabbedPage but the ToolbarItem is not showing.
The key point here is that the app uses AppShell and the tabs are defined in AppShell.xaml which looks like this:
<FlyoutItem Title="Home">
<FlyoutItem.Icon>
<FontImageSource
FontFamily="MISHRP"
Glyph="{StaticResource HomeIcon}"
Color="White" />
</FlyoutItem.Icon>
<ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" />
</FlyoutItem>
And the home page has three tabs that point to ContentPage's:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
... // Removed for brevity>
<local:CommercialFeed Title="Feed" />
<local:PersonalCard Title="Card" />
<local:Vendors Title="Vendors" />
</TabbedPage>
I'm now adding a ToolbarItem in the "Vendors" page but it doesn't show. I read that I need to wrap main page in a NavigationPage.
I have two issues here:
Because I'm using AppShell, my code behind looks like this: MainPage = new AppShell();. So not sure how to handle this part. I tried MainPage = new NavigationPage(new AppShell()); but this created another issue -- see below -- and it also crashed the app.
I have a login page which is also defined in the AppShell. When I tried the above code, I got a nav bar on the login page as well and that's a problem. There shouldn't be a nav bar in the login page.
How do I handle this so that I can have ToolbarItems in my Vendors page? Thanks.
First, I believe it is a bad idea to mix Shell and the old TabbedPage (use either one of them), in my opinion it is better to change your ui structure from TabbedPage to a combination of Tabbar and Tab that both are within Shell Xamarin.Forms Shell tabs.
<TabBar>
<Tab Title="Feed">
<ShellContent Title="Feed" ContentTemplate="{DataTemplate local:CommercialFeed}"/>
</Tab>
<Tab Title="Cards">
<ShellContent Title="Cards" ContentTemplate="{DataTemplate PersonalCard}"/>
</Tab>
<Tab Title="Vendors">
<ShellContent Title="Vendors" ContentTemplate="{DataTemplate local:Vendors}"/>
</Tab>
</TabBar>
Now define ToolbarItems on each page:
<ContentPage.ToolbarItems>
<ToolbarItem Text="..." .../>
</ContentPage.ToolbarItems>
If you want to keep using TabbedPage anyway, check How to add toolbar item in TabbedPage in Xamarin Form
I'm trying to use font-awesome icon inside the TabView item. I am able to use this same code elsewhere in the page and it works fine. It just wont show any icon inside the tabview.
In my main.js:
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
'fa': './assets/css/font-awesome.css',
'ion': './ionicons.css'
};
TNSFontIcon.loadCss();
Vue.filter('fonticon', fonticon);
In App.vue:
<TabView class="tab-view" :selectedIndex="selectedIndex" androidTabsPosition="bottom">
<TabViewItem class="fa" :text="'fa-plane' | fonticon" >
<Label text="Content for Tab 1"/>
</TabViewItem>
<TabViewItem title="Tab 2">
<Label text="Content for Tab 2" #tap="pretextsTap()" />
</TabViewItem>
</TabView>
I'm using Nativescript Vue platform and couldn't find the example of using font-awesome icon inside the tabview item. In the first TabViewItem, I was trying to add fa-plane icon to see if I got it right. It didn't. I look forward to your tip.
Thanks.
Tab view items have a title property, not text.
Give :title="'fa-plane' | fonticon" a shot.
I already create a TabbedPage with 5 Tabs. The 5th Tab is called "More". In this tab, I want to create a embed listview like the image below.
May I know how can do it?
It looks like a TableView in Xamarin.Form.
TableView can be created as below.
<TableView Intent="Settings">
<TableRoot>
<TableSection Title="Ring">
<SwitchCell Text="New Voice Mail" />
<SwitchCell Text="New Mail" On="true" />
</TableSection>
</TableRoot>
</TableView>
The full example can be found here
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/tableview
I have a Xamarin.Forms PCL project and I am trying to add a Toolbar to my App as below and my target platform is UWP.
<ContentPage.ToolbarItems>
<ToolbarItem Icon="attach.png" Order="Primary" Priority="1" />
<ToolbarItem Icon="camera.png" Order="Primary" Priority="1" />
<ToolbarItem Text="Item1" Order="Secondary" Priority="1" />
<ToolbarItem Text="Item2" Order="Secondary" Priority="2" />
<ToolbarItem Text="Item3" Order="Secondary" Priority="3" />
<ToolbarItem Text="Item4" Order="Secondary" Priority="4" />
</ContentPage.ToolbarItems>
I have added all icon sources to root folder of UWP project. When i run the app on Windows 10 Desktop, icons appears too small. Orginal size of the image is okay though.
I would be appreciated if someone know how to fix this.
Unfortunately, I can't reproduce your issue in my side. And I have used the same icon in UWP and xamarin.forms to do a comparison. They do not make any difference in size.
The size of ToolbarItem icon is fixed. If you used icon with text description, then the image will look very small, in case of which you can set ToolBarItem Text property. When you click More Button, ToolbarItems will be expanded so that the text can be display well. And you'd better use a image whose active area is big enough.
<ToolbarItem Icon="camera.png" Order="Primary" Priority="1" Text="camera"/>
I'm trying to customize my alloy TabGroup to look like the image below (with no luck). no "height" properties on Tab item in the default documentation and with my current version of titanium 3.4.0 can't add View to TabGroup.
anybody know how to create a raised center button using alloy?
that's my index.xml view
<Alloy>
<TabGroup tabsBackgroundColor="white" barColor="#f15b26" activeTabIconTint="black" tintColor="white">
<Require src="home" nr="1" />
<Require src="play" nr="2" />
<Tab icon="/menu/logo.png" height="100">
<Window title="" id="">
<Label></Label>
</Window>
</Tab>
<Require src="chat" nr="3" />
<Require src="config" nr="4" />
</TabGroup>
</Alloy>
you can use an image in the middle of the that exceed the height of the bar.
When we implemented this solution in the past, we did a completely custom tabBar. I dont think you can accomplish what you are trying to do with the base tabBar control