SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight 4で作る新しいRIAアプリケーション

Silverlight 4にさわってみよう

Silverlight 4で作る新しいRIAアプリケーション(1)

  • X ポスト
  • このエントリーをはてなブックマークに追加

ViewBox

 ViewBoxコントロールは、ViewBoxコントロールのコンテナ配下のコントロールを、画面に合わせて自動的に拡大/縮小するコントロールです。WPFでは以前から提供されていたコントロールですが、Silverlight 4にバージョンアップしたタイミングで、Silverlight Toolkitでの提供からランタイムでの提供に格上げされました。

 基本的な使い方は、ViewBoxの中に自動的に伸縮させたい画像などを表示させ、画面のリサイズに対応して画像を伸縮させる場合に利用します。リスト1は、イメージコントロールとチェックボックスコントロールに対して、ViewBoxによる伸縮を有効にした例です。

リスト1 ViewBoxを利用した画像の伸縮(ViewBox.xaml)
<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)。

リスト2 複数の子要素を持つViewBox(ViewBox.xaml)
<Viewbox>
    <StackPanel Orientation="Horizontal" >
        <Button Content="伸縮するボタン" />
        <RadioButton Content="伸縮するラジオボタン" />
        <Ellipse Fill="Black" Width="10" Height="10" />
    </StackPanel>
</Viewbox>

 実行結果を図9に示します。

図9 リスト1の実行結果
図9 リスト1の実行結果

リッチテキスト

 RichTextBoxコントロールは、太字や色の付いたテキストなど、複数の書式を持ったテキストを表示/編集することができます。WindowFormsやASP.NETにも同様のコントロールが存在するため、その機能は想像しやすいのではないでしょうか。

 今回は、図10のようにテキストボックス内の文字を装飾するサンプルを、RichTextBoxコントロールを使って作ってみましょう。

図10 今回作成するRichTextBoxのサンプル
図10 今回作成するRichTextBoxのサンプル

 このサンプルのXAML側のコードは、リスト3になります。

リスト3 RichTextBoxコントロールのサンプルXAML側(RichText.xaml)
<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を編集するようにコンテンツを編集できます。

表2 RichTextBoxコントロールに配置できるコンテンツ
RichTextBoxに配置できる要素 概要
Paragraph 段落を表す。内部にコンテンツを持つブロックレベルのコンテンツ
Span 段落内でインラインコンテンツをグループ化するブロックレベルのコンテンツ
InlineUIContainer XAMLのUIElementを内部に持つブロックレベルのコンテンツ
Run 書式付き、または書式のないテキスト
Hyperlink ハイパーリンクを表す
Linebreak 改行を表す

 Microsoft Wordのように、RichTextBoxコントロール内の文字列を編集するには、選択中の文字について、ApplyPropertyValueメソッドで文字の書式を変更します。リスト4は、選択中の文字のフォントサイズを20に変更するコードです。その他の装飾系イベントは、サンプルコードを確認してください。

リスト4 RichTextBoxコントロールのサンプルCS側(RichText.xaml.cs)
/// <summary>
/// フォントサイズ
/// </summary>
private void btnSize_Click(object sender, RoutedEventArgs e)
{
    richTextBox1.Selection.ApplyPropertyValue(Run.FontSizeProperty, 20);
}

 RichTextBoxコントロールは、表示をカスタマイズできるコントロールだけあって、そのプロパティは多岐にわたります。簡単な使い方については、MSDN以外にもSilverlight SDK Sample BrowserRichTextBoxコントロールの項を参照すると、実際に動くサンプルとそのソースコードを見ることができます。

 また、MSDNには、RichTextBoxコントロールを使ってSilverlightでMicrosoft Wordのような文字の編集ができる「Silverlight テキスト エディター サンプル」が公開されています。

まとめ

 Silverlight 3の連載から3か月挟んでのSilverlight 4の連載開始になりますが、筆者自身、Silverlightの進化の速さにとても驚いています。本連載では、一皮むけたSilverlight 4の魅力を少しでもお伝えしたいと思っています。最後までお付き合いいただけるとうれしいです。

 次回はメディアの新機能であるWebカメラやマイクについて解説する予定です。それではまた。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Silverlight 4で作る新しいRIAアプリケーション連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5336 2010/08/31 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング