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

但是，这对我来说似乎是一种奇怪的做法。有没有更标准的方法来实现这个？

- Jacob

---

本博客介绍了如何制作一个独立的图像按钮控件，使其能够完美地实现您想要的功能：AJ的博客。 - NotADba

Answer 1

鉴于没有其他人发言，我猜我所做的是正确的方法。我只能接受这个答案。

- Jacob

---

所有这些，只是为了一个看起来平庸的基于图像的XAML按钮？Windows Forms仍然统治着它们。在我看来，所有好的技术随着时间的推移都被抛弃了，取而代之的是更费力、耗时的野兽。 - jay_t55