Rich Text Block With Advance Feature in Windows Store App

Introduction

Today we will explain some of the advanced features of the Metro style Rich Text Block control. There are some features in the Rich Text Block control which are easy to design at design time. In this article we will use paragraph, Run, and the InlineUIContainer to reveal the images within the Text Block Control. The paragraph attribute is a parent attribute which contains all other attributes which will be shown on the Rich Text Block control. The second attribute Run is used to provide a specific design like font style, foreground color and font weight etc. to part of a paragraph or word that we want to highlight in the entire paragraph.

The hird attribute is InlineUIContainer, which is used as a parent attribute for the image control that we want to show within the block and with the help of the LineBreak control we can go to the next line in a 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 2012
• 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 MainPage.xaml and MainPage.xaml.cs files.

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

Code :

<Page

    x:Class="App7.MainPage"

    IsTabStop="false"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App7"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

     <Grid x:Name="LayoutRoot" Background="Yellow"

          Height="450" Width="550">

            <RichTextBlock HorizontalAlignment="Left"

               Margin="10,12,0,0" Name="contentBox" VerticalAlignment="Top"

               Height="530" Width="390" >

                <Paragraph FontFamily="Arial" FontSize="16"

                   TextAlignment="Justify" Foreground="Black">

                    This photograph describe about

                    <Run Text=" Windows Azure " FontStyle="Normal"

                         FontWeight="ExtraBold" Foreground="Blue" />

                    is an open cloud platform that enables you to quickly build,

                    deploy and manage applications across a global network

                    of Microsoft-managed datacenters.

                    <Run Text="Introduction to Windows Azure: the cloud operating system "

                         Foreground="blue" FontWeight="ExtraBold"/>

                    <LineBreak/>

                    <InlineUIContainer >

                        <Image Height="143" HorizontalAlignment="Left"

                           Margin="144,82,0,0" Name="images"

                           Stretch="Uniform" VerticalAlignment="Top"

                           Width="196" Source="Windows-Azure.jpg" />

                    </InlineUIContainer>

                    <LineBreak/>

                    <LineBreak/> |

                </Paragraph>

            </RichTextBlock>

        </Grid>

    </Grid>

</Page>

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