Silverlight 3に視覚状態を備えたシンプルな画像ベースのボタンを作成するにはどうすればよいですか？

Question

私の以前の会社では、Flashで作成されたグラフィカルアセットを使用してFlexを使用してRIAを作成しました。フラッシュでは、さまざまな状態、つまりロールオーバー、無効にするためにグラフィックをレイアウトするだけです。

今、私はSilverlight 3プロジェクトに取り組んでいます。私は、ロールオーバー、プレス、および通常の状態を持つボタンのグラフィックとして機能する必要がある多くの画像を与えられました。 Visual Studio 2008またはExpression Blend 3で、異なる視覚状態に対して異なる画像を備えたボタンを単に作成する方法を理解することはできません。

これが私が現在いる場所です。私のボタンはXAMLでこのように定義されています：

<Button Style="{StaticResource MyButton}"/>

MyButton スタイルは次のように表示されます：

<Style x:Key="MyButton" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Image Source="/Assets/Graphics/mybtn_up.png" Width="54" Height="24">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused"/>
              <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver"/>
              <VisualState x:Name="Pressed"/>
              <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        </Image>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

別のテンプレートを異なる状態に割り当てる方法や、どの状態に基づいて画像のソースを変更する方法を理解できません。これを行うにはどうすればよいですか？また、シルバーライトでスタイルがどのように機能するかを説明する優れたドキュメントを知っているなら、それは素晴らしいことです。私が思いつくことができるすべての検索結果は、イライラして役に立たない。

編集：

このようなストーリーボードを介して画像を変更する方法を見つけました。

<Style x:Key="MyButton" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Image Source="/Assets/Graphics/mybtn_up.png" 
               Width="54" Height="24" x:Name="Image">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused"/>
              <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver">
                <Storyboard Storyboard.TargetName="Image" 
                            Storyboard.TargetProperty="Source">
                  <ObjectAnimationUsingKeyFrames>
                    <DiscreteObjectKeyFrame KeyTime="0" Value="/Assets/Graphics/mybtn_over.png"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                <Storyboard Storyboard.TargetName="Image" 
                            Storyboard.TargetProperty="Source">
                  <ObjectAnimationUsingKeyFrames>
                    <DiscreteObjectKeyFrame KeyTime="0" Value="/Assets/Graphics/mybtn_active.png"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        </Image>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

しかし、これは私に物事をする奇妙な方法のように思えます。これを達成するためのより標準的な方法はありますか？

Answer 1

私がしたことだと思います は 誰もいなかったことを考えると、それを行う方法。これを答えとして受け入れる必要があります。