I'm currently evaluating Xamarin Forms as an alternative to our webbased HTML applications targeting mobile platforms.
Our applications often use graphical symbols embedded in paragraphs of text.
The desired effect looks like this:
Of course the text also has to be able to freely wrap around, including all the symbols. In HTML this is simply achieved like this:
<p>Sample text with <img src="sample.jpg"> embedded</p>
How can I achieve the same effect using Xamarin Forms? I already looked at FormattedStrings which allow formatting of subparagraphs of Labels, however they do not seem to allow embedding of images.
Also please note that the solution is required to support iOS, Android and Windows Phone 8.1 at least.
Obviously being forced to use a WebView almost defeats the point of moving a HTML5 app to Xamarin!
In the Xamarin Forums a similar question has been asked: https://forums.xamarin.com/discussion/1649/text-with-image
To solve the problem Tomasz Cielecki cooked up some sample code here: https://gist.github.com/Cheesebaron/5034440
He then went onto blog about it here:
http://blog.ostebaronen.dk/2013/02/adding-images-to-textview-and-edittext.html
<snip>
I started out with a super simple sample trying to get an Image shown in a TextView. I googled up some solutions and sure, Spannables allow using ImageSpan inside of them! There were nice 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 loads of other Spans to the Spannable, such as StyleSpan, which you can style your fonts with bold, italic and other styles.
Since that was so easy, I quickly tried to do that with an EditText. It also works just fine...
</snip>
Currently, the only way to have symbols and images within 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;
Related
I wanted to implement itemsControl printing with page breaks like it's described in the following blog: http://blogs.u2u.be/diederik/post/2013/05/21/Printing-a-XAML-ItemsControl-from-a-Windows-8-Store-app.aspx
The problem is that in Windows 10 it works incorrectly (I added background to show items in itemsControl for debugging):
While 8.1 version works as expected:
Is there any idea what can be wrong? All it does is just adds paragraphs to richtext, measures each item content and then splits it by pages.
Windows 10 sample is here.
Windows 8.1 sample is here.
UPDATE:
More info:
I changed textblock to textbox (wanted to add background to text). It turns out that it works better, but text is cut at the end of the page. It started working on all pages except for the first page in preview (text is single line and not wrapping on the first page for some unknown reasons). It works correctly in printed document. Weird thing is that it works correctly if I close preview and click print again (even though last line on page is still cut).
I have tried your sample code: The problem is that the system default templates for your two applications are not all the same, so that there is a little difference in the display mode for the item. To fix the problem in the win10 app, you'd better define a proper layout style for the control. There are various ways to achieve this: adding a proper template in resources, or defining in code.
Please try following code in the "PreparePrintContent" function. Please notice that I adjust the layout by setting margin of the UIElement. This is a very simple approach just for your reference:
var x = itemsControl.ContainerFromItem(item) as ContentPresenter;
Paragraph p = new Paragraph();
InlineUIContainer c = new InlineUIContainer();
var o = x.ContentTemplate.LoadContent() as UIElement;
(o as FrameworkElement).DataContext = item;
(o as FrameworkElement).Margin = new Thickness(40);
I have been searching for a solution, but I couldn't succeed. The problem is as follows.
I have a WPF application where I am using FlowDocuments. I want to create a corresponding application on Android and share documents between those applications (WPF and Android) using a web service.
Android has SpannableString. But I couldn't figure out if we have a control in Android, like RichTextBox in WPF.
To sum up my question, Is there a format like Rich Text Format and an Android control to both display and manipulate this document on Android?
You can make use of the TextView together with the span fields to set different text styles (similar to Runs on XAML). There is also a SpannableStringBuilder which might ease this process.
SpannableString text = new SpannableString("Hello World!")
text.setSpan(new ForegroundColorSpan(Color.BLUE), 0, 5, 0);
text.setSpan(new StrikethroughSpan(), 7, 11, 0);
I have a FeedReader app and I would like my pages open in reading view ( feature from IE 11 , EDGE ) .as an example The news app in windows 10 uses this feature and all news descriptions are in reading view . is it possible ?
Reading View example (Screenshot) :
https://social.msdn.microsoft.com/Forums/getfile/733596
News app reading view example (Screenshot) :
https://social.msdn.microsoft.com/Forums/getfile/733599
Thanks in advance .
In these cases the content of the web page is extracted and shown with custom styling.
To get the same result you can use something like DIFFBOT (which I think is used in the News app) or Embedly which is cheaper, and get the content parsed and returned nice and structured. After that you'll have to style it yourself.
You can style it by "converting" it from HTML and show it in a TextBlock, or you can show it in a WebView.
EDIT:
You can use something like HtmlUtilities.ConvertToText to get the text from the HTML. I think you can convert one section at a time, that way you can style headers and such.
I'm trying to figure out how to create programatically a tile with specified template (TileSquare150x150Text03)? I tried to follow these guides link , MSDN
and a few similiar, but wherever I paste < tile> ... < /tile > markup (e.g. in page or app .xaml file) Visual Studio underlines this markup and says that "tile is not supported in a Windows Phone project". I don't need any tile updates or tiles with two sides. Just simple one with specified template, background color/image and filled with my text.
Can someone explain me what I'm doing wrong? Thank you for your help.
Simple! You need to parse your tile template (an XML string) into an XElement object in code:
var template = "<tile>etc</tile>";
var tileXe = XElement.Parse(template);
Either configure the template xml to your liking before this or after (demo is in the article you linked)
then post it to the tile manager
var tileNotification = new TileNotification(tileXe);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
You can do this anywhere in your app as long as this code runs on the UI thread. Also note that there is a limit to how often you can update the tile, last time I checked it was every 15 seconds at most.
Im building a Windows Phone 8 App which has a webbrowser. I would like append a meta tag inside the head tag on the page which is shown in my webbrowser.
I've tried it with this but it gives me a System Exception Error 80020101.
WebBrowser.InvokeScript("eval", #"document.getElementsByTagName(""head"")[0].appendChild(""<meta
name=""viewport"" content=""user-scalable=no"">"")");
I was told to try it with this code below but I dont think you can use that in C#.
link=document.createElement('link');
link.href='href';
link.rel='rel';
document.getElementsByTagName('head')[0].appendChild(link);
First of all make sure this property is set on your webBrowser object:
webBrowser.IsScriptEnabled = true;
Then you should also probably check your javascript method in the desktop IE11 debugger, whether the code actually works as expected. Adding new meta tags into your page might not be that easy.