Given this original code, I'm trying to hide the icon on Android:
<NavigationPage Title="Page" Icon="page_icon.png">
<x:Arguments>
<views:MyPage />
</x:Arguments>
</NavigationPage>
I have attempted to use OnPlatform many different ways and cannot get it to work. Here are some things I have tried:
<NavigationPage Title="Page">
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.iOS>page_icon.png</OnPlatform.iOS>
<OnPlatform.Android>{x:Null}</OnPlatform.Android>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<views:MyPage />
</x:Arguments>
</NavigationPage>
This produced the error:
The given key was not present in the dictionary.
I also tried this:
<NavigationPage Title="Rater">
<OnPlatform
x:Key="Icon"
x:TypeArguments="x:String"
iOS="tab_feed.png"
Android="{x:Null}"
/>
<x:Arguments>
<views:MyPage />
</x:Arguments>
</NavigationPage>
Which runs, but no icons show up on iOS.
(Posted on behalf of the OP).
With the help of Yuri S's example, I was able for create markup that worked as intended on iOS and Android. This is it.
<NavigationPage.Icon>
<OnPlatform x:Key="SwitchOnIcon" x:TypeArguments="FileImageSource">
<On Platform="iOS">tab_feed.png</On>
</OnPlatform>
</NavigationPage.Icon>
Not sure how you deal with icons, it may be a separate question but OnPlatform was redesigned. Here is how you suppose to use it now:
<OnPlatform x:Key="SwitchOnColor" x:TypeArguments="Color" >
<On Platform="iOS,Android" >#0000FF</On>
<On Platform="UWP">#FF0000</On>
</OnPlatform>
Related
Om Xamarin Forms we use this code to create Master Page:
<MasterDetailPage.ToolbarItems>
<ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" Command="{Binding ControlsCommand}" />
<ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" Command="{Binding RefreshCommand}" />
<ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" Command="{Binding AboutCommand}" />
<ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}" Command="{Binding LogoutCommand}"/>
</MasterDetailPage.ToolbarItems>
<MasterDetailPage.Master>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
....
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
Now i migrate my code to version 5.0 and i change it like this (from this link):
<FlyoutPage.ToolbarItems>
<ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" />
<ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" />
<ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" />
<ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}"/>
</FlyoutPage.ToolbarItems>
<FlyoutPage.Flyout>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
...
</ContentPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Flyout>
Register:
containerRegistry.RegisterForNavigation<NavigationPage>("NavigationPage");
containerRegistry.RegisterForNavigation<PrismMasterDetailPage, PrismMasterDetailPageViewModel>("MasterPage");
containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
And navigation:
await NavigationService.NavigateAsync("/MasterPage/NavigationPage/MainPage");
When i try run application i got this exception:
Flyout and Detail must be set before using a FlyoutPage
What should i change in my code to work it correctly (it should show on right side MasterPage and on center of the screen MainPage) ?
EDIT:
I change my code by adding a login page. It run on App.xaml.cs likt this:
await NavigationService.NavigateAsync($"/NavigationPage/{nameof(LoginPage)}");
On LoginPageViewModel i have binded command to button where i run a method to navigate to MainPage. In Xamarin.Forms 4.8 we use that command:
await NavigationService.NavigateAsync("/MasterPage/NavigationPage/MainPage",
new NavigationParameters {{nameof(LoginPageViewModel), string.Empty}});
But now when i use it Navigation didn't work (not have any exception or somethink like that):(
When i remove /MasterPage from name i'm navigate to MainPage but i not have my MasterPage
Edit 2:
I change code form use FlyoutPage to MasterDetailPage and it start work, but MasterDetailPage is obsolete in xamarin forms 5
FlyoutPage is not supported by Prism 8. You can read more about it here and here.
AS the error shows Flyout and Detail must be set before using a FlyoutPage .
Try to set FlyoutPage.Detail as well in FlyoutPage xaml .
<FlyoutPage.Flyout>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
...
</ContentPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:FlyoutPage1Detail />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
Refr to https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#create-a-flyoutpage.
Actually Prism 8 didn't support FlyoutPage, so when i back to:
<MasterDetailPage.ToolbarItems>
<ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" Command="{Binding ControlsCommand}" />
<ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" Command="{Binding RefreshCommand}" />
<ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" Command="{Binding AboutCommand}" />
<ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}" Command="{Binding LogoutCommand}"/>
</MasterDetailPage.ToolbarItems>
<MasterDetailPage.Master>
<NavigationPage Title="Title" IconImageSource="hamburger.png">
<x:Arguments>
<ContentPage Title="Menu"
BackgroundColor="White"
NavigationPage.HasNavigationBar="False">
....
</ContentPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Master>
It start work, but i have warning becouse MasterDetailPage is obsolete but work :) I need to wait for Prism 8.1 and migrate MasterDetailPage to FlyoutPage
I have a Multiplattform app in Xamarin.forms for iOS, Android and UWP.
I'm using materialdesignicons-webfont.ttf for all my symbols.
If the windows goes in standby mode and resume after that, all symbols are missing.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SymbolTest"
x:Class="SymbolTest.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<OnPlatform x:Key="MaterialFontFamily" x:TypeArguments="x:String">
<On Platform="UWP" Value="Assets/Fonts/materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Label Text="" HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="UWP" Value="Assets/Fonts/materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>
</Label.FontFamily>
</Label>
<Button Grid.Column="1" x:Name="btnSearch" BackgroundColor="LightBlue" >
<Button.ImageSource>
<FontImageSource FontFamily="{StaticResource MaterialFontFamily}" Size="36" Glyph="" Color="SlateGray" />
</Button.ImageSource>
</Button>
</StackLayout>
</ContentPage>
The ButtonImage ist missing the Label.Text is not missing
Missing Symbols after resuming windows in Xamarin.forms app
I created code sample follow this tutorial, And it works well if I sleep the computer and resuming, please check the following code if you have missed some key procedure.
<Label Text="">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="UWP" Value="Assets/Fonts/materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>
</Label.FontFamily>
</Label>
Update
I could reproduce your issue, and it only occurs in reference StaticResource scenario, it looks a bug, please feel free post the bug report in Xamarin github, and I will report it to related team.
I have using navigation page in my application. I have to set font icon to toolbar item. But it shows cross symbol because i have not set the font family. So anyone suggest me to set font icon in toolbar item is possible or not.
With Xamarin Forms 4.x (if I remember the version correctly) they have add a FontImageSource type that can be used on ToolbarItems. A few things you need to do...
Add the font files to your platform projects. On Android, add them in the Assets folder with build action set to AndroidAsset. On iOS, add them in the Resources folder with build action set to BundleResource. Also on iOS, edit your info.plist and add
<key>UIAppFonts</key>
<array>
<string>fontname.ttf</string>
<string>fontname2.ttf</string>
...
</array>
Now Xamarin is able to use the fonts.
I defined some application resources to easily load fonts:
<OnPlatform x:Key="FontAwesomeLightFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="fa-light-300.ttf#Font Awesome 5 Pro Light" />
<On Platform="iOS" Value="FontAwesome5Pro-Light" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeRegularFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="fa-regular-400.ttf#FontAwesome5ProRegular" />
<On Platform="iOS" Value="FontAwesome5ProRegular" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeSolidFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="fa-solid-900.ttf#FontAwesome5ProSolid" />
<On Platform="iOS" Value="FontAwesome5ProSolid" />
</OnPlatform>
That is sitting in a resource dictionary that is merged into App.xaml resources.
Now, when I want to use a font icon as a toolbar icon imagesource, I can do the following:
<Page.ToolbarItems>
<ToolbarItem Command="{Binding SomeCommand}">
<ToolbarItem.IconImageSource>
<FontImageSource
FontFamily="{StaticResource FontAwesomeSolidFontFamily}"
Glyph="{x:Static fonts:FontAwesomeIcon.Cog}"
Size="{StaticResource ToolbarIconImageSourceSize}" />
</ToolbarItem.IconImageSource>
</ToolbarItem>
</Page.ToolbarItems>
If you want a static class to define glyph icons as opposed to having to enter the unicode (my FontAwesomeIcon class used in glyph above), there is a great tool at https://andreinitescu.github.io/IconFont2Code/ that will generate a C# static class based on an uploaded font file. It ends up looking like
public static class FontAwesomeIcon
{
public const string Abacus = "\uf640";
public const string Ad = "\uf641";
public const string AddressBook = "\uf2b9";
public const string AddressCard = "\uf2bb";
public const string Adjust = "\uf042";
public const string AirFreshener = "\uf5d0";
...
}
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary" Command="{Binding ExportDocumentCommand}">
<ToolbarItem.IconImageSource>
<FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Size="Subtitle"
Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}" />
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
in app.xaml
<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeSolid">
<On Platform="iOS" Value="FontAwesome5Free-Solid" />
<On Platform="Android" Value="Fonts/FontAwesome5Solid.otf#Regular" />
<On Platform="UWP" Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>
for work this line "Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}""
you need add on page
xmlns:fontawesome="clr-namespace:YourProjectName.Styles"
and add class from GitHub
You can try to use FontAwesome
First,we need to go to website: https://fontawesome.com/ to get vector icons and social logos on website with Font Awesome.
After we download the font and put it in our app, we can use it flexibly.
Here is a demo you can check it.
The main code is as follows:
App.xaml
<?xml version="1.0" encoding="utf-8" ?>
<Application 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"
x:Class="MyFontApp.App">
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:TypeArguments="x:String"
x:Key="FontAwesomeBrands">
<On Platform="Android"
Value="FontAwesome5Brands.otf#Regular" />
<On Platform="iOS"
Value="FontAwesome5Brands-Regular" />
<On Platform="UWP"
Value="/Assets/FontAwesome5Brands.otf#Font Awesome 5 Brands" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:String"
x:Key="FontAwesomeSolid">
<On Platform="Android"
Value="FontAwesome5Solid.otf#Regular" />
<On Platform="iOS"
Value="FontAwesome5Free-Solid" />
<On Platform="UWP"
Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:String"
x:Key="FontAwesomeRegular">
<On Platform="Android"
Value="FontAwesome5Regular.otf#Regular" />
<On Platform="iOS"
Value="FontAwesome5Free-Regular" />
<On Platform="UWP"
Value="/Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
</OnPlatform>
</ResourceDictionary>
</Application.Resources>
class FontAwesomeIcons
namespace MyFontApp.Utils
{
public static partial class FontAwesomeIcons
{
public const string FiveHundredPX = "\uf26e";
public const string Abacus = "\uf640";
public const string AccessibleIcon = "\uf368";
// other font icon codes
}
}
And we use like this:
<NavigationPage.TitleView >
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Label Text="{x:Static Utils:FontAwesomeIcons.Map}"
FontFamily="{StaticResource FontAwesomeSolid}"/>
<Button Text="{x:Static Utils:FontAwesomeIcons.Anchor}"
FontFamily="{StaticResource FontAwesomeSolid}"/>
</StackLayout>
</NavigationPage.TitleView>
The result is:
You can review the full demo here.
For more details, you can check: https://medium.com/#tsjdevapps/use-fontawesome-in-a-xamarin-forms-app-2edf25311db4
I'm extending the prism sample here to also include icons, and some additional navigation. My goal is to add something like the code below (where the icon information is) and am unsure how to add that to either my view, or the view model correctly.
<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:WebOfTrust.Views"
x:Class="WebOfTrust.Views.Client.WebOfTrustMainPage"
Title="{Binding Title}">
<TabbedPage.Children>
<!-- HOW DO I SET AN ICON FOR THESE? Either in the View or Model? -->
<NavigationPage Title="Contacts" >
<x:Arguments>
<local:Client.MyPeople.MyPeopleList/>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Places" Icon="Image7DoesntWork.png">
<x:Arguments>
<local:Client.MyPlaces.MyPlacesList/>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Docs" Icon="Image7DoesntWork.png">
<x:Arguments>
<local:Client.MyWallet.WalletCards/>
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>
What normally works
I normally have a navigation page in the view where I specify the icon below.
<NavigationPage Title="Trust Anchor List">
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_feed.png"/>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<local:Client.TrustAnchorList />
</x:Arguments>
</NavigationPage>
Question
What is the right way to set an icon in either the view or the model when using Prism?
just add the icon attribute in the children of the tabbed page.
It works fine for me
<local:ContactUs Icon="Icons/History_Tab.png" Title="{Translate:TranslateExtension Text=NewMessage}" />
my icons are under a folder in the resources but you can put them anywhere.
Hi I have been trying to set icon in my application based on images in the app.xaml
I have tried the following and they do not work:
usage in my page Icon="{StaticResource MyImageKey}">
<ImageSource x:Key="MyImageKey" >
<OnPlatform x:TypeArguments="ImageSource"
iOS="MyImage.jpg"
Android=""/>
</ImageSource>
<OnPlatform x:Key="MyImageKey"
x:TypeArguments="ImageSource">
<On Platform="iOS">"MyImage.png"</On>
<On Platform="Android">""</On>
</OnPlatform>
can you point me in the right direction?
thanks
You need add style in App resource like below :
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="MyImageKey"
x:TypeArguments="ImageSource"
iOS="contact.png"
Android="contact.png"
WinPhone="contact.png" />
</ResourceDictionary>
</Application.Resources>
Now you can use like below :
<Image Source="{StaticResource MyImageKey}"
HorizontalOptions="Center"
VerticalOptions="Center" />