Geek Answers Handbook

Xamarin forms: embed characters in text

I am currently evaluating Xamarin Forms as an alternative to our mobile platform oriented HTML web applications.

Our applications often use graphic characters embedded in paragraphs of text. The desired effect is as follows:

Example

Of course, the text should also be able to flow freely around, including all characters. In HTML, this is simply achieved as follows:

<p>Sample text with <img src="sample.jpg"> embedded</p>

How can I achieve the same effect with Xamarin Forms? I already looked at FormattedStrings, which allow you to format Labels sub items, however they do not seem to allow embedding images.

Also note that a solution is required to support iOS, Android, and Windows Phone 8.1 at least.

+6
source share
2 answers

Currently, the only way to have characters and images in text blocks is to use WebView ( https://developer.xamarin.com/guides/xamarin-forms/working-with/webview/ )

 var browser = new WebView(); var htmlSource = new HtmlWebViewSource (); htmlSource.Html = @"<html><body> <h1>Xamarin.Forms</h1> <p>Welcome to WebView.</p> </body></html>"; browser.Source = htmlSource;
+1
source

Obviously, forced use of WebView almost defeats the move point of the HTML5 application on Xamarin!

The Xamarin forums asked a similar question: https://forums.xamarin.com/discussion/1649/text-with-image

To solve the problem, Tomasz Cielecki prepared an example code here: https://gist.github.com/Cheesebaron/5034440

He then went to blog about it here: http://blog.ostebaronen.dk/2013/02/adding-images-to-textview-and-edittext.html

<notch>

I started with a super simple example, trying to get the image shown in the TextView. I have been looking for some solutions and I'm sure Spannables allow you to use ImageSpan inside them! There were good samples and such, and I came up with this.

ImageSpan in TextView

 //Load up your drawable. var imageSpan = new ImageSpan(this, Resource.Drawable.Icon); //Set the text of SpannableString from TextView var spannableString = new SpannableString(textView.Text); //Add image at end of string spannableString.SetSpan(imageSpan, textView.Text.Length-1, textView.Text.Length, 0);

Easy, huh? And you can add many other Spans for Spannable, such as StyleSpan, which you can style your fonts in bold, italics and other styles.

Since it was that simple, I quickly tried to do it with EditText. It also works great ...

</ notch>

+4
source

More articles:


All Articles