Rich Edit Box in Windows Store App

Loading

Rich Edit Box in Windows Store App

Introduction

In this article we will revel the use of one of the advanced control of Xaml file is Rich Edit Box, Rich Edit Box come with lot of knew feature which make user more comfortable to write the text in Text Box. Here we will enable two feature of Rich Text Box one is Spelling check and second one is text prediction that will work on run time when user write some text. The system check the spelling at run time and give the suggestion for right spelling if it would find wrong. And second option predict the word from their dictionary and correct it automatically.

In below we are putting whole code of xaml file and 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">

<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: