Chart Formatting and Mark-up Reference

The charts in the application use XAML (Extensible Application Markup Language) to apply their formatting. XAML statements comprise tags and attributes, of which the TextBlock tag is the most important.

Simple Formatting

Here is a simple example: to display By Ore Zone as a chart subtitle using italic text you would enter this in the Secondary title edit box:

<TextBlock><Italic>By Ore Zone</Italic></TextBlock>

This is what the individual statements mean:

  • <TextBlock> is a tag that means you are formatting a block of text. Tags always comprise matching opening and closing tags. This tag is opened by <TextBlock> and closed by </TextBlock>. Closing tags always have the same name as the opening tag, with a “/” prepended.
  • <Italic> is a tag that italicises the font. It is opened by <Italic> and closed by </Italic>.
  • Note how the <Italic> tag is nested within the <TextBlock> tag. The inner opening and closing tags must be opened and closed between the outer tags or the formatting will be invalid.
  • By Ore Zone is the text you want to display. Everything between the innermost tags is displayed.

The <Bold> and <Underline> tags work the same way as <Italic>:

<TextBlock><Bold>By</Bold> <Italic>Ore Zone</Italic> </TextBlock>

More Complex Formatting

You apply more complex formatting by setting <TextBlock> attributes instead of using separate tags. Here is the first example using attributes instead of tags:

<TextBlock Text="By Ore Zone" FontStyle="Italic"/>

This time there is only one tag, with several attributes:

  • <TextBlock is the same tag you saw earlier. This time it is opened by <TextBlock and closed by />, which is the shorthand form for a self-closing tag. Within it are two attributes. This is the easiest way to open and close a tag when the formatting is complex.
  • Text="By Ore Zone" is the text attribute containing the text you want to see. Everything between the two quotation marks is displayed.
  • FontStyle="Italic" is an attribute that italicises the font. The word must be between quotes.

Other useful attributes are listed below. The values must always be enclosed within "double quotes":

  • FontSize="18": Changes the font size. Use any integer value. Although the font size is a number it must be between quotation marks.
  • FontFamily="Verdana": Changes the font. Use names like "Verdana" or "Calibri".
  • FontWeight="Bold": Emboldens the font.
  • TextDecorations="Underline": Decorates the font. Use "Underline" or "Strikethrough".
  • Foreground="Red": Changes the colour of the text. Use simple names like "Red" or "Blue" or hexadecimal colours like "#FAC896".
  • Background="Blue": Changes the background of the text. It uses the same colour rules as Foreground.
  • LineBreak: Breaks the text into separate lines. A self-closing tag, thus: <LineBreak/>.
  • TextAlignment="Center": Aligns the text. Use "Center", "Left" or "Right". Only applies to multi-line text (see LineBreak).

Search “html known color” for a list of named colours.

It is very important to use regular quotes and not the smart quotes added by word processors.

Advanced Formatting

Sometimes you need to apply different formatting styles to different parts of a text block, and spans are ideal for this kind of advanced formatting. A span allows you to format its text differently from the rest of the text block, using the same system of attributes. You can include any number of spans within a given text block. However, spans do add some complexity.

You create a span the same way as a text block, with an opening <Span> tag and a closing </Span> tag. You then place the displayed text and any formatting attributes between them.

For example, to display the original subtitle using 18-point text with “Ore” in bold red, you would change the entry to (read it as a single line):

<TextBlock FontSize="18" FontStyle="Italic">By <Span Foreground="Red"

FontWeight="Bold">Ore</Span> Zone </TextBlock>

The text block has the attributes FontSize="18" and FontStyle="Italic". In addition to those attributes, the span adds Foreground="Red" and FontWeight="Bold", emboldening the word “Ore” and making it red. Because the span is defined within the text block it inherits the text block’s style.

Here is how it looks on the chart:

By Ore Zone

You must use the longhand TextBlock form to apply advanced formatting using spans. For revision, here is a TextBlock in longhand form (with attributes removed for clarity):

<TextBlock>By Ore Zone</TextBlock>

Recall how the TextBlock is opened using <TextBlock> and closed using </TextBlock>, and the displayed text is between the <> and </>. The equivalent shorthand (self-closing) form would be:

<TextBlock Text="By Ore Zone" />

Using the longhand form of the TextBlock makes it possible to add the Span, like this (again, without attributes):

<TextBlock>By <Span>Ore</Span> Zone</TextBlock>

Note how the Span is opened and closed in the same way as the TextBlock.

Also, recall that for tags to be nested, the inner tag must always be opened and closed within the outer tag. The following example is wrong because the TextBlock is closed before the Span:

<TextBlock>Classified by <Span>Ore Zone</TextBlock></Span>

Practicalities

Because of the small sizes of the label edit boxes you will find it easier to write your mark-up in a text editor such as Notepad or Notepad++ and then copy and paste it into the corresponding label edit box. (Don’t use a word processor because it will convert straight quotes to smart quotes and produce invalid mark-up.)

To replace existing mark-up press Ctrl+A to select the existing text in the label box, and then Ctrl+V to paste the new version (previously copied out of your text editor), overwriting the existing text.

Once you have made the change, Apply it instead of clicking OK on the form, since you may need a few attempts to format it correctly.

The Apply button is only available once you’ve displayed the chart and opened the form from the Vizex Layer Display pane. Once you modify any of the values in the form, the Apply button is enabled.

Chart