> For the complete documentation index, see [llms.txt](https://docs.dbnetsoft.com/dbnetsoft/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dbnetsoft.com/dbnetsoft/screenspro/controls/textelement.md).

# TextElement

This element will display a text. It is drawn directly instead of through a `TextBlock`, which allows it to be trimmed, scaled down and aligned on the decimal point.

Either set `Text`, or set `Firstname` and `Lastname` and let `NameFormat` combine the two. `Text` wins when both are set.

## Properties

| Name                  | Type    | Description                                                                                                      |
| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- |
| `Text`                | String  | The text to display. It is also the content property, so it can be written between the tags.                     |
| `Firstname`           | String  | Used together with `Lastname` when `Text` is empty.                                                              |
| `Lastname`            | String  | Used together with `Firstname` when `Text` is empty.                                                             |
| `NameFormat`          | String  | How the two are combined, with `{0}` for `Firstname` and `{1}` for `Lastname`. Default `{0} {1}`.                |
| `TextAlignment`       | Enum    | `Left`, `Right`, `Center` or `DecimalPoint`. Default `Left`.                                                     |
| `DecimalPointPadding` | Double  | Distance kept between the decimal point and the right edge when `TextAlignment` is `DecimalPoint`. Default `20`. |
| `TextTrimming`        | Enum    | What happens when the text is wider than the element. Default `NoTrimming`.                                      |
| `StrikeThrough`       | Boolean | Draws a line through the text. Default `false`.                                                                  |
| `LineHeight`          | Double  | Line height used for multi-line text. Unset by default, which uses the height of the font.                       |
| `Casing`              | Enum    | `AsIs`, `Lowercase` or `Uppercase`. Default `AsIs`.                                                              |
| `VerticalSizing`      | Enum    | Which height the element takes and centers the text in: `LineBox`, `CapHeight` or `Ink`. Default `LineBox`.      |

## Alignment

`TextAlignment` decides where the text is placed horizontally inside the element:

| Value          | Description                                                                                                                                                                                                                                                          |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Left`         | The text starts at the left edge, after `Padding.Left`.                                                                                                                                                                                                              |
| `Center`       | The text is centered in the width of the element.                                                                                                                                                                                                                    |
| `Right`        | The text ends at the right edge.                                                                                                                                                                                                                                     |
| `DecimalPoint` | The last `.` in the text is placed `DecimalPointPadding` away from the right edge, so times and numbers in rows below each other line up on their decimal point. With `Scale` trimming the padding shrinks together with the font. A text without a `.` is centered. |

## Trimming

`TextTrimming` decides what happens to a text that does not fit into the element:

| Value           | Description                                                                                      |
| --------------- | ------------------------------------------------------------------------------------------------ |
| `NoTrimming`    | The text is drawn as it is and is cut off at the edge.                                           |
| `Trim`          | The text is cut at the last character that still fits and ends with a dot.                       |
| `TrimLastWord`  | The text is cut at the last whole word that still fits.                                          |
| `TrimFirstname` | `Firstname` is shortened to its initial, and the result is scaled down if it still does not fit. |
| `Scale`         | The font size is reduced until the text fits.                                                    |

## Casing

`Casing` changes the letters of the displayed text. The bound value itself is not changed.

| Value       | Description                             |
| ----------- | --------------------------------------- |
| `AsIs`      | The text is shown exactly as it is set. |
| `Lowercase` | The text is shown in lowercase letters. |
| `Uppercase` | The text is shown in capital letters.   |

## Multiple lines

A `Text` containing a line break is drawn line by line, and every line is aligned on its own according to `TextAlignment`.

## Vertical sizing

By default the element is as tall as the font's line height, which also leaves room for accents above the capitals and for descenders below the baseline. With some fonts this adds a lot of empty space above and below the text, so a background or a border around the element looks too tall.

`VerticalSizing` decides which height the element takes and how the text is centered in it. It is also the height that `Scale` compares against when the element has a fixed height.

| Value       | Description                                                                                                                                                                                                                          |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `LineBox`   | The font's line height. Includes the space for accents and descenders even when the text has none.                                                                                                                                   |
| `CapHeight` | From the top of the capital letters to the baseline (of the last line for multi-line text). The height is the same for every text, so a bar does not change its size when the text changes. Accents and descenders reach outside it. |
| `Ink`       | Exactly the top and bottom of the glyphs that are drawn. The height changes with the text, e.g. when a name contains an `Ä` or a `g`. An empty text falls back to `CapHeight`.                                                       |

{% hint style="info" %}
`CapHeight` is usually the best choice for text in a background bar, especially with fonts that only have capital letters.
{% endhint %}

## Example

```xml
<controls:TextElement Firstname="Tobias" Lastname="Däuber"
                      NameFormat="{0} {1}"
                      TextTrimming="TrimFirstname"
                      TextAlignment="Center"
                      FontSize="40" Width="300" />
```

A text in a background bar that is exactly as tall as its capital letters, plus the border's padding:

```xml
<Border Background="#99000000" Padding="8,4">
    <controls:TextElement Text="{Binding Local.Text}"
                          VerticalSizing="CapHeight"
                          TextAlignment="Center"
                          FontSize="30" />
</Border>
```
