locked
Image Flickering using bitmap images to animate the background of a button using storyboarding

    Question

  • I have an application where I wish for all button controls to have an animation of many images. 

    This is my attempted solution, however when I use it, the first time the images run through, there is distinct flickering. when the animation repeats and from then further, it works smoothly. I am not sure what else I should be doing

    In my App.xaml i have added this to my <Application.Resources>

    <Application.Resources>
    
    <ImageBrush x:Key="Ani1" ImageSource="Assets/btn1.png"></ImageBrush>
    <ImageBrush x:Key="Ani2" ImageSource="Assets/btn2.png"></ImageBrush>
    <ImageBrush x:Key="Ani3" ImageSource="Assets/btn3.png"></ImageBrush>
    <ImageBrush x:Key="Ani4" ImageSource="Assets/btn4.png"></ImageBrush>
    <ImageBrush x:Key="Ani5" ImageSource="Assets/btn5.png"></ImageBrush>
    <ImageBrush x:Key="Ani6" ImageSource="Assets/btn6.png"></ImageBrush>
    <ImageBrush x:Key="Ani7" ImageSource="Assets/btn7.png"></ImageBrush>
    <ImageBrush x:Key="Ani8" ImageSource="Assets/btn8.png"></ImageBrush>
    
    <Style x:Key="buttonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="Transparent">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="PointerOver"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Border" >
                                    <Border.Triggers>
                                        <EventTrigger>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames RepeatBehavior="Forever"  Duration="0:0:0.7" Storyboard.TargetName="Border"  Storyboard.TargetProperty="Background">
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{StaticResource Ani1}" ></DiscreteObjectKeyFrame>
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{StaticResource Ani2}" ></DiscreteObjectKeyFrame>
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{StaticResource Ani3}" ></DiscreteObjectKeyFrame>
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource Ani4}" ></DiscreteObjectKeyFrame>
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{StaticResource Ani5}" ></DiscreteObjectKeyFrame>
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{StaticResource Ani6}" ></DiscreteObjectKeyFrame>
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{StaticResource Ani7}" ></DiscreteObjectKeyFrame>
                                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{StaticResource Ani8}" ></DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </Border.Triggers>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
    
    
    
    </Application.Resources>

    Tuesday, July 1, 2014 6:51 PM

All replies

  • I can't test this without the proper images.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, July 2, 2014 7:21 PM
    Moderator