Как в Silverlight 3 создать простую кнопку на основе изображения с визуальными состояниями?

В моей предыдущей компании мы создавали наши RIA с помощью Flex с графическими ресурсами, созданными во Flash. Во 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>

Однако мне это кажется странным. Есть ли более стандартный способ сделать это?