Rich Edit Box in Windows Store App

Introduction

In this article we will reveal the use of one of the advanced controls of XAML files, Rich Edit Box. Rich Edit Box comes with many knew features that make the user more comfortable to write text in the Text Box. Here we will enable two features of the Rich Text Box; one is a spelling check and the other is text prediction that will work at run time when the user enters text. The system checks the spelling at run time and gives suggestions for the correct spelling if it determines that the spelling might be incorrect. And the second option predicts the word from their dictionary and corrects it automatically.   

In the following we are putting the entire code of the XAML file and the code behind file to create this mini application. 

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="App10.MainPage"

    IsTabStop="false"

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

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

    xmlns:local="using:App10"

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

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

    mc:Ignorable="d">

   

<Page.Resources>

        <Style x:Key="BaseStatusStyle" TargetType="TextBlock">

            <Setter Property="FontFamily" Value="Segoe UI Semilight"/>

            <Setter Property="FontSize" Value="14.667"/>

            <Setter Property="Margin" Value="0,0,0,5"/>

        </Style>

        <Style x:Key="StatusStyle" BasedOn="{StaticResource BaseStatusStyle}" TargetType="TextBlock">

            <Setter Property="Foreground" Value="Green"/>

        </Style>

        <Style x:Key="ErrorStyle" BasedOn="{StaticResource BaseStatusStyle}" TargetType="TextBlock">

            <Setter Property="Foreground" Value="Blue"/>

        </Style>

    </Page.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

 

        <!--App Orientation States-->

 

        <VisualStateManager.VisualStateGroups>

            <VisualStateGroup x:Name="OrientationStates">

                <VisualState x:Name="FullScreenLandscapeScale100Percent"/>

                <VisualState x:Name="FilledScale100Percent">

                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

                            <DiscreteObjectKeyFrame KeyTime="0">

                                <DiscreteObjectKeyFrame.Value>

                                    <Thickness>40,20,40,20</Thickness>

                                </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

                            <DiscreteObjectKeyFrame KeyTime="0">

                                <DiscreteObjectKeyFrame.Value>

                                    <Orientation>Horizontal</Orientation>

                                </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="700">

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="FullScreenPortraitScale100Percent">

                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

                            <DiscreteObjectKeyFrame KeyTime="0">

                                <DiscreteObjectKeyFrame.Value>

                                    <Thickness>40,20,40,20</Thickness>

                                </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="400">

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="SnappedScale100Percent">

                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

                            <DiscreteObjectKeyFrame KeyTime="0">

                                <DiscreteObjectKeyFrame.Value>

                                    <Thickness>20,20,20,20</Thickness>

                                </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

                            <DiscreteObjectKeyFrame KeyTime="0">

                                <DiscreteObjectKeyFrame.Value>

                                    <Orientation>Vertical</Orientation>

                                </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="250">

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LegalPanel">

                            <DiscreteObjectKeyFrame KeyTime="0">

                                <DiscreteObjectKeyFrame.Value>

                                    <Thickness>0,0,10,0</Thickness>

                                </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="FullScreenLandscapeScale140Percent">

                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

                            <DiscreteObjectKeyFrame KeyTime="0">

                                <DiscreteObjectKeyFrame.Value>

                                    <Thickness>40,20,40,20</Thickness>

                                </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

                            <DiscreteObjectKeyFrame KeyTime="0">

                                <DiscreteObjectKeyFrame.Value>

                                    <Orientation>Horizontal</Orientation>

                                </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="600">

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="FilledScale140Percent"/>

                <VisualState x:Name="FullScreenPortraitScale140Percent">

                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

                            <DiscreteObjectKeyFrame KeyTime="0">

                                <DiscreteObjectKeyFrame.Value>

                                    <Thickness>40,20,40,20</Thickness>

                                </DiscreteObjectKeyFrame.Value>

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="ScenarioInput">

                            <DiscreteObjectKeyFrame KeyTime="0" Value="250">

                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

                <VisualState x:Name="SnappedScale140Percent"/>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

    <Grid Background="Yellow">

            <Grid.RowDefinitions>

                <RowDefinition Height=".033*"></RowDefinition>

                <RowDefinition Height=".333*"></RowDefinition>

                <RowDefinition Height=".133*"></RowDefinition>

            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0" Text="Rich Editable Box in Metro Apps"

                   FontSize="20" FontWeight="Bold" Foreground="Red"

                   VerticalAlignment="Center" HorizontalAlignment="Center">

            </TextBlock>

            <RichEditBox x:Name="txt1" Height="300" Width="400" Grid.Row="1"

                Background="White" IsSpellCheckEnabled="True" CharacterSpacing="1"

                IsTextPredictionEnabled="True" BorderThickness="5" BorderBrush="Black"

                FontSize="20" FontWeight="Black" VerticalAlignment="Top" >

            </RichEditBox>

 

        </Grid>

    </Grid>

</Page>

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