I am using Xamarin.Forms, shared project template.
Here, I add controls to the content page such as a Label through say framework provided StackLayout.
Now in target apps - say for iOS/Andriod, I just need to set some text for this label. I have some platform specific code where I want to change the text value for the Label created in Shared Project.
How to do that?
I understand, Custom Renderers could be used. Is there any straight forward way that I am missing here?
You can, of course, use custom renderers... but imho it would be an overkill.
I'd use OnPlatform method - something like:
myLabel.Text = Device.OnPlatform<string>("text for iOS", "text for Android", "text for Windows Phone");
You can also do the same from XAML if you wish, like shown in this article (search "OnPlatform" there):
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/xaml-for-xamarin-forms/essential_xaml_syntax/
If the text you need is dynamic and you need to set it at run time from platform-specific project, than you need to assign your Label to some variable in the shared project and then reference this variable from platform projects.
Related
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
How can I customize the appearence of xamarin.forms components?
I want each button to have the same image, for instance. Or for all systems to share the same login screen with the same background image.
I know I can do that by adding one specific screen to each platform project. But I want to be able to customize the component itself. Example: All buttons will have the same background image no matter which platform is running.
I've read these:
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/styles/
http://code.tutsplus.com/tutorials/getting-started-with-xamarinforms-customizing-user-interface--cms-22144
The most promising one seems to be the last one. Is a custom renderer the only way to accomplish this? Can't I just add an image at the shared project and it automagicaly works for all platforms?
Thanks.
It's not absolutely clear, what exactly you want to reach... but I try to answer you.
If you use a shared project (based on template "Blank App (Xamarin.Forms shared)", you can use the same page / page-definition in all of your platforms.
You can add - e.g. a login-form in the shared-folder and then call it from code (e.g. from another page in the shared folder).
If you want to create your own controls, you can create "user-controls" and use it everywhere you want (what I recommend to every user).
You do this, by create a own class (e.g. with an Entry and a Label), implement the events and then instantiate it where you want to use it. E.G.
var OeFirma = new EntryErfassung(cDefaultText: "Firma", iMaximalLaenge: 45);
where OeFirma is the name of the object-instance on the page (to access it), EntryErfassung is my own class (that contains a description-label, an Entry an error-label and more) and cDefaultText is a parameter, that overtakes and set the default-text to the Entry and iMaximalaenge is a further parameter that is overtaken whereby my class then take care, that not more then 45 Characters are accepted for this Entry).
I have e.g. created a class with a description-label, a delete-button, an Entry and a error-label ad use it on all data-entry-forms.
If you want to change the look-and-feel of a specific control for a specific platform, you can create a "custom-render" (I have done this e.g. to change the font-size to the edit specific for iOS, as the font-sinze cannot be set in the XF-Entry control).
Hope this answers your question...
To do this, you can just specific a style in the App class, (you will need to change the app class to be made up of 2 partials: App.xaml & App.xaml.cs, and then create a ResourceDictionary to hold your customisations.
<Style TargetType="Button">
<Setter Property="Image" Value="MyImage.png"/>
</Style>
Hope that helps.
Cheers,
Tristan
I am trying to create a Xamarin.Android Component to send to the Xamarin Component Store, and I need to bundle my Colors.xml with it, so it is accessible to everyone using my component. I am setting the build action for the Colors.xml tp "AndroidResource".
So I created an Android sample application, when I add a reference to my library project's dll, I am able to use the colors defined, my project compiles and it runs, but I get no intellisense on Xamarin Studio. So that would be a bad thing for anyone using my library, as they would not be able to even see that the colors are available to use. You can see in this picture the colors defined are not available in the suggestions box.
If I add the Colors.xml directly into my project, I get Intellisense support, like this:
Is there a way to achieve the same result above when adding just the dll reference? Did I do something wrong or Xamarin.Android/Xamarin Studio doesn't support this kind of scenario?
EDIT: To be clear, I know this is a problem with Intellisense not being able to pick up the values, but is there anything I can do to make it work?
I'm attempting to localize my WinRT app. I don't need anything too fancy, so I've been using x:Uid on XAML elements in conjunction with resource files that have properties such as "PageTitleTextBox.Text" set. This method was working great until I ran into an issue with attached properties.
I've defined a few app bar buttons using similar markup to what I've seen in other examples:
<Button x:Name="AddFolderButton" Click="AddFolderButton_Tapped" x:Uid="FoldersPageAppBarAddFolderButton" AutomationProperties.Name="Test" Style="{StaticResource AppBarButtonStyle}">
<Button.Content></Button.Content>
</Button >
In this case, I'd like to localize AddFolderButton's label, currently defined by AutomationProperties.Name. I tried setting a key in my resource file to FoldersPageAppBarAddFolderButton.AutomationProperties.Name, but this fails on runtime.
Is it possible to localize this label using XAML, or do I need to do this programatically in the code-behind file?
You need to handle attached properties a bit differently, i.e. their namespace must be included in the reource key like this:
FoldersPageAppBarAddFolderButton.[using:Windows.UI.Xaml.Automation]AutomationProperties.Name
You can read more about it here.
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.