はじめに
これまでの連載でSilverlight 3における新機能のうち、ブラウザ外実行、ナビゲーションフレームワーク、ExpressionBlendなどの主要な機能の紹介をしてきました。
今回と次回では、Silverlight 3の機能紹介の中ではなかなか取り上げられないものの、Silverlight 3の新機能を支える縁の下の力持ちとも言える機能を紹介していきます。
スタイルの強化
XAMLのスタイルはHTMLのCSS(カスケーディングスタイルシート)と同じように、文書の構造とは別に画面のデザインなどを共通したスタイルとして定義して複数のページで利用することで、統一感のあるアプリケーションを作成するための機能です。
Silverlight 3ではリソースディクショナリーのマージ、BasedOn、実行時スタイルの適用という新機能が追加されたことで、よりスタイルによるデザインが適用しやすくなっています。
リソースディクショナリーのマージ
リソースディクショナリーはXAMLの一部を外部に定義することで、複数のページから1つのリソースを参照するためのものです。
Silverlight 3以前の環境でスタイルを利用していて使いにくかったことに、WPFではサポートされていたリソースディクショナリーのマージ機能のサポートがなかった点があります。スタイルを外だしにして定義することはできたのですが、複数のリソースディクショナリーをマージする機能がなかったため、共通のスタイルはApp.Xamlにまとめて定義したり、複数のページで同じスタイルを定義したりといった対応を行う必要がありました。
Silverlight 3ではリソースディクショナリーのマージが可能になったことで、複数の画面で共通したスタイルを適用しつつ、画面独自のスタイルを定義するといったシナリオが簡単に実現できるようになりました。例えばリスト1のようなページに埋め込まれたスタイルがあったとします。
<UserControl x:Class="Silverlight3_7Sample.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <UserControl.Resources> <!-- テキストボックスの基本スタイル --> <Style TargetType="TextBlock" x:Key="BaseText"> <Setter Property="FontSize" Value="40" /> <Setter Property="Foreground" Value="Red" /> <Setter Property="FontFamily" Value="メイリオ" /> </Style> </UserControl.Resources> <StackPanel x:Name="LayoutRoot"> <TextBlock Style="{StaticResource BaseText}" Text="スタイルが適用された文字"/> </StackPanel> </UserControl>
この例では、TextBlockコントロール向けにFontSizeが14のメイリオフォントを指定したスタイルを定義しています。実行すると図1のようにスタイルで指定された文字が表示されます。
まずはこのTextBlockコントロールのスタイルを外部ファイルに追い出してみましょう。リソースディクショナリーを適用する際は次の4つの手順で作業を進めます。
- リソースディクショナリーの追加
- リソースディクショナリーにスタイルの記述
- リソースディクショナリーの適用
- リソースディクショナリーのマージ