xaml - 如何在 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 中如何工作的优秀文档，那就太好了。我能得到的所有搜索结果都毫无帮助，令人沮丧。

编辑:

我找到了一种通过 Storyboard更改图像的方法，如下所示:

<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

考虑到没有人插话，我想我所做的就是这样做的方法。我只能接受这个作为答案。