Summary of Chapter 3. Deeper into text
- PDF for offline use
- Related Articles:
- Related Samples:
- Related Links:
Let us know how you feel about this
last updated: 2016-10
This chapter explores the
Label view in more depth, including color, fonts, and formatting.
Text property of
Label contains long text,
Label automatically wraps it to multiple lines as demonstrated by the Baskervilles sample. You can embed Unicode codes such as '\u2014' for the em-dash, or C# characters like '\r' to break to a new line.
VerticalOptions properties of a
Label are set to
LayoutOptions.Fill, the overall size of the
Label is governed by the space that its container makes available. The
Label is said to be constrained. The size of the
Label is the size of its container.
VerticalOptions properties are set to values other than
LayoutOptions.Fill, the size of the
Label is governed by the space required to render the text, up to the size that its container makes available for the
Label is said to be unconstrained and it determines its own size.
(Note: The terms constrained and unconstrained might be counter-intuitive, because an unconstrained view is generally smaller than a constrained view. Also, these terms are not used consistently in the early chapters of the book.)
A view such as a
Label can be constrained in one dimension and unconstrained in the other. A
Label will only wrap text on multiple lines if it is constrained horizontally.
Label is constrained, it might occupy considerably more space than required for the text. The text can be positioned within the overall area of the
Label. Set the
HorizontalTextAlignment property to a member of the
TextAlignment enumeration (
End) to control the alignment of all the lines of the paragraph. The default is
Start and left-aligns the text.
VerticalTextAlignment property to a member of the
TextAlignment enumeration to position the text at the top, center, or bottom of the area occupied by the
LineBreakMode property to a member of the
LineBreakMode enumeration (
TailTruncation) to control how the multiple lines in a paragraph break or are truncated.
Text and background colors
BackgroundColor applies to the background of the entire area occupied by the
Label. Depending on the
VerticalOptions properties, that size might be considerably larger than the area required to display the text. You can use color to experiment with various values of
VerticalTextAlignment to see how they affect the size and position of the
Label, and the size and position of the text within the
The Color structure
Color structure lets you specify colors as Red-Green-Blue (RGB) values, or Hue-Saturation-Luminosity (HSL) values, or with a color name. An Alpha channel is also available to indicate transparency.
Color constructor to specify:
double values ranging from 0 to 1.
You can also use several static methods to create
doubleRGB values from 0 to 1
Color.FromRgbfor integer RGB values from 0 to 255
doubleRGB values with transparency
Color.FromRgbafor integer RGB values with transparency
doubleHSL values with transparency
uintvalue calculated as (B + 256 * (G + 256 * (R + 256 * A)))
stringformat of hexadecimal digits in the form "#AARRGGBB" or "#RRGGBB" or "#ARGB" or "#RGB", where each letter corresponds to a hexadecimal digit for the alpha, red, green, and blue channels. This method is primary used for XAML color conversions as discussed in Chapter 7, XAML vs. code.
Once created, a
Color value is immutable. The characteristics of the color can be obtained from the following properties:
These are all
double values ranging from 0 to 1.
Color also defines 17 public static read-only fields for common colors:
Color.White, the RGB color (255, 255, 255)
Color.Silver, the RGB color (192, 192, 192)
Color.Gray, the RGB color (128, 128, 128)
Color.Black, the RGB color (0, 0, 0)
Color.Red, the RGB color (255, 0, 0)
Color.Maroon, the RGB color (128, 0, 0)
Color.Yellow, the RGB color (255, 255, 0)
Color.Olive, the RGB color (128, 128, 0)
Color.Lime, the RGB color (0, 255, 0)
Color.Green, the RGB color (0, 128, 0)
Color.Aqua, the RGB color (0, 255, 255)
Color.Teal, the RGB color (0, 128, 128)
Color.Blue, the RGB color (0, 0, 255)
Color.Navy, the RGB color (0, 0, 128)
Color.Pink, the RGB color (255, 102, 255)
Color.Fuchsia, the RGB color (255, 0, 255)
Color.Purple, the RGB color (128, 0, )
Another public static read-only field defines a color with all color channels set to zero:
Several instance methods allow modifying an existing color to create a new color:
Finally, two static read-only properties define special color value:
Color.Default is intended to enforce the platform's color scheme, and consequently has a different meaning in different contexts on different platforms. By default the platform color schemes are:
- iOS: Dark text on a light background
- Android: Light text on a dark background
- UWP: Dark text on a light background
- Windows 8.1: Light text on a dark background
- Windows Phone 8.1: Light text on a dark background
Color.Accent value results in a platform-specific (and sometimes user-selectable) color that is visible on either a dark or light background.
Changing the application color scheme
The various platforms have a default color scheme as shown in the list above.
When targeting Android, it's possible to switch to a dark-on-light scheme by specifying a light theme in the Android.Manifest.xml file, or by Adding AppCompat and Material Design.
For the Windows platforms, the color theme is normally selected by the user, but you can add a
RequestedTheme attribute set to either
Dark in the platform's App.xaml file. By default, the App.xaml file in the UWP project contains a
RequestedTheme attribute set to
Font sizes and attributes
FontFamily property of
Label to a string such as "Times Roman" to select a font family. However, you need to specify a font family that is supported on the particular platform, and the platforms are inconsistent in this regard.
You can alternatively obtain one of several preset platform-dependent font sizes. The static
Device.GetNamedSize method and overload both return a
double font size value appropriate to the platform based on members of the
NamedSize enumeration (
Large). The value returned from the
Medium member is not necessarily the same as
Default. The NamedFontSizes sample displays text with these named sizes.
In all of the examples so far, the entire text displayed by the
Label has been formatted uniformly. To vary the formatting within a text string, don't set the
Text property of
Label. Instead, set the
FormattedText property to an object of type
The VariableFormattedText sample demonstrates using the
FormattedText property for a single line of text, and VariableFormattedParagraph demonstrates the technique for an entire paragraph, as shown here:
The NamedFontSizes program uses a single
Label and a
FormattedString object to display all of the named font sizes for each platform.