如何在Silverlight 3中使用视觉状态制作简单的基于图像的按钮？

Question

在我以前的公司，我们使用Flex在Flash中创建图形资源创建了我们的RIA。在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> 

然而，这似乎是在做的事情对我的一种奇怪的方式。有没有更完整的标准方法？

Answer 1

我想我做了什么是这样做的方式，因为没有人提出过这样的意见。只需接受这个答案即可。