dragan10

The Silverlight Geek - スキン対応カスタムコントロール - generic.xamlの変更

2008-11-09 13:52:47

これはSilverlight 2のリリース候補版でのBreaking changes(後方互換性を損なう仕様変更)を調べるシリーズの最初のポストです。Timのblogエントリに書かれている内容と指示は、必ず読んでおいてください。

まとめ

スキン対応カスタムコントロールをSilverlight 2で作成する際のgeneric.xamlの扱い方に関して、重要なbreaking changeが二つあります。これらは、9月21日9月12日ののblogポストからの変更で、今後のビデオやチュートリアルで対応します。最初の変更点は、generic.xaml自身の置き場所がThemesフォルダの中になったことです。二番目の変更点は構文が変更されたことで、これまでストーリーボードがリソースとして宣言され、ビジュアルステートの中から参照されていたのが、ビジュアルステートと関連するストーリーボードの宣言とが一緒に宣言されるようになりました。

一つ目の変更点で、SilverlightはよりWPFに近くなりました。

二つ目の変更は、100%意図して行われてものかはわかりませんが、最終リリースには間違いなく入るものでしょうし、個人的には全く問題ない変更だと思います。

場所、場所、場所

RC0からgeneric.xamlファイルは、クラスライブラリのルートからThemesというフォルダに移されました。

(Class Libraryを右クリックして「新しいフォルダ」を選択してください - そして名前をThemesとします。そのフォルダを右クリックして、「新しいアイテムの追加」を選択してユーザーコントロールを作成するか、もしすでにユーザーコントロールを作成済みなら、それをドラッグしてThemsフォルダに移してください)

構文

構文に変更があったのは、セクションが廃止され、ストーリーボードの定義とステートの定義が結合されたことです。古い構文を以下に示します:

   1: <ResourceDictionary
   2:  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     &lt;Style TargetType="controls:StatusControl">
   4:         <Setter Property="Template">
   5:             <Setter.Value>
   6:                 <ControlTemplate TargetType="controls:StatusControl">
   7:                     <Grid x:Name="LayoutRoot">
   8:                          <Grid.Resources>
   9:                             <Storyboard x:Key="MouseOverState">
  10:                             </Storyboard>
  11:                             <Storyboard x:Key="OnState">
  12:                             </Storyboard>
  13:                         </Grid.Resources>
  14:                         <vsm:VisualStateManager.VisualStateGroups>
  15:                             <vsm:VisualStateGroup x:Name="CommonStates">
  16:                                 <vsm:VisualState x:Name="Normal" />
  17:                                 <vsm:VisualState x:Name="MouseOver"
  18:                                       Storyboard="{StaticResource MouseOverState }" />
  19:                             </vsm:VisualStateGroup>
  20:                             <vsm:VisualStateGroup x:Name="StatusStates" >
  21:                                       Storyboard="{StaticResource OnState }" />
  22:                             </vsm:VisualStateGroup>
  23:                         </vsm:VisualStateManager.VisualStateGroups>
  24:                         <Ellipse x:Name="Core" >
  25:                             <Ellipse.RenderTransform>
  26:                             </Ellipse.RenderTransform>
  27:                             <Ellipse.Fill>
  28:                             </Ellipse.Fill>
  29:                         </Ellipse>
  30:                     </Grid>
  31:                 </ControlTemplate>
  32:             </Setter.Value>
  33:         </Setter>
  34:     </Style>
  35: </ResourceDictionary>  

詳細はざっくりと省略しましたが、ここで重要なのはストーリーボードがリソースとして宣言され、それらがVisualStateManager.VisualStateGroupsから参照されているということです。新しい構文では、テンプレートの作成の時と同様に、ビジュアルステートの宣言が関連するストーリーボードと結合されました:

   1: <ResourceDictionary
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     &lt;Style TargetType="controls:StatusControl">
   4:         <Setter Property="Template">
   5:             <Setter.Value>
   6:                 <ControlTemplate TargetType="controls:StatusControl">
   7:                     <Grid x:Name="LayoutRoot">
   8:                       <vsm:VisualStateManager.VisualStateGroups>
   9:                             <vsm:VisualStateGroup x:Name="CommonStates">
  10:                                 <vsm:VisualState x:Name="Normal" />
  11:                                 <vsm:VisualState x:Name="MouseOver" >
  12:                                     <Storyboard >
  13:                                     </Storyboard>
  14:                                 </vsm:VisualState>
  15:                             </vsm:VisualStateGroup>
  16:                             <vsm:VisualStateGroup x:Name="StatusStates" >
  17:                                 <vsm:VisualState x:Name="OnState" >
  18:                                     <Storyboard >
  19:                                     </Storyboard>
  20:                                 </vsm:VisualState>
  21:                             </vsm:VisualStateGroup>
  22:                         </vsm:VisualStateManager.VisualStateGroups>
  23:                         <Ellipse x:Name="Core" >
  24:                     </Grid>
  25:                 </ControlTemplate>
  26:             </Setter.Value>
  27:         </Setter>
  28:     </Style>
  29: </ResourceDictionary>  

<Grid.Resources>が無くなり、<vsm:VisualState>の宣言ごとに、関連するストーリーボードがあればその中に置かれていることに注意してください。

読んでくれてありがとう。

-jesse

原文はこちら)

 


※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]