I'm new to Xamarin development, but try to be exact.
Using Visual Studio 2022, with Xamarin version 17.0.0.182 (as displayed in VS About).
Found this great article on how to use Bootstrap icons, but it seems to be out of date. When I followed the steps and provided hex codes for the characters, I didn't get the expected glyiphs.
I found that
new Xamarin needs new methods,
new Bootstrap fonts need new ways.
Here they are.
1.) Get the font from the Bootstrap github repo at https://github.com/twbs/icons
Go to releases (https://github.com/twbs/icons/releases), choose latest, scroll down to Assets, download the bootstrap-icons-x.x.x.xip file.
Unzip it, and find fonts/bootstrap-icons.woff.
Not something you can use in Xamarin right away :-(
2.) Convert the woff file to ttf
I googled for a converter and used https://cloudconvert.com/woff-to-ttf
Now you have the ttf you need :-)
3.) Now follow the current Xamarin method of adding a font to your app.
The process is described here: https://devblogs.microsoft.com/xamarin/embedded-fonts-xamarin-forms/
In short:
add the ttf file to the shared Xamarin project, Embedded Resources / Fonts
change file properties / Build Action to "Embedded resource"
register the font by adding a line to the end of Assemblyinfo.cs:
[assembly: ExportFont("bootstrap-icons.ttf", Alias = "Bootstrap")]
4.) Use it in xaml like
<Label FontFamily="Bootstrap" Text=""/>
to display a magnifying glass.
You may also define a Label style, but I'll skip that for now.
4/b.) To use it in xaml via binding
Oh, if things were easy...
When using a binding to display a glyph, there's one more hoop to jump, thanks to these guys for the solution: Using data binding, how do I bind text which contains emojis to a label and have it display correctly?
So, in xaml:
<!-- set BindingContext to MyViewModel -->
<Label FontFamily="Bootstrap" Text="{Binding StateIconName}" />
in your MyViewModel:
public string StateIconName
{
get => WebUtility.HtmlDecode("");
}
5.) To browse available glyphs (icons)
Open the overview page: https://icons.getbootstrap.com/
6.) To find the unicode character code, also referred to as "Unicode HTML Entity"
Check the name of the icon above in step 5.
Open the Bootstrap-icons.css file from Github: https://github.com/twbs/icons/blob/main/font/bootstrap-icons.css
Search for the name of the glyph to find the character code, something like:
.bi-zoom-in::before { content: "\f62c"; }
Use this code in xaml like
Related
I am trying to use Font Awesome Icons in my Xamarin.iOS project.
In my Xamarin.Android project it was pretty simple:
I downloaded the Font Awesome WebKit from here
I copied the .ttf-Files of the fonts I want to use in my Assets folder
I create a new Typeface for my TextView with the font and use the unicode of the icon
Code:
var myIcon = new TextView(Context);
var regularFont = Typeface.CreateFromAsset(Context.Assets, "fonts/fa-regular-400.ttf");
myIcon.SetTypeface(regularFont, TypefaceStyle.Normal);
myIcon.Text = "\uf007";
I can change TextColor, BackgroundColor, etc. like a normal text.
My problem is, I can't figure out, how to use Font Awesome in my Xamarin.iOS project. Most tutorials and How-Tos are directed to Xamarin.Forms. I tried to merge many of these approaches, but it failed.
The only approach I found is to draw the .svg-Files with SkiaSharp, but that is no option for my use case.
Add .ttf files in your Xamarin iOS project (I have added it in resources)
Now inside info.plist Add a new key “Fonts provided by application”
Expand the array, and in string value add your fontname (eg: fa-solid-900.ttf) which you have added in your project
Setup Done:
Now Just wherever you want to add fontawesome icon just select font awesome as font family in storyboard but make sure to add text programmatically
SushiHangovers comment leads me to the solution for my problem.
FontAwesome Pro and xamarin.ios only one font can be active
It was not possible to use 3 Font Awesome fonts at the same time in the Designer, but it works when they are used during runtime via code.
While developing a project for Windows Phone 7, I'm adding an image control onto the Grid and using the following code in C# to set the image source:-
Uri nUri = new Uri("/TestImage.png", UriKind.Relative);
BitmapImage nBitmapImage = new BitmapImage(nUri);
FacebookImage.Source = nBitmapImage;
The problem is that whenever I use custom images, they do not show up when I build and run the app on the emulator. Whereas, if I change the image file name in the above code to one of the images that are included in the project by default (ApplicationIcon.png), the image shows up upon running. I would like to know if this is a problem with the code or with the custom image files I'm using. I'm ensuring that the images I'm creating are proper and have the same attributes as the images included by default.
Could someone please help me out with this.
Thanks.
Click on your custom picture in Visual Studio's Solution Explorer. Then, look at the property window (press F4 if it's closed), and at the "Build Action" line. It basically tells the compiler how to embed your file in the application. The build action of ApplicationIcon.png should be "Content", just set the same one for your custom pictures.
I have a Page in a Windows Phone class library. This page has an appbar. I would prefer everything this page needs to be included within the class library so the setup list for consumers of this page / assembly is minimal.
However, When I set ApplicationBar icons, they get added to the class library project under the folder 'icons' just like normal, they show up fine in Blend, but at runtime they are no where to be found!
When I put the icons in the Windows Phone Application project all is well. However this is not my desired scenario as it is additional configuration / setup by the application author to use my pages.
I tried using the resource pathing using /{AssemblyName};component/icons/{IconName} but of course the AppBar needs them to be of type "Content" not "Resource". So I am thinking this is impossible but I wanted to know if anybody out there figured out how to do this.
Sorry guys. I just figured it out. I changed the newly added icons from "Resource" to "Content" but I forgot to set "Copy if newer" so they weren't getting outputted to the Bin\Debug\icons folder of the windows Phone Application. something to keep an eye on I guess.
I have been trying to use some custom fonts within my WP7 app.
I followed the example as per http://www.jeffblankenburg.com/2010/10/24/31-days-of-windows-phone-day-24-embedding-fonts/ but in my project it simply will not pick up the custom font.
I have downloaded the sample project in this example and this one does work okay.
So, I have now used the same font used in there, and included in my project. I have ensured that the properties on the file are identical (Build Action = 'Content' and Copy To Output Directory = "Always")
I have used in my XAML in exactly the same way i.e.
FontFamily="Fonts/DigitalDream.ttf#Digital Dream" FontSize="24"
But to no avail. The custom font is just ignored. Is there something that I am missing, or a setting .. anything that would allow this to work in one project, but not another?
I have discovered that it will work if my XAML page is defined at the root level, i.e. immediately under the project, but in my case I have it in a 'Views' folder.
My understanding was that
FontFamily="/Fonts/DigitalDream.ttf#Digital Dream" FontSize="24"
should start at the root folder of the project?
thanks
Custom fonts can be a little tricky. I spent several hours once trying to embed an .otf font only to find that it just didn't seem to be doable.
You're on the right track, though. A .ttf font should be embedable. It's hard to get the right combination of paths and filenames to make the font work, though.
The easiest way I've found to handle some of these more difficult "magic string" type of situations in XAML is to let Expression Blend do the heavy lifting.
Here's a blog post about using Blend to embed fonts. The nice thing about using Blend is that it gives you some visual indications that things are set up correctly--i.e. you can see the font you want in the font selection menu. This is what finally clued me in on the .otf issue. I couldn't see the font in Blend.
And here's an example of a custom font that I've used in one of my apps:
<TextBlock Name="MyTextblock"
FontFamily="/MyAppName;component/fonts/Fonts.zip#Segoe UI Mono">
That's FontFamily URI is a pain to get right. I'm pretty sure that's your problem.
I was actually having the same problem. I followed everything to the dot and still I wasn't able to embed one particular font. So I created a new project and tried embedding the font there. Still no luck. I then tried embedding some other font. And lo and behold, as soon as I typed the FontFamily attribute, I could see that it had embedded. This was particularly odd since I didn't have to change any properties of the font.
I opened the project in Blend and clicked on the font property box to the right. It took a few seconds and then it embedded the font I was having problems with in the first place.
I'm having a little trouble getting localized resources files to work on Windows Phone 7. Here's what I'm doing:
Create a resource file, say "Strings.resx" (Build Action: Compile)
Create a key, say "TestKey" with a default value of empty string
Add a English resource file in the same folder with a value of "some English string": Strings.en-us.resx (Build Action: Embedded Resource)
Add a Japanese resource file in the same folder with a value of "some Japanese string": Strings.ja-jp.resx (Build Action: Embedded Resource)
In my PC Silverlight, WPF Apps that works fine when I change the Thread.CurrentThread.CurrentCulture. But in the phone I always seem to be getting the value that's in the Strings.resx file - an empty string.
I have tried using the designer generated code and wiring up the resource manager by hand and it does not seem to matter. Here's my code:
Type t = typeof(Strings);
_resourceManager = new ResourceManager(
t.Namespace + "." + t.Name,
t.Assembly);
_resourceManager.GetString("TestKey");
Tell me localized resources are supported on the phone... ;> What am I doing wrong? Thanks!
Update: Thanks Olivier for forwarding the link. I saw that as well but missed an important step. I didn't add the "SupportedCultures" node to my csproj. Made all the difference - hoping someone else doesn't loose two hours trying to figure this out like I did.
<SupportedCultures>de-DE;es-ES;</SupportedCultures>
Of course, localized resources are supported on the phone:
How to: Build a Localized Application for Windows Phone
I wrote a blog post that provides links to a bunch of Globalization / Localization guides for WP7. There is a Windows Phone 7 in 7 Training video that helped me understand the basics. After that it was simply a matter of learning how to do databinding:
The MSDN article shows you how to
setup the files and create the
LocalizedStrings class, but they then
assume that you know how to use that
class for data binding. Visual Studio
2010 and Silverlight handle data
binding differently than Winforms, and
it gets even more confusing since XAML
also has it’s own definition of
Resources that are different then the
.NET resources we just created.
Silverlight also uses the term
Resource to refer to files that use
the the Build Action of "Content”, as
these files get wrapped up into the
.XAP file similar to how files with
Build Action of "Resource” get
embedded into the .Dll assembly (ex:
loading an image from content or
resource files). I found that instead
of using the Text="{Binding
Path=resourceFile.resourceName,
Source={StaticResource
Localizedresources }}" XAML syntax it
was easier to use the following steps:
Open your primary XAML page (usually MainPage.xaml) in the Visual
Studio designer
Open the properties for the PhoneApplicationPage and set the
DataContext to be
Application.Resources –>
LocalizedStrings. NOTE: if you already
are using a DataContext object, then
you should integrate the
LocalizedStrings class into that
object so that it has localization
support.
Once the Page’s DataContext has been set you can change the data
binding for any control on the page by
simply selecting the property (ex:
text, checked, etc), selecting “Apply
Data Binding…”, and setting the Path
to Localizedresources.BtnText or
whatever the name of the desired
resource value is.