WPF Storyboard issue
- by Vinjamuri
In the following template, the button is displayed with Normal image when the application is started, but when the mouse is over, the button doesn't get changed to mouse over image.
Appreciate your help!!! I want some solution without major changes in the design.
<Style TargetType="{x:Type local:ButtonControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ButtonControl}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation
Duration="00:00:00.20"
Storyboard.TargetName="imgNormal"
Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Duration="00:00:00.20"
Storyboard.TargetName="imgNormal"
Storyboard.TargetProperty="Opacity" To="0" />
<DoubleAnimation
Duration="00:00:00.20"
Storyboard.TargetName="imgOver"
Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Duration="00:00:00.20"
Storyboard.TargetName="imgDisable"
Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation
Duration="00:00:00.20"
Storyboard.TargetName="imgPress"
Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Border x:Name="imgNormal">
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NormalImage}" Opacity="1" Stretch="UniformToFill"/>
</Border>
</Grid>
<Grid>
<Border x:Name="imgOver">
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverImage}" Opacity="0" Stretch="UniformToFill"/>
</Border>
</Grid>
<Grid>
<Border x:Name="imgDisable">
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisableImage}" Opacity="0" Stretch="UniformToFill"/>
</Border>
</Grid>
<Grid>
<Border x:Name="imgPress">
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MousePressImage}" Opacity="0" Stretch="UniformToFill"/>
</Border>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
