WPF Storyboard flicker issue
- by Vinjamuri
With the code below, the control flickers whenever the image is changed for MouseOver/MousePressed? I am using Storyboard and Double animation.The image display is very smooth with WPF Triggers but not with Storyboard. Can anyone help me to fix this issue?
<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="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" Opacity="0">
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NormalImage}" Stretch="UniformToFill"/>
</Border>
</Grid>
<Grid>
<Border x:Name="imgOver" Opacity="0">
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverImage}" Stretch="UniformToFill"/>
</Border>
</Grid>
<Grid>
<Border x:Name="imgDisable" Opacity="0">
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisableImage}" Stretch="UniformToFill"/>
</Border>
</Grid>
<Grid>
<Border x:Name="imgPress" Opacity="0">
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MousePressImage}" Stretch="UniformToFill"/>
</Border>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
