Rich Text Box With Text Overflow Feature

Introduction

Today we will discuss one of the XAML controls; the Rich Text Box and its Text Overflow feature. Generally we use a Rich Text Box to display a paragraph to the XAML page. With the help of the Text Overflow feature of Text Box we can handle overflowing the line in the Text Box. Suppose we assign the height property of the Text Box with a fixed value, and in this height only 5 lines will be shown and your paragraph contains more than 5 lines. In this case you're not able to show all lines, so we can use the Text Overflow feature and see the whole paragraph.

Here we take two Rich Text Boxes and show the same paragraph in both boxes. The first box is not using its overflow feature and its size is double compression to the other box height while the second RTB is using the overflow feature. So finally you will see the result the first RTB showing only a few lines while the other RTB is showing the whole paragraph. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2011
• File -> New -> Project
• Choose Template -> Visual C# ->Metro Style Application
• Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the BlankPage.xaml and BlankPage.xaml.cs files.

Step 3 : The BlankPage.xaml file is as in the following code:

Code :

<Page
    x:Class="Application4.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Application8"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"      
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"     
   xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="SkyBlue">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".033*"/>
            <ColumnDefinition Width=".133*"/>
            <ColumnDefinition Width=".013*"/>
            <ColumnDefinition Width=".133*"/>
            <ColumnDefinition Width=".033*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height=".083*"/>
            <RowDefinition Height=".180*"/>
            <RowDefinition Height=".333*"/>
        </Grid.RowDefinitions>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Rich Text Box without Overflow Feature"FontSize="30"   HorizontalAlignment="Center" VerticalAlignment="Center">        </TextBlock>
<TextBlock Grid.Column="3" Grid.Row="0" Text="Rich Text Box with Overflow Feature "               FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center">       
</TextBlock>
        <StackPanel Grid.Column="1" Grid.Row="1">
            <RichTextBlock VerticalAlignment="Top" HorizontalAlignment="Right"
               Height="80" FontSize="20" Foreground="Red"   >
                <Paragraph>
In SQL server magic table is nothing more than an internal table which is created by the SQL server to recover recently inserted, deleted and updated data into SQL server database. That is when we insert or delete any record from any table in SQL server then recently inserted or deleted data from table also inserted into inserted magic table or deleted magic table with help of which we can recover data which is recently used to modify data into table either use in delete, insert or update to table. Basically there are two types of magic table in SQL server namely: inserted and deleted, update can be performed with help of these twos. Generally we cannot see these two table, we can only see it with the help Trigger's in SQL server.
                </Paragraph>
            </RichTextBlock>
        </StackPanel>
        <StackPanel Grid.Column="3" Grid.Row="1">
            <RichTextBlock  VerticalAlignment="Top" FontSize="20" Foreground="Green"
               HorizontalAlignment="Right" Height="50" OverflowContentTarget="{ Binding ElementName=NextRTB}" >
                <Paragraph>
In SQL server magic table is nothing more than an internal table which is created by the SQL server to recover recently inserted, deleted and updated data into SQL server database. That is when we insert or delete any record from any table in SQL server then recently inserted or deleted data from table also inserted into inserted magic table or deleted magic table with help of which we can recover data which is recently used to modify data into table either use in delete, insert or update to table. Basically there are two types of magic table in SQL server namely: inserted and deleted, update can be performed with help of these twos. Generally we cannot see these two table, we can only see it with the help Trigger's in SQL server.
                </Paragraph>
            </RichTextBlock>
            <RichTextBlockOverflow x:Name="NextRTB" >
            </RichTextBlockOverflow>
        </StackPanel>
    </Grid>
</Page>

Step 4 : After running this code the output looks like this: