Step 1 of 5: Creating the Application

In This Topic

In this step, you'll create a new Universal Windows application, add a C1RichTextBox control, and add the markup to create the top and bottom app bars.

Select File | New | Project to open the New Project dialog box.
1. Select Templates | Visual C# | Windows | Universal.
2. From the templates list, select Blank App (Universal Windows).
3. Enter a name for your application and click OK. A new, blank application will open.

In the Solution Explorer, right-click the References file and select Add Reference from the list. Browse to locate the following assembly references:

C1.UWP
C1.UWP.RichTextBox
C1.UWP.RichTextBox.AppBar
C1.UWP.RichTextBox.Menu

Double-click the MainPage.xaml file to open it.

Add the following namespace declarations to the <Page> tag at the top of the page:

XAML	Copy Code
xmlns:RichTextBox="using:C1.Xaml.RichTextBox" xmlns:Xaml="using:C1.Xaml"

Your <Page> tag should resemble the following:

XAML	Copy Code
<Page xmlns:RichTextBox="using:C1.Xaml.RichTextBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:AppBarTest3" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Xaml="using:C1.Xaml" x:Class="AppBarTest3.MainPage" mc:Ignorable="d">

XAML

Copy Code

<Page xmlns:RichTextBox="using:C1.Xaml.RichTextBox"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppBarTest3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Xaml="using:C1.Xaml"
    x:Class="AppBarTest3.MainPage"
    mc:Ignorable="d">

Directly above the <Grid> </Grid> tags on your page, add <Page.Resources>:

XAML	Copy Code
<Page.Resources> <ResourceDictionary Source="Common/StandardStyles.xaml"/> </Page.Resources>

You'll add the StandardStyles.xaml file in Step 2.

Add the following markup between the <Grid> </Grid> tags to add some row definitions:

XAML	Copy Code
<Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>

Place your cursor below the closing </Grid.RowDefinition> tag. Open the Visual Studio ToolBox and locate the C1RichTextBox control. Double-click the control to add it to your page.

Edit the <RichTextBox:C1RichTextBox/> tag to that is resembles the following. You'll add a name for your control and two events:

<RichTextBox:C1RichTextBox x:Name="rtb" Grid.Row="1" Margin="116,0,100,100" RequestNavigate="rtb_RequestNavigate" PointerPressed="rtb_PointerPressed" />

Locate the closing </Grid> tag on your page and place your cursor beneath it. Add the following markup to create the framework for the top and bottom AppBars:

XAML	Copy Code
<Page.TopAppBar> <AppBar x:Name="topAppBar" IsSticky="True" Padding="10,0,10,0"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> </StackPanel> </Grid> </AppBar> </Page.TopAppBar> <Page.BottomAppBar> <AppBar x:Name="bottomAppBar" IsSticky="True" Padding="10,0,10,0"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar>

XAML

Copy Code

<Page.TopAppBar>
   <AppBar x:Name="topAppBar" IsSticky="True" Padding="10,0,10,0">
     <Grid>
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                  
       </StackPanel>
     </Grid>
   </AppBar>
</Page.TopAppBar>
<Page.BottomAppBar>
  <AppBar x:Name="bottomAppBar" IsSticky="True" Padding="10,0,10,0">
    <Grid>
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                 
      </StackPanel>
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                  
      </StackPanel>
    </Grid>
  </AppBar>
</Page.BottomAppBar>

Place your cursor between the TopAppBar's <StackPanel> </StackPanel> tags. Add the following markup to add three C1RichTextBox Tools:

XAML	Copy Code
<RichTextBox:C1LeftAlignTool x:Name="btnLeftAlign" Style="{StaticResource AlignLeftAppBarButtonStyle}" /> <RichTextBox:C1CenterAlignTool x:Name="btnCenterAlign" Style="{StaticResource AlignCenterAppBarButtonStyle}" /> <RichTextBox:C1RightAlignTool x:Name="btnRightAlign" Style="{StaticResource AlignRightAppBarButtonStyle}" />

XAML

Copy Code

<RichTextBox:C1LeftAlignTool x:Name="btnLeftAlign" Style="{StaticResource AlignLeftAppBarButtonStyle}" />
<RichTextBox:C1CenterAlignTool x:Name="btnCenterAlign" Style="{StaticResource AlignCenterAppBarButtonStyle}" />
<RichTextBox:C1RightAlignTool x:Name="btnRightAlign" Style="{StaticResource AlignRightAppBarButtonStyle}" />

Next, locate the first set of <StackPanel> </StackPanel> tags in the BottomAppBar. Add the following markup to add three general Button controls:

XAML	Copy Code
<Button x:Name="btnCopy" Style="{StaticResource CopyAppBarButtonStyle}" Click="btnCopy_Click"/> <Button x:Name="btnPaste" Style="{StaticResource PasteAppBarButtonStyle}" Click="btnPaste_Click"/> <Button x:Name="btnCut" Style="{StaticResource CutAppBarButtonStyle}" Click="btnCut_Click"/>

XAML

Copy Code

<Button x:Name="btnCopy" Style="{StaticResource CopyAppBarButtonStyle}" Click="btnCopy_Click"/>
<Button x:Name="btnPaste" Style="{StaticResource PasteAppBarButtonStyle}" Click="btnPaste_Click"/>
<Button x:Name="btnCut" Style="{StaticResource CutAppBarButtonStyle}" Click="btnCut_Click"/>

Locate the second set of <StackPanel> </StackPanel> tags. Add the following markup to add five C1RichTextBox Tools and one general Button control:

XAML	Copy Code
<RichTextBox:C1IncreaseFontSizeTool x:Name="btnIncreaseFontSize" Style="{StaticResource FontIncreaseAppBarButtonStyle}"/> <RichTextBox:C1DecreaseFontSizeTool x:Name="btnDecreaseFontSize" Style="{StaticResource FontDecreaseAppBarButtonStyle}"/> <RichTextBox:C1BoldTool x:Name="btnBold" Style="{StaticResource BoldAppBarButtonStyle}" /> <RichTextBox:C1ItalicTool x:Name="btnItalic" Style="{StaticResource ItalicAppBarButtonStyle}" /> <RichTextBox:C1UnderlineTool x:Name="btnUnderline" Style="{StaticResource UnderlineAppBarButtonStyle}" /> <Button x:Name="btnMore" Style="{StaticResource MoreAppBarButtonStyle}" Click="btnMore_Click"/>

XAML

Copy Code

<RichTextBox:C1IncreaseFontSizeTool x:Name="btnIncreaseFontSize" Style="{StaticResource FontIncreaseAppBarButtonStyle}"/>
<RichTextBox:C1DecreaseFontSizeTool x:Name="btnDecreaseFontSize" Style="{StaticResource FontDecreaseAppBarButtonStyle}"/>
<RichTextBox:C1BoldTool x:Name="btnBold" Style="{StaticResource BoldAppBarButtonStyle}" />
<RichTextBox:C1ItalicTool x:Name="btnItalic" Style="{StaticResource ItalicAppBarButtonStyle}" />
<RichTextBox:C1UnderlineTool x:Name="btnUnderline" Style="{StaticResource UnderlineAppBarButtonStyle}" />
<Button x:Name="btnMore" Style="{StaticResource MoreAppBarButtonStyle}" Click="btnMore_Click"/>

In this step, you created a new Universal Windows application, added the C1RichTextBox control, added the markup for the two App Bars, and added both C1 Tools and general controls to the App Bar markup. In the next step, you'll add your resource files and some general application code.