スタイル
更新 : 2007 年 11 月
すべての ASP.NET モバイル コントロールには、コントロールのレンダリング方法をカスタマイズできるスタイル プロパティが用意されています。スタイルは使いやすいようにグループ化できるため、ページのさまざまな要素にわたってスタイルの一貫性を持たせることができます。コントロールやデバイス機能に固有なプロパティにアクセスするには、StyleSheet コントロールまたは Style 要素を使用します。
.gif "メモ") メモ : |
|---|
スタイル プロパティの設定は、優先されるとは限りません。ターゲット デバイスが特定のスタイルをサポートしない場合、ASP.NET ではスタイルが無視されるか、別のスタイルが代わりに使用されます。 |
スタイルの継承
スタイル参照を使用した直接的な方法または間接的な方法でコントロールのスタイル プロパティを明示的に指定しない限り、コントロールはそのコンテナのスタイル プロパティを継承します。ほとんどのスタイル プロパティの既定値は、null または NotSet の列挙値です。このため、スタイル プロパティが明示的に設定されたものかどうかを簡単に判別できます。
スタイルの明示的宣言
コントロールのスタイルを明示的に宣言する方法は、2 種類あります。1 番目の方法は、スタイル プロパティを設定することです。たとえば、フォームを作成して、このフォームに Label コントロールを追加するとします。ラベルはフォームの子コントロールになります。このとき、そのラベルの Font-Name プロパティに "Arial" を設定すると、このラベルは Arial フォントを使用します。
子コントロールのスタイルを明示的に設定するもう 1 つの方法は、コントロールの StyleReference プロパティを設定することです。
デバイス固有コントロールを使用するスタイルの設定
スタイル プロパティを設定する場合、DeviceSpecific コントロールも使用できます。次のサンプルでは、ラベルのスタイルとして、多くのデバイス向けには斜体を、デスクトップ デバイスで表示される場合には太字を設定しています。
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<script language="C#" runat="server">
// A custom method to determine if the page
// is displayed on a mobile device
public bool IsDesktop(System.Web.Mobile.MobileCapabilities
capabilities, String argument)
{
return !capabilities.IsMobileDevice;
}
</script>
<Mobile:StyleSheet runat="server">
<Style Name="ListStyle" Font-Italic="true">
<DeviceSpecific>
<Choice Filter="IsDesktop" Font-Italic="false"
Font-Bold="true" />
</DeviceSpecific>
</Style>
</Mobile:StyleSheet>
<Mobile:Form runat=server>
<Mobile:Label id="list1" runat=server StyleReference="ListStyle">
Here is some text
</Mobile:Label>
</Mobile:Form>
参照されたスタイルの検索アルゴリズム
StyleReference プロパティを使用してスタイルが参照されている場合、ASP.NET では特定の順序のチェックに従って適用するスタイルが決定されます。次の一覧では、Font-Size を例として、子コントロール (親コンテナ コントロール内のコントロール) について、子の特性を決定する規則を説明します。
子コントロールに対して Font-Size 属性が明示的に設定されている場合、コントロールはその設定を使用します。
それ以外の場合は、子コントロールの StyleReference プロパティが設定されている場合 (myChild.StyleReference = someStyle など)、コントロールは参照される Style 要素 (someStyle など) の Font-Size 属性の値を使用します。子コントロールは、次のように値にアクセスします。
子は、参照されたスタイルを現在の MobilePage インスタンスのスタイル シート内で検索します。
このページのスタイル シート内で見つからなかった場合は、システムの既定のスタイル シートを参照します。
どちらのスタイル シートでも見つからなかった場合は、実行時エラーが生成されます。
直接的、間接的のいずれでもスタイルを入手できない場合、StyleReference プロパティが設定されておらず、子コントロールはこの手順を繰り返し親コントロールに適用して、Font-Size 属性の値を取得します。
コントロール階層の最上位まで検索しても明示的な Font-Size 属性値がない場合、コントロールは既定のフォント サイズを使用します。
このアルゴリズムは、複数のコントロールから参照できる別のスタイル コントロールにも適用されます。これは、オブジェクトが含まれるコントロールからの継承をサポートし、また標準コーディングと示されたロジックに従います。
検索アルゴリズムの例外
検索アルゴリズムには、次のような 2 つの例外があります。
背景色には、親オブジェクトの値が使用されません。これは、カスケード スタイル シートの動作と一貫します。
DeviceSpecific コントロールは、親コントロールから値を継承しません。通常、DeviceSpecific コントロールは特定のコントロールまたは特定の種類のコントロール用に明示的に記述されます。
スタイル シート
ASP.NET モバイル コントロールには、限られた数のスタイルを設定する既定のスタイル シートが用意されています。詳細については、「StyleSheet」を参照してください。独自の値を適用する場合、既定のスタイルの値を容易にオーバーライドできます。1 つのスタイル シートに <Style> 要素宣言をいくつでも記述できます。各 <Style> 要素は、一意の Name プロパティで特定できます。別のコントロールの StyleReference プロパティを Name プロパティに設定すると、そのスタイルを参照できます。このテクニックは、ほかのスタイルからのスタイルを参照するのにも使用できます。
外部スタイル シート
複数のコントロールに使用できる外部スタイル シートを定義することも可能です。この方法は、複数のページにわたって同じスタイルを使用する場合に大変便利です。外部スタイル シートを作成するには、.ascx ファイル内にユーザー コントロールを作成し、複数のスタイルのある単一の StyleSheet コントロールを配置します。このとき、このファイルを参照するために、モバイル ページに StyleSheet コントロールを配置し、ReferencePath プロパティをユーザー コントロールの相対 URL に設定します。
外部スタイル シートの実装
外部スタイル シートを実装するには、次の 3 つの手順を行う必要があります。
.ascx ファイルに Microsoft ASP.NET モバイル ユーザー コントロールを記述します。
.ascx ファイルにスタイル シートを 1 つ配置し、必要な <Style> 要素を追加します。
スタイル シートを宣言し、その ReferencePath プロパティを、外部スタイル シートを使用する各モバイル ページ用のユーザー コントロールの .ascx ファイル名に設定します。
実行時に、外部スタイル シートに宣言したすべてのスタイルが、モバイル ページのスタイル シート用の ASP.NET ページ フレームワークで使用できるようになります。ユーザー コントロールの詳細については、「ユーザー コントロール」を参照してください。
Style オブジェクトの特性と Style クラス
Style オブジェクトは、コントロール自体を表すものではなく、MobileControl 基本クラスからも継承されません。ページ上では、<Style> 要素を使用して StyleSheet コントロール内でのみこのオブジェクトを宣言できます。
基本クラスとしての Style には、すべてのモバイル コントロールに共通するスタイル特性が格納されます。Style クラスから継承されたクラスには、それらに関連付けられているコントロールに固有の付加的なスタイル特性が格納されます。
すべての MobileControl には、その内部に Style オブジェクトが格納されています。しかし、この Style オブジェクトは、パブリック メンバを通じて公開されてはいません。その代わり、MobileControl には、プライベートに格納されているスタイルを内部的に参照するプロパティがあります。このプロパティは、スタイル プロパティごとに用意されており、パブリックにアクセスできます。したがって、MobileControl は、Font、ForeColor、Wrapping などのスタイル プロパティを直接公開します。
スタイルの整理
複数のスタイルを 1 つの StyleSheet コントロールに整理できます。スタイル シート内では、任意の数のスタイル オブジェクトを宣言できます。スタイルを宣言する方法は、コントロールの場合と基本的に同じですが、runat=server 属性が不要な点が異なります。詳細については、「<Style> 要素」を参照してください。
あるスタイルの StyleReference プロパティを親スタイルの名前に設定すると、そのスタイルにスタイル シート内の別のスタイルのプロパティを継承させることができます。この場合のスコープは、モバイル ページです。つまり、参照できるのは、同じモバイル ページ上のスタイル シートに含まれるスタイルだけです。コントロールのスタイルをスタイル シート内のスタイル オブジェクトから取得させるには、そのコントロールのスタイル オブジェクトの StyleReference プロパティをスタイルの名前に設定します。これを行うには、ASP.NET モバイル Web ページで StyleReference 属性を宣言する方法と、プログラムから StyleReference プロパティを設定する方法があります。