NoesisGUI

Text Tutorial

github Tutorial Data

Read-only text in XAML is mainly displayed using TextBlock elements. A TextBlock defines the content property Text where the user can specify any string. FontFamily, FontSize, FontStyle, FontWeight, Foreground and Background control how text displays within the element.

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="Hello World!"/>
</Grid>

The LineBreak tag can be used to manually break the line at a designated location.

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock>
        Hello World! <LineBreak/>
        Text after a line break.
    </TextBlock>
</Grid>
TextTutorialImg1.jpg

The default font is taken from the active theme. This can be changed by using the FontFamily property. FontFamily includes an URI to the directory where the font is located plus the family name separated by a # character.

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="Using Different Fonts" HorizontalAlignment="Center"
          FontFamily="Fonts/#K22 Ambelyn Condensed" FontSize="70"/>
        <TextBlock Text="Using Different Fonts" HorizontalAlignment="Center"
          FontFamily="Fonts/#Laffayette Comic Pro" FontSize="28"/>
        <TextBlock Text="Using Different Fonts" HorizontalAlignment="Center"
          FontFamily="Fonts/#Monkirta Pursuit NC" FontSize="30"/>
    </StackPanel>
</Grid>
TextTutorialImg2.jpg

Thanks to property value inheritance, the FontFamily property enables child elements in a tree of elements to obtain the value from parent elements.

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"
     TextElement.FontFamily="Fonts/#Laffayette Comic Pro">
        <TextBlock Text="One"/>
        <TextBlock Text="Two"/>
        <TextBlock Text="Three"/>
        <TextBlock Text="Four"/>
    </StackPanel>
</Grid>

Text style properties

TextBlock defines two properties that describe the style and weight of the text:

  • FontStyle which can be set to Normal (default) or Italic
  • FontWeight which can be set to Normal (default) or Bold
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="Normal" FontStyle="Normal" FontWeight="Normal"/>
        <TextBlock Text="Italic" FontStyle="Italic" FontWeight="Normal"/>
        <TextBlock Text="Bold" FontStyle="Normal" FontWeight="Bold"/>
        <TextBlock Text="Bold Italic" FontStyle="Italic" FontWeight="Bold"/>
    </StackPanel>
</Grid>
TextTutorialImg3.jpg

Text layout properties

As any other UI element in Noesis, a TextBlock can be positioned relative to the parent container using the HorizontalAlignment and VerticalAlignment properties from FrameworkElement. The layout process uses these properties to assign a rectangle to the TextBox where the text will be displayed. How text is aligned inside that rectangle can be specified using the TextAlignment property, which accepts the Left (default), Center, Justify and Right values.

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Width="200">
        <Border BorderBrush="DodgerBlue" BorderThickness="1" Margin="2" Padding="1">
            <TextBlock Text="Left" TextAlignment="Left"/>
        </Border>
        <Border BorderBrush="DodgerBlue" BorderThickness="1" Margin="2" Padding="1">
            <TextBlock Text="Center" TextAlignment="Center"/>
        </Border>
        <Border BorderBrush="DodgerBlue" BorderThickness="1" Margin="2" Padding="1">
            <TextBlock Text="Right" TextAlignment="Right"/>
        </Border>
    </StackPanel>
</Grid>
TextTutorialImg4.jpg

In addition to text alignment, user can specify how text behaves when it reaches the edge of the containing box. This can be done through the TextWrapping property which can be set to NoWrap (default), Wrap and WrapWithOverflow. When content overflows the content area the property TextTrimming defines the text trimming behavior. Valid values are: None (default), CharacterEllipsis and WordEllipsis.

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="White" UseLayoutRounding="True"
  TextElement.Foreground="Black">

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="2" Grid.Column="0" Text="Justify" TextAlignment="Right" FontWeight="Bold"
            VerticalAlignment="Center"/>
        <TextBlock Grid.Row="3" Grid.Column="0" Text="Left" TextAlignment="Right" FontWeight="Bold"
            VerticalAlignment="Center"/>
        <TextBlock Grid.Row="4" Grid.Column="0" Text="Center" TextAlignment="Right" FontWeight="Bold"
            VerticalAlignment="Center"/>
        <TextBlock Grid.Row="5" Grid.Column="0" Text="Right" TextAlignment="Right" FontWeight="Bold"
            VerticalAlignment="Center"/>

        <Border Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Background="LightGray" Margin="5,1" Padding="0,2">
            <TextBlock Text="NoWrap" TextAlignment="Center" FontWeight="Bold"/>
        </Border>
        <Border Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="3" Background="LightGray" Margin="5,1" Padding="0,2">
            <TextBlock Text="Wrap" TextAlignment="Center" FontWeight="Bold"/>
        </Border>
        <Border Grid.Row="0" Grid.Column="7" Grid.ColumnSpan="3" Background="LightGray" Margin="5,1" Padding="0,2">
            <TextBlock Text="WrapWithOverflow" TextAlignment="Center" FontWeight="Bold"/>
        </Border>

        <TextBlock Grid.Row="1" Grid.Column="1" Text="NoTrimming" TextAlignment="Center" FontWeight="Bold"/>
        <TextBlock Grid.Row="1" Grid.Column="2" Text="CharTrimming" TextAlignment="Center" FontWeight="Bold"/>
        <TextBlock Grid.Row="1" Grid.Column="3" Text="WordTrimming" TextAlignment="Center" FontWeight="Bold"/>

        <TextBlock Grid.Row="1" Grid.Column="4" Text="NoTrimming" TextAlignment="Center" FontWeight="Bold"/>
        <TextBlock Grid.Row="1" Grid.Column="5" Text="CharTrimming" TextAlignment="Center" FontWeight="Bold"/>
        <TextBlock Grid.Row="1" Grid.Column="6" Text="WordTrimming" TextAlignment="Center" FontWeight="Bold"/>

        <TextBlock Grid.Row="1" Grid.Column="7" Text="NoTrimming" TextAlignment="Center" FontWeight="Bold"/>
        <TextBlock Grid.Row="1" Grid.Column="8" Text="CharTrimming" TextAlignment="Center" FontWeight="Bold"/>
        <TextBlock Grid.Row="1" Grid.Column="9" Text="WordTrimming" TextAlignment="Center" FontWeight="Bold"/>

        <Border Grid.Row="2" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Justify" TextWrapping="NoWrap" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="2" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Justify" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="2" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Justify" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="2" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Justify" TextWrapping="Wrap" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="2" Grid.Column="5" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Justify" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="2" Grid.Column="6" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Justify" TextWrapping="Wrap" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="2" Grid.Column="7" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Justify" TextWrapping="WrapWithOverflow" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="2" Grid.Column="8" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Justify" TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="2" Grid.Column="9" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Justify" TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="3" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="3" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="3" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Left" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="3" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Left" TextWrapping="Wrap" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="3" Grid.Column="5" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="3" Grid.Column="6" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="3" Grid.Column="7" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Left" TextWrapping="WrapWithOverflow" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="3" Grid.Column="8" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Left" TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="3" Grid.Column="9" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Left" TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="4" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="4" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="4" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Center" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="4" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Center" TextWrapping="Wrap" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="4" Grid.Column="5" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Center" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="4" Grid.Column="6" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Center" TextWrapping="Wrap" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="4" Grid.Column="7" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Center" TextWrapping="WrapWithOverflow" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="4" Grid.Column="8" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Center" TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="4" Grid.Column="9" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Center" TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="5" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="5" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="5" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Right" TextWrapping="NoWrap" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="5" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Right" TextWrapping="Wrap" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="5" Grid.Column="5" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Right" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="5" Grid.Column="6" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Right" TextWrapping="Wrap" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

        <Border Grid.Row="5" Grid.Column="7" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Right" TextWrapping="WrapWithOverflow" TextTrimming="None"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="5" Grid.Column="8" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Right" TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>
        <Border Grid.Row="5" Grid.Column="9" BorderBrush="Black" BorderThickness="1" Margin="5,3" Width="100">
            <TextBlock TextAlignment="Right" TextWrapping="WrapWithOverflow" TextTrimming="WordEllipsis"
                Text="Some text to tryout quitedifferentorsimilar alignments"/>
        </Border>

    </Grid>

</Grid>
TextTutorialImg5.png

Text color properties

TextBlock defines the following properties to set the color of the text and its background:

  • The Foreground property is used to specify the color of the text.
  • The Background property is used to specify the color that fills the arrangement rectangle of the TextBlock.

We also provide extensions to add stroking capabilities to TextBlock elements. These extensions are defined under the namespace NoesisGUIExtensions that should be included in the root element of the XAML file. Attached properties Text.Stroke and Text.StrokeThickness can be used to specify the color of the stroke and stroke thickness respectively (see highlighted lines in the following example).

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions">
    <StackPanel VerticalAlignment="Center" Width="200" TextElement.FontSize="25">
        <TextBlock Text="Foreground" TextAlignment="Center" Margin="4" Foreground="DodgerBlue"/>
        <TextBlock Text="Background" TextAlignment="Center" Margin="3" Padding="1" Background="DodgerBlue"/>
        <TextBlock Text="Stroke" TextAlignment="Center" Margin="4"
          noesis:Text.Stroke="DodgerBlue"
          noesis:Text.StrokeThickness="2.5"/>
    </StackPanel>
</Grid>
TextTutorialImg6.jpg

Fonts at Runtime

The FontFamily property can be set from code by specifying the path to the font family location.

Native SDK (C++)

TextBlock* tb = root->FindName<TextBlock>("Caption");
Ptr<FontFamily> fontFamily = *new FontFamily("Samples/Fonts/Laffayette Comic Pro");
tb->SetFontFamily(fontFamily.GetPtr());

Unity (C#)

TextBlock tb = (TextBlock)root.FindName("Caption");
tb.FontFamily = new FontFamily("Assets/Samples/Fonts/Laffayette Comic Pro");

Glyph Advance

You can load a font resource to obtain info about the glyph advance that can be used to measure text or perform custom word wrapping.

Native SDK (C++)

Ptr<FontFamily> fontFamily = *new FontFamily("Samples/Fonts/Laffayette Comic Pro");
Font* font = NsGetSystem<IUISystem>()->LoadFont(fontFamily.GetPtr(),
    FontStyle_Normal, FontWeight_Normal, 12.0f, 0.0f);

const NsChar* text = "Hello World!";
const NsChar* p = text;

NsFloat32 textWidth = 0.0f;
while (*p != 0)
{
    textWidth += font->GetGlyphAdvance((NsUInt32)*p);
    p++;
}

Unity (C#)

FontFamily fontFamily = new FontFamily("Assets/Samples/Fonts/Laffayette Comic Pro");
Font font = NoesisGUISystem.LoadFont(fontFamily, FontStyle.Normal, FontWeight.Normal,
    12.0f, 0.0f);

string text = "Hello World!";

float textWidth = 0.0f;
foreach (char ch in text)
{
    textWidth += font.GetGlyphAdvance((uint)ch);
}
© 2017 Noesis Technologies