この手順では、新しい Windows ストアアプリケーションを作成し、C1RichTextBox コントロールを追加します。さらに、上部と下部のアプリケーションバーを作成するためのマークアップを追加します。

1. ［ファイル］→［新規作成］→［プロジェクト］を選択し、［新しいプロジェクト］ダイアログボックスを開きます。
   1. 右側のペインで C# の下にある［Windows ストア］を選択します。
   2. 左側のペインで［新しいアプリケーション (XAML)］を選択します。
   3. アプリケーションの名前を入力し、［OK］をクリックします。新しい空の Windows ストアアプリケーションが開きます。
2. ソリューションエクスプローラーで、［参照］ファイルを右クリックし、リストから［参照の追加］を選択します。次のアセンブリ参照を参照して選択します。
   • C1.Xaml
   • C1.Xaml.RichTextBox
   • C1.Xaml.RichTextBox.AppBar
   • C1.Xaml.RichTextBox.Menu
3. MainPage.xaml ファイルをダブルクリックして開きます。
4. ページ先頭の <Page> タグに次の名前空間宣言を追加します。

   XAML	コードのコピー
   xmlns:RichTextBox="using:C1.Xaml.RichTextBox" xmlns:Xaml="using:C1.Xaml"

   <Page> タグは次のようになります。

   XAML

   コードのコピー

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

5. ページ内の <Grid> </Grid> タグのすぐ上に、<Page.Resources> を追加します。

   XAML	コードのコピー
   <Page.Resources>         <ResourceDictionary Source="Common/StandardStyles.xaml"/>     </Page.Resources>

   StandardStyles.xaml ファイルは手順２で追加します。

6. 次のマークアップを <Grid> </Grid> タグの間に追加して、いくつかの行定義を追加します。

   XAML	コードのコピー
   <Grid.RowDefinitions>    <RowDefinition Height="140"/>    <RowDefinition Height="*"/> </Grid.RowDefinitions>

7. 終了タグ </Grid.RowDefinition> の下にカーソルを置きます。Visual Studio ツールボックスを開き、C1RichTextBox コントロールを見つけます。このコントロールをダブルクリックしてページに追加します。
8. <RichTextBox:C1RichTextBox/> タグを次のように編集します。コントロールの名前と２つのイベントを追加します。

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

9. 終了タグ </Grid> をページで見つけ、そのタグのすぐ下にカーソルを置きます。次のマークアップを追加して、上部と下部の AppBar のフレームワークを作成します。

   XAML

   コードのコピー

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

10. カーソルを TopAppBar の <StackPanel> </StackPanel> タグの間に置きます。次のマークアップを追加して、３つの C1RichTextBox ツールを追加します。

    XAML	コードのコピー
    <RichTextBox:C1LeftAlignTool x:Name="btnLeftAlign" Style="{StaticResource AlignLeftAppBarButtonStyle}" /> <RichTextBox:C1CenterAlignTool x:Name="btnCenterAlign" Style="{StaticResource AlignCenterAppBarButtonStyle}" /> <RichTextBox:C1RightAlignTool x:Name="btnRightAlign" Style="{StaticResource AlignRightAppBarButtonStyle}" />

11. 次に、BottomAppBar で最初の <StackPanel> </StackPanel> タグを探します。次のマークアップを追加して、３つの汎用 Button コントロールを追加します。

    XAML	コードのコピー
    <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"/>

12. ２番目の <StackPanel> </StackPanel> タグを探します。次のマークアップを追加して、５つの C1RichTextBox ツールと１つの汎用 Button コントロールを追加します。

    XAML

    コードのコピー

    <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"/>

この手順では、新しい Windows ストアアプリケーションを作成し、C1RichTextBox コントロールを追加しました。さらに、２つの AppBar のマークアップを追加し、いくつかの C1 ツールと汎用コントロールを AppBar のマークアップに追加しました。次の手順では、リソースファイルと汎用のアプリケーションコードを追加します。