Change resources image with Animation

Question

0.00/5 (No votes)

See more:

I have created one project with an aim to change background image with animation.

I want to change background image with some animation.
So in Grid (LayoutRoot), I created a static resource for background (Which allows me to use different colour combimation as well as Image Resource) and for image resource I used ImageBrush.

I got some error like this " Cannot resolve TargetName Img." when storyboard begins

XAML Code is like this

XML

<UserControl.Resources>
<ImageBrush x:Name="Img" x:Key="frmBackground" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill" ImageSource="./Images/Background0.jpg"/>
        <Storyboard x:Name="RotatingBkgrndImg">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"    Storyboard.TargetName="Img">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.99"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="{StaticResource frmBackground}">
</Grid>

VB Code

VB

Public imgCounter As Integer = 0
Private Sub RotatingBkgrndImg_Completed(ByVal sender As Object, ByVal e As System.EventArgs) Handles RotatingBkgrndImg.Completed
        If imgCounter = 9 Then
            imgCounter = 0
        Else
            imgCounter = imgCounter + 1
        End If
        Img = Resources("frmBackground")
        Dim loFile As String
        loFile = "./Images/Background" & Trim(imgCounter.ToString) & ".Jpg"
        Img.ImageSource = New Media.Imaging.BitmapImage(New Uri(loFile, UriKind.Relative))
        RotatingBkgrndImg.Begin()
    End Sub
    Private Sub RectContent1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles RectContent1.Loaded
        RotatingBkgrndImg.Begin()
    End Sub

Kindly guide me on above issue
Thanks

Posted 3-Jan-11 23:21pm

Anil_S.Kamble

Updated 4-Jan-11 0:55am

Dalek Dave

v3

Add a Solution

Comments

Hiren solanki 4-Jan-11 5:23am

corrected 'pre' tag formation.

Dalek Dave 4-Jan-11 6:55am

Edited for Grammar, Readability and Corrected Code Block.

Venkatesh Mookkan 4-Jan-11 23:24pm

I have updated the answer. Mark it as Answer if it helps you.

2 solutions

Solution 2

Hi Venkatesh,

Thank you for your reply

Can you provide some sample code for study, as suitable to my needs

Anil

Posted 4-Jan-11 0:22am

Anil_S.Kamble

Comments

Venkatesh Mookkan 4-Jan-11 22:52pm

If you like ask questions on answer, use "Add Comment" link below the answer.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Venkatesh Mookkan · Accepted Answer · 2011-01-03T23:42:00

"TargetName" would not work here as "Img" is not under Storyboard's scope. Moreover Resources uses "Key" not the "Name".

I suggest you to write the Storyboard animation in the code behind and change your background.

Below Xaml should fix your problem.

XML

<UserControl.Resources>
        <ImageBrush x:Name="Img" x:Key="frmBackground" AlignmentX="Center" AlignmentY="Center" Stretch="UniformToFill" ImageSource="./Images/Background0.jpg"/>
        <Storyboard x:Key="RotatingBkgrndImg" x:Name="RotatingBkgrndImg">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="backgroundBorder">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.99"/>
                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Border x:Name="backgroundBorder" Background="{StaticResource frmBackground}"></Border>
    </Grid>

I just added a Border inside the Grid and used it's name as TargetName.

Mark it as Answer if it is helpful