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

これは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

（原文はこちら）