Поскольку вы используете Blend, вы должны воспользоваться поддержкой Blend для VisualStateManager
. Все, что вам нужно сделать, это описать, как выглядит объект в его различных состояниях, таких как MouseOver
и Normal
, и как долго выполняются переходы между различными состояниями, а менеджер визуальных состояний решает, как переходить между состояниями. *
Изображение не имеет визуальных состояний, но вы можете отредактировать шаблон Button
и сделать его содержимое изображением, а затем отредактировать состояния для кнопки. Я сделал это и очистил XAML, чтобы продемонстрировать технику:
<Grid>
<Grid.Resources>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Image x:Name="image" Height="100" Width="Auto" Source="http://thecybershadow.net/misc/stackoverflow.png" Margin="0,0,-25,0">
<Image.Effect>
<DropShadowEffect ShadowDepth="0"/>
</Image.Effect>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="15"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button Style="{StaticResource ButtonStyle1}"/>
</Grid>
Обратите внимание, что Blend делает все это для вас, но понимание XAML поможет. Вот учебник, ориентированный на Blend: