如何在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

我想我做了什麼是這樣做的方式，因爲沒有人提出過這樣的意見。只需接受這個答案即可。