RichTextBox for WPF
簡単な書式設定ツールバーの実装
タスク別ヘルプ > 簡単な書式設定ツールバーの実装

C1RichTextBoxToolbar コントロールを使用すると、C1RichTextBox コントロールで使用できる完全なツールバーを追加できますが、独自のツールバーを簡単に作成することもできます。ほとんどの高機能エディタには、現在の選択に太字、斜体、または下線の書式設定を適用するボタンを含むツールバーがあります。選択範囲が移動すると、これらのボタンの状態も変化し、選択されているテキストに太字、斜体、下線などの書式設定が適用されているかどうかが示されます。

C1RichTextBox を使用してシンプルなツールバーを実装するのは簡単です。たとえば、次の手順に従います。

  1. ソリューションエクスプローラで、プロジェクトを右クリックし、コンテキストメニューから［参照の追加］を選択します。

  2. ［参照の追加］ダイアログボックスで、C1.WPF.RichTextBox.4 または C1.Silverlight.RichTextBox.5 アセンブリを選択したら、［OK］をクリックします。

  3. ページの XAML を更新します。次のようになります。

    XAML
    コードのコピー 
    <Window xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"x:Class=" 

       C1RichTextBoxIntro.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow">
<Grid x:Name="LayoutRoot" Background="White">
       <Grid.RowDefinitions>
           <RowDefinition Height="Auto" />
           <RowDefinition />
       </Grid.RowDefinitions>
       <StackPanel Orientation="Horizontal" >
           <ToggleButton x:Name="_btnBold" Content="B" Click="_btnBold_Click"

           Checked="_btnBold_Click" />
           <ToggleButton x:Name="_btnItalic" Content="I" Click="_btnItalic_Click" />
           <ToggleButton x:Name="_btnUnderline" Content="U" Click="_btnUnderline_Click" />
       </StackPanel>
       <c1:C1RichTextBox x:Name="_rtb" Grid.Row="1"
      AcceptsReturn="True"
      SelectionChanged="_rtb_SelectionChanged"/>
   </Grid>

    このマークアップは、C1RichTextBox コントロールと、その書式設定を制御する３つのボタン（太字、斜体、下線）を追加します。ボタンをクリックすると、関連付けられているイベントハンドラが選択範囲の書式設定を更新します。次の手順のコードがそれを実行します。

  4. ページを右クリックし、［コードの表示］を選択してコードエディタに切り替えます。

  5. 次のコードをアプリケーションに追加します。

    コードのコピー 
    Private Sub _btnBold_Click(sender As Object, e As RoutedEventArgs)
Dim fw As System.Nullable(Of FontWeight) = _rtb.Selection.FontWeight
_rtb.Selection.FontWeight = If(fw.HasValue AndAlso fw.Value
= FontWeights.Bold, FontWeights.Normal, FontWeights.Bold)
End Sub
    コードのコピー 
    private void _btnBold_Click(object sender, RoutedEventArgs e)
{
  FontWeight? fw = _rtb.Selection.FontWeight;
  _rtb.Selection.FontWeight = fw.HasValue && fw.Value == FontWeights.Bold
      ? FontWeights.Normal
      : FontWeights.Bold;
}
    このコードは、最初に現在の選択範囲の FontWeight プロパティの値を取得します。null 可能な値が返されます（したがって、型宣言に '?' があります）。選択範囲に複数のフォントウェイトが混在している場合は、null 値が返されます。上のコードでは、選択範囲全体に単一のフォントウェイトとして太字が設定されている場合はフォントウェイトを "normal" に設定し、それ以外の場合はフォントウェイトを "bold" に設定しています。

  6. 次のコードを追加して、斜体ボタンを初期化します。

    コードのコピー 
    Private Sub _btnItalic_Click(sender As Object, e As RoutedEventArgs)
    Dim fs As System.Nullable(Of FontStyle) = _rtb.Selection.FontStyle
    _rtb.Selection.FontStyle = If(fs.HasValue AndAlso fs.Value =
    FontStyles.Italic,FontStyles.Normal, FontStyles.Italic)
End Sub
    コードのコピー 
    private void _btnItalic_Click(object sender, RoutedEventArgs e)
{
  FontStyle? fs = _rtb.Selection.FontStyle;
  _rtb.Selection.FontStyle = fs.HasValue && fs.Value == FontStyles.Italic
      ? FontStyles.Normal
      : FontStyles.Italic;
}

    斜体ボタンを処理するコードは、FontWeight プロパティの代わりに FontStyle プロパティを使用することを除いて、太字ボタンを処理するコードとほとんど同じです。

  7. 次のコードを追加して、下線ボタンを初期化します。

    コードのコピー 
    Private Sub _btnUnderline_Click(sender As Object, e As RoutedEventArgs)
If _btnUnderline.IsChecked.HasValue Then rtb.Selection.TextDecorations =
If(_btnUnderline.IsChecked.Value, C1TextDecorations.Underline, Nothing)
   End If
End Sub
    コードのコピー 
    private void _btnUnderline_Click(object sender, RoutedEventArgs e)
{
    if (_btnUnderline.IsChecked.HasValue)
    {
        _rtb.Selection.TextDecorations = _btnUnderline.IsChecked.Value
        ? C1.WPF.RichTextBox.Documents.C1TextDecorations.Underline
      : null;
    }
}

    下線ボタンを処理するコードも同様ですが、この場合は TextDecorations プロパティを使用します。TextDecorations プロパティは実際のオブジェクトを返すので、null 可能プロパティではありません。上のコードで、３つのボタンが動作します。

  8. 次のコードを追加して、SelectionChanged イベントのイベントハンドラを実装します。

    コードのコピー 
    Private Sub _rtb_SelectionChanged(sender As Object, e As EventArgs)
    Dim fw As System.Nullable(Of FontWeight) = _rtb.Selection.FontWeight
    _btnBold.IsChecked = fw.HasValue AndAlso fw.Value = FontWeights.Bold
    Dim fs As System.Nullable(Of FontStyle) = _rtb.Selection.FontStyle
    _btnItalic.IsChecked = fs.HasValue AndAlso fs.Value = FontStyles.Italic
    _btnUnderline.IsChecked = (sel.TextDecorations IsNot Nothing)
End Sub
    コードのコピー 
    void _rtb_SelectionChanged(object sender, EventArgs e)
{
  var sel = _rtb.Selection;
  FontWeight? fw = _rtb.Selection.FontWeight;
  _btnBold.IsChecked = fw.HasValue && fw.Value == FontWeights.Bold;
  FontStyle? fs = _rtb.Selection.FontStyle;
  _btnItalic.IsChecked = fs.HasValue && fs.Value == FontStyles.Italic;
  _btnUnderline.IsChecked = (sel.TextDecorations != null);
}
    このイベントハンドラは、ユーザーが選択範囲を移動するのに合わせてボタンの状態を変更します。たとえば、太字で下線付きの単語を選択すると、それらのボタンが押下した状態になります。
    このコードは、前と同様に FontWeight、FontStyle、TextDecorations の各プロパティを使用し、対応するボタンの IsChecked プロパティを設定します。

ここまでの成果

簡単なツールバーを作成しました。実行すると、アプリケーションは次の画像のようになります。

テキストを入力し、太字、斜体、下線の各ボタンを押下すると、上の図のようにテキストを書式設定できます。

完全なツールバーには、さらに多くのボタンとコントロールが含まれますが、同様の方法で処理されます。ComponentOne for WPF には、完全なツールバー C1RichTextBoxToolbar が別のアセンブリとして含まれます。C1RichTextBoxToolbar コントロールのソースコードが付属しているため、カスタマイズしたツールバーを作成できます。詳細については、「C1RichTextBoxToolbar の使い方」を参照してください。

 

 

Copyright © MESCIUS inc. All rights reserved.