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

我想我所做的是的，因为没有人插话。我只需要接受这个作为答案。