ViewBox
ViewBoxコントロールは、ViewBoxコントロールのコンテナ配下のコントロールを、画面に合わせて自動的に拡大／縮小するコントロールです。WPFでは以前から提供されていたコントロールですが、Silverlight 4にバージョンアップしたタイミングで、Silverlight Toolkitでの提供からランタイムでの提供に格上げされました。
基本的な使い方は、ViewBoxの中に自動的に伸縮させたい画像などを表示させ、画面のリサイズに対応して画像を伸縮させる場合に利用します。リスト1は、イメージコントロールとチェックボックスコントロールに対して、ViewBoxによる伸縮を有効にした例です。
<Viewbox StretchDirection="UpOnly" MaxWidth="200" MaxHeight="200" >
<Image Source="/Navigation;component/Images/VS2010.png" />
</Viewbox>
<Viewbox>
<CheckBox Content="チェックボックスも同時に拡大縮小" />
</Viewbox>
この例では、画像が元サイズよりも小さくならないように、StrechDirectionプロパティにはUpOnly（拡大のみ）を指定し、同時に大きくなりすぎないようMaxWidhプロパティとMaxHeightプロパティを設定しています。
興味深いのは、チェックボックスなどの標準コントロールに関しても、画像と同様に伸縮が行われることです。Silverlightのコントロールがベクターグラフィックで表現されているため、ボタンなどのコントロールをViewBoxコントロールに入れることで、伸縮の対象になります。
また、ViewBoxコントロールはひとつの子要素しか持てません。複数のコントロールを内部に持ちたい場合は、StackPanelコントロールやGridコントロールなど、複数の子要素を持つことができるレイアウト系のコントロールを子要素に指定する必要があります（リスト2）。
<Viewbox>
<StackPanel Orientation="Horizontal" >
<Button Content="伸縮するボタン" />
<RadioButton Content="伸縮するラジオボタン" />
<Ellipse Fill="Black" Width="10" Height="10" />
</StackPanel>
</Viewbox>
実行結果を図9に示します。
リッチテキスト
RichTextBoxコントロールは、太字や色の付いたテキストなど、複数の書式を持ったテキストを表示/編集することができます。WindowFormsやASP.NETにも同様のコントロールが存在するため、その機能は想像しやすいのではないでしょうか。
今回は、図10のようにテキストボックス内の文字を装飾するサンプルを、RichTextBoxコントロールを使って作ってみましょう。
このサンプルのXAML側のコードは、リスト3になります。
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="大文字" Height="30" Width="50" Click="btnSize_Click" />
<Button Content="太字" Height="30" Width="50" Click="btnBold_Click" />
<Button Content="斜体" Height="30" Width="50" Click="btnItalic_Click" />
<Button Content="下線" Height="30" Width="50" Click="btnUnderline_Click" />
<Button Content="URL" Height="30" Width="50" Click="btnUrl_Click" />
<Button Content="赤色" Height="30" Width="50" Click="btnColor_Click"/>
</StackPanel>
<RichTextBox x:Name="richTextBox1" Width="400" Height="200" TextWrapping="Wrap" AcceptsReturn="True">
<Paragraph>
<Run FontSize="20" Foreground="Red" Text="夏の目標 (大きな赤い文字)" /> <LineBreak />
<Span>
今年の夏は、美味しいかき氷を食べるぞ！！
<LineBreak />
ただし、<Run TextDecorations="Underline">締切り</Run>は守りましょう。⇒<Hyperlink NavigateUri="http://www.wings.msn.to/">WINGS</Hyperlink>
<LineBreak />
</Span>
<InlineUIContainer>
<Image Source="/Navigation;component/Images/VS2010.png" Width="100" Height="100" />
</InlineUIContainer>
</Paragraph>
</RichTextBox>
RichTextBoxコントロールは、子要素に表2のようなクラスを指定することで、さまざまなテキストやオブジェクトを配置できます。表記が独特で少しわかりづらいですが、Visual Studioを利用していればこれらのクラスもインテリセンスで表示されるので、HTMLを編集するようにコンテンツを編集できます。
| RichTextBoxに配置できる要素 | 概要 |
| Paragraph | 段落を表す。内部にコンテンツを持つブロックレベルのコンテンツ |
| Span | 段落内でインラインコンテンツをグループ化するブロックレベルのコンテンツ |
| InlineUIContainer | XAMLのUIElementを内部に持つブロックレベルのコンテンツ |
| Run | 書式付き、または書式のないテキスト |
| Hyperlink | ハイパーリンクを表す |
| Linebreak | 改行を表す |
Microsoft Wordのように、RichTextBoxコントロール内の文字列を編集するには、選択中の文字について、ApplyPropertyValueメソッドで文字の書式を変更します。リスト4は、選択中の文字のフォントサイズを20に変更するコードです。その他の装飾系イベントは、サンプルコードを確認してください。
/// <summary>
/// フォントサイズ
/// </summary>
private void btnSize_Click(object sender, RoutedEventArgs e)
{
richTextBox1.Selection.ApplyPropertyValue(Run.FontSizeProperty, 20);
}
RichTextBoxコントロールは、表示をカスタマイズできるコントロールだけあって、そのプロパティは多岐にわたります。簡単な使い方については、MSDN以外にもSilverlight SDK Sample BrowserのRichTextBoxコントロールの項を参照すると、実際に動くサンプルとそのソースコードを見ることができます。
また、MSDNには、RichTextBoxコントロールを使ってSilverlightでMicrosoft Wordのような文字の編集ができる「Silverlight テキスト エディター サンプル」が公開されています。
まとめ
Silverlight 3の連載から３か月挟んでのSilverlight 4の連載開始になりますが、筆者自身、Silverlightの進化の速さにとても驚いています。本連載では、一皮むけたSilverlight 4の魅力を少しでもお伝えしたいと思っています。最後までお付き合いいただけるとうれしいです。
次回はメディアの新機能であるWebカメラやマイクについて解説する予定です。それではまた。
