I'm trying to create a string that have classic work & linked word.
I have this sentence :
I accept the terms of use and the privacy policy
In this sentence I want to have the words in bold clickable.
I already tried with an Horizontal StackLayout, Labels and Buttons but the result do not be like a simple sentence...
Any idea ?
Use a TapGestureRecognizer on a label:
var terms = new Label() { Text = "terms of use" };
var termsTapped = new TapGestureRecognizer();
termsTapped.Tapped += (o,e) =>
{
//do something
};
terms.GestureRecognizers.Add(termsTapped);
var stack = new StackLayout()
{
Orientation = StackOrientation.Horizontal
};
stack.Children.Add(new Label() { Text = "I accept the " });
stack.Children.Add(terms);
... and the same with your privacy policy.
EDIT:
If you want use this functionallity in a single lable, you could implement your own Span which is clickable and work with FormattedString.
Related
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/.
We want to make a rich (but not too rich) text editor with xamarin such that it is possible to:
Highlight some words
Position the cursor anywhere with the mouse or touch
Show the position of the cursor
Our attempt is using a Label to display text, and when the user click on the label in reality a hidden Entry is focused. To reposition the cursor we split the FormattedString in more Span, one for each character, so we know which is tapped or clicked.
The problem now is performance, as the content grows the time of updating the view grows a lot. For example just for adding one character can take 3000 ms if the content length is around 30 character. By the way it takes just 10 ms if the content length is little like 1-5 characters. The time to update the label is not linear on the length of text.
Here I put the code where the performance problem occur, and I want ask you if there is a problem in my code or maybe I can't do this in xamarin in this way.
Stopwatch stopwatch = Stopwatch.StartNew();
string newText = e.NewTextValue;
string oldText = (e.OldTextValue ?? string.Empty);
List<string> newParts = newText.Split('#').ToList();
List<string> oldParts = oldText.Split('#').ToList();
// ...
foreach (string part in newParts)
{
string placeholderCode = $"#{part}#";
string textToShow = isPlaceholder ? placeholders[placeholderCode] : part;
if (isPlaceholder)
{
editorPosition += placeholderCode.Length;
}
Span tmpSpan = new Span();
foreach (char character in textToShow)
{
Span item = viewer.FormattedText.Spans.ElementAtOrDefault(currentSpan++);
if (item == null)
{
item = new Span();
TapGestureRecognizer gestureRecognizer = new TapGestureRecognizer();
gestureRecognizer.Tapped += delegate {
editor.CursorPosition = spanToEditorPosition[item];
FocusEditor();
};
item.GestureRecognizers.Add(gestureRecognizer);
viewer.FormattedText.Spans.Add(item);
}
if (isPlaceholder)
{
tmpSpan.FontAttributes = FontAttributes.Bold;
}
else
{
tmpSpan.FontAttributes = FontAttributes.None;
editorPosition++;
}
tmpSpan.Text = character.ToString();
if (tmpSpan.Text != item.Text || tmpSpan.FontAttributes != item.FontAttributes)
{
item.Text = tmpSpan.Text;
item.FontAttributes = tmpSpan.FontAttributes;
}
spanToEditorPosition.Add(item, editorPosition);
}
isPlaceholder = !isPlaceholder;
}
stopwatch.Stop();
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.
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
}
function sidebar(editor)
{
var selection = editor.getSelection();
if(selection.getSelectedText()!="")
{
var range = selection.getRanges();
var customNode = editor.document.createElement( 'cdl:sidebar' );
var extractedContent = range[0].extractContents();
customNode.append(extractedContent);
var sidebarHolder = editor.document.createElement("sidebarHolder");
sidebarHolder.append(customNode);
var nodeHtml = sidebarHolder.getHtml();
editor.insertHtml(nodeHtml+" ");
}
else {
showErrorMessage("Selection is not proper");
}
}
This is my code.Whenever i select a single word like "Please" in "Please post comments or corrections" statement ,after adding tags Please.The space between "Please Post" get's trimmed.But when i select "Please "(word with space),the code works correctly.And , i want that tag should not visible in editor , it should be visible in source panel.
Try appending html to ckeditor instance rather adding text.