views:

277

answers:

1

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 for the button borderis 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>
+1  A: 

It could be a thread priority issue, try showing the window with ShowDialog() (modular window) instead of Show() and see if it still happens.

Danny Varod
Sorry, I didn't understand your point. Can u please elobarate?I am talking about the flickering when changing the background image for the button.
Vin
Playing a storyboard take CPU time, the UI thread must be available to do that. - Is it?
Danny Varod
Thanks, Is there any other approach other than Storyboard in this case?
Vin
Your best bet, if you want a smooth animation, is to find a way to unburden the UI thread.
Dan Bryant
Instead of using a storyboard with times events, use a style with multitriggers. Also, if you can use vector graphics that change colors and not multiple images.
Danny Varod
Multitriggers doesn't work for Silverlight!! I have to use images no colors.
Vin
You didn't write anywhere that it is a Silverlight issue and not WPF!
Danny Varod
Sorry, I didn't write it. It's my mistake.
Vin
Try getting rid of the durations (timed events) - e.g. have mouseover change the image and normal change it back.
Danny Varod