| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

「Silverlight リソースとスタイル」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
 
1行目: 1行目:
==Silverlight UI フレームワーク==
+
==[[Silverlight]] UI フレームワーク==
 
[[Silverlight]] | [[C Sharp]] |  
 
[[Silverlight]] | [[C Sharp]] |  
 
**以下のサイトからメモ
 
**以下のサイトからメモ
10行目: 10行目:
  
 
==リソース==
 
==リソース==
*WPF UIフレームワークでは、リソース・ディクショナリにオブジェクトを追加しておくことで、そのオブジェクトをリソースとして、XAML上で簡単に再利用できる。
+
*[[WPF]] UIフレームワークでは、リソース・ディクショナリにオブジェクトを追加しておくことで、そのオブジェクトをリソースとして、XAML上で簡単に再利用できる。
 
===単純なリソースの例===
 
===単純なリソースの例===
 
*実行時に生成される、SolidColorBrushオブジェクトが1つで済むため、メモリを節約
 
*実行時に生成される、SolidColorBrushオブジェクトが1つで済むため、メモリを節約
20行目: 20行目:
 
=====リソース・ディクショナリを使用=====
 
=====リソース・ディクショナリを使用=====
 
  <StackPanel>
 
  <StackPanel>
     <StackPanel.Resources>
+
     <StackPanel.[[R]]esources>
 
         <SolidColorBrush x:Key="BlueBrush" Color="Blue"/>
 
         <SolidColorBrush x:Key="BlueBrush" Color="Blue"/>
     </StackPanel.Resources>
+
     </StackPanel.[[R]]esources>
     <Ellipse Fill="{StaticResource BlueBrush}" Height="150" />
+
     <Ellipse Fill="{Static[[R]]esource BlueBrush}" Height="150" />
     <Ellipse Fill="{StaticResource BlueBrush}" Height="150" />
+
     <Ellipse Fill="{Static[[R]]esource BlueBrush}" Height="150" />
 
  </StackPanel>
 
  </StackPanel>
 
===リソースの種類===
 
===リソースの種類===
36行目: 36行目:
 
|イミディエイト・リソース
 
|イミディエイト・リソース
 
|FrameworkElementオブジェクトのResourcesプロパティ(ResourcesDictionary型)に宣言されたリソース
 
|FrameworkElementオブジェクトのResourcesプロパティ(ResourcesDictionary型)に宣言されたリソース
|FrameworkElementはUIElementの派生クラス。すべてのUI要素は、これを継承しているため、自身のResourcesプロパティにリソースを持つことができる。リソースの宣言要素と、その子要素から参照できる。
+
|FrameworkElementはU[[IE]]lementの派生クラス。すべてのUI要素は、これを継承しているため、自身のResourcesプロパティにリソースを持つことができる。リソースの宣言要素と、その子要素から参照できる。
 
|-
 
|-
 
|アプリケーション・リソース
 
|アプリケーション・リソース
 
|ApplicationオブジェクトのResourcesプロパティ(ResourceDictionary型)に宣言されたリソース
 
|ApplicationオブジェクトのResourcesプロパティ(ResourceDictionary型)に宣言されたリソース
|アプリケーションの実装と管理で共通に使用される機能を提供。標準的なWPF/Silverlightのプロジェクトテンプレートでは、App.xamlファイルとその分離コードで使用されている。通常は、<Application>要素のResourceプロパティに宣言されたリソースが、アプリケーション・リソースとなり、どこかれでも参照できる
+
|アプリケーションの実装と管理で共通に使用される機能を提供。標準的なWPF/[[Silverlight]]のプロジェクトテンプレートでは、App.xamlファイルとその分離コードで使用されている。通常は、<Application>要素のResourceプロパティに宣言されたリソースが、アプリケーション・リソースとなり、どこかれでも参照できる
 
|-
 
|-
 
|}
 
|}
47行目: 47行目:
 
*通常文字列が使用されるが、一部機能においてはオブジェクトが使用されることがある。
 
*通常文字列が使用されるが、一部機能においてはオブジェクトが使用されることがある。
 
===静的リソース参照===
 
===静的リソース参照===
*多くの場合、リソースの参照には、StaticResourceマークアップ拡張機能を使用した、静的リソース参照が使用される。
+
*多くの場合、リソースの参照には、Static[[R]]esourceマークアップ拡張機能を使用した、静的リソース参照が使用される。
 
=====具体例=====
 
=====具体例=====
  <Ellipse Fill="{StaticResource BlueBrush}"/>
+
  <Ellipse Fill="{Static[[R]]esource BlueBrush}"/>
<blockquote>WPFでは、StaticResourceExtensionクラスのパラメータに、BlueBrushというキーを指定するのと同意となるが、Silverlight では、XAML専用となっており、StaticResourceExtensionクラスは存在しない</blockquote>
+
<blockquote>WPFでは、StaticResourceExtensionクラスのパラメータに、BlueBrushというキーを指定するのと同意となるが、[[Silverlight]] では、XAML専用となっており、StaticResourceExtensionクラスは存在しない</blockquote>
 
====リソース検索====
 
====リソース検索====
 
*リソースの検索順
 
*リソースの検索順
62行目: 62行目:
 
===スタイルの機能===
 
===スタイルの機能===
 
*FrameworkElementクラスがもつStyleプロパティにStyleオブジェクトを設定するという方法で使用する。
 
*FrameworkElementクラスがもつStyleプロパティにStyleオブジェクトを設定するという方法で使用する。
*Resourcesプロパティと同様、ほぼすべてのUI要素で使用できる
+
*[[R]]esourcesプロパティと同様、ほぼすべてのUI要素で使用できる
 
=====プロパティ属性構文=====
 
=====プロパティ属性構文=====
 
  <Ellipse Fill="Blue" Height="80" Width="160"/>
 
  <Ellipse Fill="Blue" Height="80" Width="160"/>
81行目: 81行目:
 
=====StackPanelのリソースに登録し、共有する例=====
 
=====StackPanelのリソースに登録し、共有する例=====
 
  <StackPanel>
 
  <StackPanel>
     <StackPanel.Resources>
+
     <StackPanel.[[R]]esources>
 
         <Style x:Key="EllipseStyle" TargetType="Ellipse">
 
         <Style x:Key="EllipseStyle" TargetType="Ellipse">
 
             <Setter Property="Fill" Value="Blue" />
 
             <Setter Property="Fill" Value="Blue" />
87行目: 87行目:
 
             <Setter Property="Width" Value="160" />
 
             <Setter Property="Width" Value="160" />
 
         </Style>
 
         </Style>
     </StackPanel.Resources>
+
     </StackPanel.[[R]]esources>
     <Ellipse Style="{StaticResource EllipseStyle}" />
+
     <Ellipse Style="{Static[[R]]esource EllipseStyle}" />
     <Ellipse Style="{StaticResource EllipseStyle}" />
+
     <Ellipse Style="{Static[[R]]esource EllipseStyle}" />
 
  </StackPanel>
 
  </StackPanel>
 
<blockquote>派生元のクラスが共通で、そのクラスに存在するプロパティに限定されれば、異なるクラス感でも同じスタイルを共有できる。</blockquote>
 
<blockquote>派生元のクラスが共通で、そのクラスに存在するプロパティに限定されれば、異なるクラス感でも同じスタイルを共有できる。</blockquote>
95行目: 95行目:
 
*スタイルは継承元となるスタイルを、BasedOn プロパティに設定することで継承可能。
 
*スタイルは継承元となるスタイルを、BasedOn プロパティに設定することで継承可能。
 
  <StackPanel>
 
  <StackPanel>
     <StackPanel.Resources>
+
     <StackPanel.[[R]]esources>
 
         <Style x:Key="EllipseBaseStyle" TargetType="Ellipse">
 
         <Style x:Key="EllipseBaseStyle" TargetType="Ellipse">
 
             <Setter Property="Fill" Value="Blue" />
 
             <Setter Property="Fill" Value="Blue" />
102行目: 102行目:
 
         </Style>
 
         </Style>
 
         <Style x:Key="EllipseStyle" TargetType="Ellipse"
 
         <Style x:Key="EllipseStyle" TargetType="Ellipse"
                 BasedOn="{StaticResource EllipseBaseStyle}">
+
                 BasedOn="{Static[[R]]esource EllipseBaseStyle}">
 
             <Setter Property="Stroke" Value="Yellow"/>
 
             <Setter Property="Stroke" Value="Yellow"/>
 
             <Setter Property="StrokeThickness" Value="10"/>
 
             <Setter Property="StrokeThickness" Value="10"/>
 
         </Style>
 
         </Style>
     </StackPanel.Resources>
+
     </StackPanel.[[R]]esources>
 
   
 
   
     <Ellipse Style="{StaticResource EllipseStyle}" />
+
     <Ellipse Style="{Static[[R]]esource EllipseStyle}" />
     <Ellipse Style="{StaticResource EllipseStyle}" />
+
     <Ellipse Style="{Static[[R]]esource EllipseStyle}" />
 
  </StackPanel>
 
  </StackPanel>
 
===暗黙的にスタイルを適用===
 
===暗黙的にスタイルを適用===
115行目: 115行目:
 
*x:Key 値を指定すると、Style がすべての要素に自動的には適用されなくなります。
 
*x:Key 値を指定すると、Style がすべての要素に自動的には適用されなくなります。
 
  <StackPanel>
 
  <StackPanel>
     <StackPanel.Resources>
+
     <StackPanel.[[R]]esources>
 
         <Style TargetType="Ellipse">
 
         <Style TargetType="Ellipse">
 
             <Setter Property="Fill" Value="Blue" />
 
             <Setter Property="Fill" Value="Blue" />
121行目: 121行目:
 
             <Setter Property="Width" Value="160" />
 
             <Setter Property="Width" Value="160" />
 
         </Style>
 
         </Style>
     </StackPanel.Resources>
+
     </StackPanel.[[R]]esources>
 
     <Ellipse />
 
     <Ellipse />
 
     <Ellipse />
 
     <Ellipse />
132行目: 132行目:
 
*MSDNライブラリを参照
 
*MSDNライブラリを参照
 
**[http://msdn.microsoft.com/ja-jp/library/aa358533.aspx WPFテーマ]
 
**[http://msdn.microsoft.com/ja-jp/library/aa358533.aspx WPFテーマ]
*Silverlight「コントロールのスタイルとテンプレート」|http://msdn.microsoft.com/ja-jp/library/cc278075(VS.95).aspx]
+
*[[Silverlight]]「コントロールのスタイルとテンプレート」|http://msdn.microsoft.com/ja-jp/library/cc278075(VS.95).aspx]
 
*Expression Blendの[コントロールのパーツ(テンプレート)の編集]-[コピーの編集]機能を利用
 
*Expression Blendの[コントロールのパーツ(テンプレート)の編集]-[コピーの編集]機能を利用
*XamlWriterクラスのSaveメソッドを使用し、実行時にコードからTemplateプロパティの内容をシリアライズ(WPF)
+
*XamlWriterクラスのSaveメソッドを使用し、実行時にコードからTemplateプロパティの内容をシリアライズ([[WPF]])
  
 
===TemplateBinding===
 
===TemplateBinding===
140行目: 140行目:
 
=====角丸ボタンを作成する例=====
 
=====角丸ボタンを作成する例=====
 
  <StackPanel>
 
  <StackPanel>
     <StackPanel.Resources>
+
     <StackPanel.[[R]]esources>
 
         <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
 
         <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
             <Border Background="{TemplateBinding Background}" CornerRadius="30" Padding="10">
+
             <Border Background="{TemplateBinding Background}" Corner[[R]]adius="30" Padding="10">
 
                 <TextBlock Text="{TemplateBinding Content}"
 
                 <TextBlock Text="{TemplateBinding Content}"
 
                                 Foreground="White"
 
                                 Foreground="White"
148行目: 148行目:
 
             </Border>
 
             </Border>
 
         </ControlTemplate>
 
         </ControlTemplate>
     </StackPanel.Resources>
+
     </StackPanel.[[R]]esources>
 
     <Button Content="Test1" Background="LightBlue"
 
     <Button Content="Test1" Background="LightBlue"
             Template="{StaticResource ButtonTemplate}" Margin="30" />
+
             Template="{Static[[R]]esource ButtonTemplate}" Margin="30" />
 
     <Button Content="Test2" Background="Blue"
 
     <Button Content="Test2" Background="Blue"
             Template="{StaticResource ButtonTemplate}" Margin="30" />
+
             Template="{Static[[R]]esource ButtonTemplate}" Margin="30" />
 
  </StackPanel>
 
  </StackPanel>
  

2020年2月16日 (日) 04:31時点における最新版

Silverlight UI フレームワーク

Silverlight | C Sharp |

概要

  • コントロール・テンプレートは、スタイルの中で利用されることが多い
  • スタイルはほぼ間違いなく、リソースとして定義される
  • つまり、リソース、スタイル、コントロール・テンプレートの3つをまとめて使用することが多い

リソース

  • WPF UIフレームワークでは、リソース・ディクショナリにオブジェクトを追加しておくことで、そのオブジェクトをリソースとして、XAML上で簡単に再利用できる。

単純なリソースの例

  • 実行時に生成される、SolidColorBrushオブジェクトが1つで済むため、メモリを節約
個別に指定
<StackPanel>
    <Ellipse Fill="Blue" Height="150" />
    <Ellipse Fill="Blue" Height="150" />
</StackPanel>
リソース・ディクショナリを使用
<StackPanel>
    <StackPanel.Resources>
        <SolidColorBrush x:Key="BlueBrush" Color="Blue"/>
    </StackPanel.Resources>
    <Ellipse Fill="{StaticResource BlueBrush}" Height="150" />
    <Ellipse Fill="{StaticResource BlueBrush}" Height="150" />
</StackPanel>

リソースの種類

  • 追加先のリソース・ディクショナリの場所により、イミディエイト・リソースと、アプリケーション・リソースの2種類に分けられる
種類 概要 備考
イミディエイト・リソース FrameworkElementオブジェクトのResourcesプロパティ(ResourcesDictionary型)に宣言されたリソース FrameworkElementはUIElementの派生クラス。すべてのUI要素は、これを継承しているため、自身のResourcesプロパティにリソースを持つことができる。リソースの宣言要素と、その子要素から参照できる。
アプリケーション・リソース ApplicationオブジェクトのResourcesプロパティ(ResourceDictionary型)に宣言されたリソース アプリケーションの実装と管理で共通に使用される機能を提供。標準的なWPF/Silverlightのプロジェクトテンプレートでは、App.xamlファイルとその分離コードで使用されている。通常は、<Application>要素のResourceプロパティに宣言されたリソースが、アプリケーション・リソースとなり、どこかれでも参照できる

リソース・キー

  • リソース・ディクショナリの各リソースはキーによって識別されるため、x:Key属性を使用して、各リソースに対し、リソース・キーを割り当てておく必要がある。
  • 通常文字列が使用されるが、一部機能においてはオブジェクトが使用されることがある。

静的リソース参照

  • 多くの場合、リソースの参照には、StaticResourceマークアップ拡張機能を使用した、静的リソース参照が使用される。
具体例
<Ellipse Fill="{StaticResource BlueBrush}"/>

<blockquote>WPFでは、StaticResourceExtensionクラスのパラメータに、BlueBrushというキーを指定するのと同意となるが、Silverlight では、XAML専用となっており、StaticResourceExtensionクラスは存在しない</blockquote>

リソース検索

  • リソースの検索順
  1. イミディエイト・リソース
    1. リソース参照元
    2. 親要素
  2. アプリケーション・リソース

スタイル

スタイルの機能

  • FrameworkElementクラスがもつStyleプロパティにStyleオブジェクトを設定するという方法で使用する。
  • Resourcesプロパティと同様、ほぼすべてのUI要素で使用できる
プロパティ属性構文
<Ellipse Fill="Blue" Height="80" Width="160"/>
スタイルを使って書き換え
  • 同じプロパティがある場合、最後に宣言されたものが有効
  • スタイルを利用するより、直接設定したプロパティが優先
<Ellipse>
    <Ellipse.Style>
        <Style TargetType="Ellipse">
            <Setter Property="Fill" Value="Blue" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Width" Value="160" />
        </Style>
    </Ellipse.Style>
</Ellipse>

スタイルの共有

  • リソースとしてリソース・ディクショナリに定義し、複数のUI要素で共有し、初めて意味を持つ機能となる。
StackPanelのリソースに登録し、共有する例
<StackPanel>
    <StackPanel.Resources>
        <Style x:Key="EllipseStyle" TargetType="Ellipse">
            <Setter Property="Fill" Value="Blue" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Width" Value="160" />
        </Style>
    </StackPanel.Resources>
    <Ellipse Style="{StaticResource EllipseStyle}" />
    <Ellipse Style="{StaticResource EllipseStyle}" />
</StackPanel>

<blockquote>派生元のクラスが共通で、そのクラスに存在するプロパティに限定されれば、異なるクラス感でも同じスタイルを共有できる。</blockquote>

スタイルの継承

  • スタイルは継承元となるスタイルを、BasedOn プロパティに設定することで継承可能。
<StackPanel>
    <StackPanel.Resources>
        <Style x:Key="EllipseBaseStyle" TargetType="Ellipse">
            <Setter Property="Fill" Value="Blue" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Width" Value="160" />
        </Style>
        <Style x:Key="EllipseStyle" TargetType="Ellipse"
               BasedOn="{StaticResource EllipseBaseStyle}">
            <Setter Property="Stroke" Value="Yellow"/>
            <Setter Property="StrokeThickness" Value="10"/>
        </Style>
    </StackPanel.Resources>

    <Ellipse Style="{StaticResource EllipseStyle}" />
    <Ellipse Style="{StaticResource EllipseStyle}" />
</StackPanel>

暗黙的にスタイルを適用

  • x:Key を設定せずに TargetType プロパティに 型に設定すると、x:Key が暗黙的に設定されます。
  • x:Key 値を指定すると、Style がすべての要素に自動的には適用されなくなります。
<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="Ellipse">
            <Setter Property="Fill" Value="Blue" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Width" Value="160" />
        </Style>
    </StackPanel.Resources>
    <Ellipse />
    <Ellipse />
</StackPanel>

コントロール・テンプレート

  • Win32でのオーナードローに替わるもの
  • 見た目の変更もプロパティの設定だけで比較的簡単に変更できる様になっている
  • Templateプロパティを利用しビジュアル構造を再定義できる

コントロール・テンプレートの内容を確認する手段

  • MSDNライブラリを参照
  • Silverlight「コントロールのスタイルとテンプレート」|http://msdn.microsoft.com/ja-jp/library/cc278075(VS.95).aspx]
  • Expression Blendの[コントロールのパーツ(テンプレート)の編集]-[コピーの編集]機能を利用
  • XamlWriterクラスのSaveメソッドを使用し、実行時にコードからTemplateプロパティの内容をシリアライズ(WPF)

TemplateBinding

  • コントロールのプロパティと、コントロール・テンプレート内の要素のプロパティとをバインドする必要がある
角丸ボタンを作成する例
<StackPanel>
    <StackPanel.Resources>
        <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" CornerRadius="30" Padding="10">
                <TextBlock Text="{TemplateBinding Content}"
                               Foreground="White"
                               VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </StackPanel.Resources>
    <Button Content="Test1" Background="LightBlue"
            Template="{StaticResource ButtonTemplate}" Margin="30" />
    <Button Content="Test2" Background="Blue"
            Template="{StaticResource ButtonTemplate}" Margin="30" />
</StackPanel>

ContentPresenter要素

  • Buttonコントロールは文字列に限らず、画像やUI要素といったさまざまなオブジェクトをコンテンツとして表示できるContentControlタイプのコントロール
  • ButtonコントロールのContentプロパティには、Image要素やPanel要素といった文字列以外のオブジェクトを設定することができる

<blockquote>ContentプロパティがTextBlockのTextプロパティとバインディングしていたのでは、そのようなオブジェクトを表示させることはできない。文字列以外のコンテンツが設定された場合でも、そのコンテンツをきちんと表示させるためには、そのための専用の要素である「ContentPresenter要素」を使用する必要がある</blockquote>