FontAwesome icon with normal text in Xamarin - xamarin

I want to make a button that has a small icon (from FontAwesome) and text on it in my Xamarin app. I know I can just make a button but the problem is that I will require two fonts (the standard font for text and FontAwesome for the icon). Would anyone happen to know how I can do this, or if there is another way to achieve what I want?
Thanks!

As the json mentioned, I just made a simple implementation.
Create a new class inherit from Label, set FormattedText to combine the string(standard and icon), and add tap gesture on it .
public class MyLabel : Label
{
public delegate void MyHandler(object sender, EventArgs e);
public event MyHandler myEvent;
public MyLabel(string _myIcon, string _myText)
{
//build the UI
FormattedString text = new FormattedString();
text.Spans.Add(new Span { Text = _myIcon ,FontFamily= "FontAwesome5Free-Regular" });
text.Spans.Add(new Span { Text = _myText, TextColor = Color.Red ,BackgroundColor = Color.Blue });
FormattedText = text;
//tap event
TapGestureRecognizer tap = new TapGestureRecognizer();
tap.Tapped += (sender,e) => {
myEvent(sender,e);
};
}
}
Usage
MyLabel label = new MyLabel("", "test");
label.myEvent += (sener,e) =>
{
//do something when tapping
};
Content = label;
For how to integrate FontAwesome in Xamarin.Forms ,refer to
https://montemagno.com/xamarin-forms-custom-fonts-everywhere/.

Related

Unable to clear TextDecoration in Xamarin Forms UWP App

Using Xamarin Forms (version 2.5.0.121934), I'm working on an app targeting Android, iOS, and UWP. I need to add underlining and strikethrough to some text, which require custom renderers. For Android and iOS, everything is working fine, and on UWP, applying strikethrough or underline works correctly, but removing those decorations isn't working.
Here's the entirety of the UWP renderer:
[assembly: ExportRenderer(typeof(EnhancedLabel), typeof(EnhancedLabelRenderer))]
namespace myApp.UWP
{
public class EnhancedLabelRenderer : LabelRenderer
{
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
var strikethrough = ((EnhancedLabel)sender).Strikethrough;
var underline = ((EnhancedLabel)sender).Underline;
if (strikethrough && underline)
{
Control.TextDecorations = TextDecorations.Strikethrough | TextDecorations.Underline;
}
else if (strikethrough)
{
Control.TextDecorations = TextDecorations.Strikethrough;
}
else if (underline)
{
Control.TextDecorations = TextDecorations.Underline;
}
else
{
Control.TextDecorations = TextDecorations.None;
}
}
}
}
EnhancedLabel is a simple class that extends Xamarin.Forms.Label and adds the simple BindableProperty fields that specify strikethrough or underlining.
The renderer is properly setting TextDecorations.None, but that isn't having an effect on the UI. I've worked through this in the debugger, and can actually see that the state of the TextBlock within the ExtendedLabel has TextDecorations.None, but the UI is still drawing it with underlining or strikethrough (essentially, either of those can be added, but neither can be removed).
I've gone through the Xamarin documentation and looked at the bugs in Bugzilla, and haven't found any clues. Has any one else encountered this? Wondering if there's a UWP-specific call I need to make that I missed, or if using TextDecorations is the wrong way to apply the styles, or if I've actually stumbled across a bug.
Bug in UWP as in Xaml below:
<TextBlock>
<Run Text="Decorations can be toggled on and off"/>
</TextBlock>
<TextBlock Text="Decorations will not toggle off"/>
It is the same issue if you code the TextBlock:
TextBlock textBlock = new TextBlock { FontSize = 18.0 };
textBlock.Inlines.Add(new Windows.UI.Xaml.Documents.Run { Text = "This text will not stick on text decoration." });
TextBlock textBlockBad = new TextBlock
{
FontSize = 18.0,
Text = "This text will not enable the TextDecorations to be turned off"
};
Same behaviour found with Typography.Capitals
Just need to use only Inlines for TextBlocks and presumably RichTextBlocks to avoid these issues.
Wondering if there's a UWP-specific call I need to make that I missed, or if using TextDecorations is the wrong way to apply the styles, or if I've actually stumbled across a bug.
If you want yo use TextDecorations, you could use the Run instance to pack the decorated text like the follow.
Underline ul = new Underline();
ul.TextDecorations = TextDecorations.Strikethrough;
Run r = new Run();
r.Text = "Here is an underlined text";
ul.Inlines.Add(r);
MyTextBlock.Inlines.Add(ul);
For you requirement, I have create a CustomLabel that you could use directly.
CustomLabel.cs
public class CustomLabel : Label
{
public static readonly BindableProperty DeckProperty = BindableProperty.Create(
propertyName: "Deck",
returnType: typeof(TextDeck),
declaringType: typeof(CustomLabel),
defaultValue: default(TextDeck));
public TextDeck Deck
{
get { return (TextDeck) GetValue(DeckProperty); }
set { SetValue(DeckProperty, value); }
}
}
public enum TextDeck
{
None = 0,
//
// Summary:
// Underline is applied to the text.
Underline = 1,
//
// Summary:
// Strikethrough is applied to the text.
Strikethrough = 2
}
CustomLabelRenderer.cs
public class CustomLabelRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
if (Control != null)
{
var element = Element as CustomLabel;
var underline = new Underline();
var run = new Run();
switch (element.Deck)
{
case TextDeck.None:
underline.TextDecorations = TextDecorations.None;
break;
case TextDeck.Strikethrough:
underline.TextDecorations = TextDecorations.Strikethrough;
break;
case TextDeck.Underline:
underline.TextDecorations = TextDecorations.Underline;
break;
}
run.Text = element.Text;
underline.Inlines.Add(run);
Control.Inlines.Clear();
Control.Inlines.Add(underline);
}
}
}
Usage
<local:CustomLabel Deck="Underline" Text="Welcome to Xamarin.Forms!" />

Detect Phone Number & Link in xamarin.Form

assume we have the following text :
Contact us on 015546889 or email#hotmail.com
How I can display the above text in same label in xamarin.forms and handle click on email by send email and handle phone call by click on the number.
I can use the the following code to make clickable label
Label label = new Label;
label.GestureRecognizers.Add(new TapGestureRecognizer()
{
Command = new Command(() => {
//do some function here
})
});
How to hyperlink same as messaging app or Whatsapp application
After a lot of search i found the perfect solution Here :
https://theconfuzedsourcecode.wordpress.com/tag/xamarin-hyperlink-label/
Hope this will help others :)
Check out the Label element in Forms9Patch. It has a HtmlText property that allows simple markup.
using System;
using Xamarin.Forms;
namespace Forms9PatchDemo
{
public class LabelLink : ContentPage
{
public LabelLink()
{
var label = new Forms9Patch.Label
{
HtmlText = "Contact us on <a id=\"phone\" href=\"tel:+353015546889\">015546889</a> or <a id=\"email\" href=\"mailto:email#hotmail.com\">email#hotmail.com</a>"
};
label.ActionTagTapped += (object sender, Forms9Patch.ActionTagEventArgs e) =>
{
var id = e.Id;
var href = e.Href;
var uri = new Uri(e.Href);
Device.OpenUri(uri);
};
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
new Label { Text = "Forms9Patch.Label.HtmlText <a> example" },
new BoxView { BackgroundColor = Color.Black, HeightRequest = 1 },
label
}
};
}
}
}
Note that the above example won't work on iOS emulators because the tel: and mailto: schemes are not supported. It does work on actual iOS devices.

How to load image onto a button in xamarin forms PCL?

I am picking a photo from photo library and i get the following
AlbumPath:
assets-library://asset/asset.JPG?id=106E99A1-4F6A-45A2-B320-B0AD4A8E8473&ext=JPG
Path:
/Users/myname/Library/Developer/CoreSimulator/Devices/21CB035B-A738-4F74-B121-2DB2A6B5372A/data/Containers/Data/Application/3081A323-98AF-4EF6-95B9-29D4C2CD8425/Documents/temp/IMG_20170408_111143.jpg
How do i assign this image to a button ? I tried the following.
var file = await CrossMedia.Current.PickPhotoAsync(
new Plugin.Media.Abstractions.PickMediaOptions
{
});
Button btn = new Button();
btn.Image = (Xamarin.Forms.FileImageSource)ImageSource.FromFile(file.Path);
No image is displayed on the button. Any help help is appreciated.
Thank you.
Once you deploy the application the app will not have access to your mac. For the application to use the picture it will need to be a bundled resource within the iOS application. Below is a simple example of using images within an iOS app. You'll definitely want to consider just adding a gesture listener to your image instead of making it a button though. If you try to just use the image on a button you'll have to do some styling adjustments to get it to look clean.
Image Setup
Put image in iOS Resource folder
Make sure bundledresource is selected from image properties.
Image Button
public class ImageButton : ContentPage
{
private Button _imageBtn = new Button { Image = "icon.png", Text = "Sample button" };
public ImageButton()
{
Content = new StackLayout
{
Children =
{
_imageBtn
}
};
}
}
Image with TapGesture
public class ImageButton : ContentPage
{
private Image _imageBtn = new Image { Source = "icon.png" };
private TapGestureRecognizer _imageTap = new TapGestureRecognizer();
public ImageButton()
{
_imageBtn.GestureRecognizers.Add(_imageTap);
Content = new StackLayout
{
Children =
{
_imageBtn
}
};
_imageTap.Tapped += (s, e) =>
{
// handle the tap
};
}
}

How to identify user tapped on Editor field in Xamarin forms?

First thing, I have an Editor.I can Identify if the user entered any text in that Edior.But i need to return something when the user tapped on the Editor. How to achieve this?
var msgEditor = new Editor
{
Margin = new Thickness(10, 0, 10, 0),
HeightRequest = App.ScreenHeight,
};
Secong thing, Editor is inside the scrollview.When i tapped on the Editor scrollview scrolls down.I need to manually pull down to see the cursor.How to set content offset when i tapped on Editor?
ScrollView scroll = new ScrollView
{
Content = msgEditor,
};
Content = scroll;
On the editor, you have the focus event that notifies you that the user tapped the editor. You can do as follow :
{
var editor = new Editor();
editor.Focused += EditorOnFocused;
}
private void EditorOnFocused(object sender, FocusEventArgs focusEventArgs)
{
//do your stuff
}

Background image with Carousel effect

I would like to create a layout with a fullscreen background image and some UI elements on top of it. The twist is this:
I would like the background image to swipeable like a carousel, but I would like the UI elements to stay in place. That is if I swipe the screen, the background image should slide to the side and a new image should replace it. I know about CarouselPage, but it seems to me that it won't do the trick, since a Page can have only one child which it replaces on swipe, meaning that the UI elements would be descendants of the CarouselPage and therefore would also be animated.
I am guessing I need some sort of custom renderer here, but how should I go about designing it? Should it be one fullscreen Image control replaced be another fullscreen Image control with the UI elements on top of it? And how can I do this? Or is there an all together better approach?
I am developing for iOS and Android using Xamarin.Forms.
Thanks in advance.
I don't like repeating myself much, and I think that multiple layers of actionable items can lead to confusion, but the problems appeals to me and I can see a niche for this kind of UI, so here's my take on your question.
Let's assume this is the (Xamarin.Forms.)Page you want to render with a custom carousel background:
public class FunkyPage : ContentPage
{
public IList<string> ImagePaths { get; set; }
public FunkyPage ()
{
Content = new StackLayout {
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
Spacing = 12,
Children = {
new Label { Text = "Foo" },
new Label { Text = "Bar" },
new Label { Text = "Baz" },
new Label { Text = "Qux" },
}
};
ImagePaths = new List<string> { "red.png", "green.png", "blue.png", "orange.png" };
}
}
The renderer for iOS could look like this:
[assembly: ExportRenderer (typeof (FunkyPage), typeof (FunkyPageRenderer))]
public class FunkyPageRenderer : PageRenderer
{
UIScrollView bgCarousel = new UIScrollView (RectangleF.Empty) {
PagingEnabled = true,
ScrollEnabled=true
};
List<UIImageView> uiimages = new List<UIImageView> ();
protected override void OnElementChanged (VisualElementChangedEventArgs e)
{
foreach (var sub in uiimages)
sub.RemoveFromSuperview ();
uiimages.Clear ();
if (e.NewElement != null) {
var page = e.NewElement as FunkyPage;
foreach (var image in page.ImagePaths) {
var uiimage = new UIImageView (new UIImage (image));
bgCarousel.Add (uiimage);
uiimages.Add (uiimage);
}
}
base.OnElementChanged (e);
}
public override void ViewDidLoad ()
{
Add (bgCarousel);
base.ViewDidLoad ();
}
public override void ViewWillLayoutSubviews ()
{
base.ViewWillLayoutSubviews ();
bgCarousel.Frame = View.Frame;
var origin = 0f;
foreach (var image in uiimages) {
image.Frame = new RectangleF (origin, 0, View.Frame.Width, View.Frame.Height);
origin += View.Frame.Width;
}
bgCarousel.ContentSize = new SizeF (origin, View.Frame.Height);
}
}
This was tested and works. Adding a UIPageControl (the dots) is easy on top of this. Autoscrolling of the background is trivial too.
The process is similar on Android, the overrides are a bit different.

Resources