如何在Silverlight 3中制作具有可视状态的简单基于图像的按钮?

在我以前的公司,我们使用flex创建了RIA,并在flash中创建了图形资产。在Flash中,您可以简单地为不同的状态(即翻转、禁用)设置图形。

现在,我正在开发一个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>

我不知道如何为不同的状态分配不同的模板,也不知道如何根据我所处的状态更改图像的源。我该怎么做?另外,如果您知道任何描述样式在Silverlight中如何工作的好文档,那就太好了。所有我能想到的搜索结果都是令人沮丧的无用的。

编辑:

我发现了一种通过这样的故事板改变图像的方法:

<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>

然而,这对我来说似乎是一种奇怪的做事方式。有没有一种更标准的方法来实现这一点?