Inline Elements

The term inline may be familiar if you know HTML and CSS -- an inline element is displayed within an existing flow of text, positioned on lines of text shared with other inline elements.

Let's make this more clear with a screenshot and a bit of code:

<Border xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="1" BorderBrush="#ccc" Padding="10">
  <TextBlock TextAlignment="Left" TextWrapping="Wrap" Width="400" FontSize="25" FontFamily="Candara">
    <Bold>Of Montreal:</Bold>
    <Hyperlink Background="#cef">Hissing Fauna, Are You The Destroyer?</Hyperlink>
    <Italic>(2007)</Italic>
  </TextBlock>
</Border>

In our example, we are using three inline elements: Bold, Hyperlink, and Italic. Each of these shares space on a line within our TextBlock (you can think of it as a paragraph). I added a background to the Hyperlink element to emphasize the fact that the element is broken across a line.

Here are all the elements shipped with WPF that derive from Inline (you can, of course, subclass and add your own):

• Run: A string of text.
• Span: A container for grouping other Inline elements. Its subclasses provide default formatting, and linking:
  • Bold
  • Italic
  • Underline
  • Hyperlink
• LineBreak: Forces a hard line break within a text flow. Provided as a markup convenience (newline characters are honored if used within code).
• InlineUIContainer: A container for UIElement-derived classes within text.
• AnchoredBlock: I'll cover these in detail later, but note that these cannot be used within a TextBlock
  • Floater
  • Figure

As I've mentioned before, it's rarely necessary to explicitly use Run when writing markup (although it's important when writing code). The same mechanism is used with InlineUIContainer for convenience.

Span and its subclasses are straightforward for those with experience with HTML, as is LineBreak.

Figure and Floater don't have direct analogues in HTML, but the functionality is similar to the CSS property float. More on these later.

Differences from HTML

If you're already familiar with HTML/CSS, then the concepts in this entry are old news to you. For easy skim-reading, here are the major differences between WPF XAML markup and HTML markup for inline elements:

• No semantic classes: This is a subtle, but important, point -- the markup classes exposed in WPF have no semantics, they are presentational only.
• Once an Inline, always an Inline: This is partially a consequence of the previous point, but unlike CSS, you cannot change the display-type of an element -- i.e. you can't change an element from inline to block, or vice-versa. If you want to do that, you must change the elements used and the tree structure.
• Can't nest paragraphs: The content model is strict, so you can't directly put a block element within a Paragraph (we'll learn how to do this via InlineUIContainer or an AnchoredBlock in later posts).
• Invisible container elements: Run and InlineUIContainer may not be in the markup, but they're there if you walk the tree.

Next, we'll look at the properties you can apply to inline elements.