TextStyle allows you to effortlessly create, manage and style text in Xamarin.iOS using CSS style sheets.

• Create rich HTML text displays with full CSS styling
• Style new or existing text displays (UILabel, UITextView, UITextField)
• Manage and display style changes on existing fields
• Change text styles at runtime
• Light-weight and simple to use

Load the CSS file Before any text displays are creates, TextStyle needs the CSS style set.

var style = File.ReadAllText ("StyleOne.css");
TextStyle.Instance.SetCSS (style);

Create a UILabel using the 'h1' css style Using TextStyle you can easily create new text displays. Simply specify the type of field you wish to create (UILabel, UITextView, UITextField) and pass in the name of the CSS selector. You can optionally pass text to populate the display, and add custom CSS tags.

var headingLabel = TextStyle.Create<UILabel> ("h1", "Hello World");

Style an existing text display To style existing text displays pass TextStyle a reference to the display, the name of the CSS selector. You can optionally provide new text but if none is supplied TextStyle will use any text that has already been set on the display.

var headingLabel = new UILabel();
headingLabel.Text = "Hello World";

TextStyle.Style<UILabel> (headingLabel, "h1");

Using Custom CSS Tags Custom CSS tags can be used to either create a new CSS rule or alter an existing rule. If a rule has not been declared in the original CSS it is added to the text display, if the rule has already been declared the new style will overwrite any existing properties of the existing rule.

var htmlText = "This is a <spot>subtitle</spot>";
var customTags = new List<CssTagStyle> (){
	new CssTagStyle ("spot"){ CSS = "spot{color:#ff0000}" }
};
var subtitleLabel = TextStyle.Create<UILabel> ("h2", htmlText, customTags);

Mapping CSS Rules In some cases it may be useful to remap an HTML tag to a new CSS rule. For example if we want a <span> tag to appear with the same properties as an <h3> tag we create a new CssTagStyle with the TagID of "span" and the StyleID of "h3"

var htmlText = "This is a <span>subtitle</span>";
var customTags = new List<CssTagStyle> (){
	new CssTagStyle ("span"){ StyleID = "h3" }
};
var subtitleLabel = TextStyle.Create<UITextView> ("body", htmlText, customTags);

Custom Mapping CSS Rules In addition to mapping CSS rules we can specify additional properties on a CssTagStyle instance. Any custom CSS passed to the CssTagStylewill only be applied to the text display and does not alter the stored CSS declaration.

var customSpanTag = new CssTagStyle ("span"){ 
	StyleID = "h3", 
	CSS = "h3{color:#ff0000}"
};

StyleManager The StyleManager is used to manage multiple text displays contained on a view. If TextStyle loads a new CSS file, the StyleManager is notified and will update all of its registered text displays.

var styleManager = new StyleManager ();
styleManager.Add (labelOne, "h1");
styleManager.Add (labelTwo, "h2");
styleManager.Add (body, "body", "Lorem ipsum facto");

Updating displays using the StyleManager To update the value of a text display using the StyleManager simple call the UpdateText method passing a reference to the field and the new string. The StyleManager will update the display using its stored settings.

styleManager.UpdateText (labelOne, "Hello world this is the new text to use.");

HTML NSAttributedString TextStyle can be used to format HTML into NSAttributed strings. Simply pass the CreateHtmlString method the HTML you want formatted along with a list of CssTagStyle instances that define the styles.

var customTags = new List<CssTagStyle> (){
	new CssTagStyle ("body"){ StyleID = "body" },
	new CssTagStyle ("b"){ StyleID = "b" },
	new CssTagStyle ("i"){ CSS = @"i{font-family: 'Avenir-Heavy';}" }
};

var html = "<b>hello world</b><br/>This is a <i>test</i> of the emergency broadcast system.";

var attributedString = TextStyle.CreateHtmlString (html, customTags);

Standard NSAttributedString Standard text can also be styled using the textStyle.CreateStyledString() method. Passing the selector name and text to style will return an NSAttributedString value.

var message = "Hello world, this is a test"

var attributedString = TextStyle.CreateStyledString ("h1", message);

Special CSS properties TextStyle CSS declarations can also include the custom CSS property lines which will set the number of lines on a text display. Using a value of 0 will make the text display multi-line.

var parameters = new TextStyleParameters(){
	Lines = 0
};

Hex UIColor extension The TextStyle library includes an extension for converting any UIColor to a CSS hex string. This can be used to dynamically change color values of a CSS style.

// Returns #ff0000
var redHexString = Colors.Red.ToHex ();

var htmlText = "This is a <span>subtitle</span>";
var customTags = new List<CssTagStyle> () {
	new CssTagStyle ("span"){ CSS = "span{color:" + redHexString + "}" }
};
var subtitleLabel = TextStyle.Create<UILabel> ("h2", htmlText, customTags);