locked
Preloading images XAML resource in windows store app

    Question

  • I have a button that I would like to animate the background in this manner. My issue is that the first time the animation runs through, the images stutter. After that it is fine. How can I force the images to load ahead of time so this does not happen?

    <Application.Resources>
        <ImageBrush x:Key="First" ImageSource="Assets/btn1.jpg" />
        <ImageBrush x:Key="Second" ImageSource="Assets/btn2.png" />
        <ImageBrush x:Key="Third" ImageSource="Assets/btn3.png" />
        <ImageBrush x:Key="Fourth" ImageSource="Assets/btn4.png" />
        <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.4" Storyboard.TargetName="Border"  Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{StaticResource First}" ></DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{StaticResource Second}" ></DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{StaticResource Third}" ></DiscreteObjectKeyFrame>
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{StaticResource Fourth}" ></DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Border.Triggers>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
    
    <Button Height="100" Width="100" Style="{StaticResource buttonStyle}"/>

    Wednesday, June 25, 2014 8:32 PM

All replies

  • Please provide a sample project that shows the issue. Upload to OneDrive and share the link to it here.

    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.

    Thursday, June 26, 2014 12:07 PM
    Moderator