Hi, i have a problem in state animation.

I have an image and a button. When i click the button i want to make an animation which make the opacity of my image to be 0, change the source of my image in run time, and then make the opacity of my image to be 100 again.

To do this animation i make 2 state manager, which first called "dark" which change the opacity of my image to be 0, second is called "bright" which turn back the opacity of my image to be 100.

and then i write the code like this :

        private void mybtn_Click(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "dark", true);
            image.Source = new BitmapImage(new Uri(GetURLBase() + "images/stadium/arsenal1.jpg"));
            VisualStateManager.GoToState(this, "bright", true);
        }
 

but it doesn't work like what i want. The image source change first before the animation begin, so the order of animation is change the image source, change the opacity to be 0, then change back the opacity to be 100.

can somebody help me how to change the image source in the middle of that 2 state manager?

handy007,

I haven't tried this myself, but you may be able to do something like this:

http://silverlight.net/forums/p/17802/59694.aspx

Basically, you iterate through the VisualStateGroups and find the appropriate animation, then attach a handler to the completed event.  In your scenario, you would want to attach to the "dark" state and fire your image.Source = ... code there. I hope this helps!

If this has answered your question, please click on "Mark as Answer" on this post.

Thanks,
Page Brooks
Silverlight MVP, MCSD
PageBrooks.com | @pbrooks

 i have attached that completed event handler with this code:

            Collection<VisualStateGroup> vsgs = VisualStateManager.GetVisualStateGroups(LayoutRoot);
            foreach (var vsg in vsgs)
            {
                if (vsg.Name == "MyState")
                {
                    foreach (var vs in vsg.States)
                    {
                        if (vs.Name == "dark")
                        {
                            vs.Storyboard.Completed += new EventHandler(changepicture);
                        }
                    }
                }
            }
 

        private void changepicture(object sender, EventArgs e)
        {
            image.Source = new BitmapImage(new Uri(GetURLBase() + "images/Thumbnail/" + newpicture));
        }
 

but why it do nothing when i called the "dark" states?

can you tell me if there is something wrong with my code please?

Thank you for your advice..

handy007,

The following code works just fine for me.  Maybe you can compare your code to mine and see the differences.  I hope this helps!

 Page.xaml.cs

    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            var vsgs = VisualStateManager.GetVisualStateGroups(LayoutRoot);
            foreach (VisualStateGroup vsg in vsgs)
            {
                if (vsg.Name == "MyStateGroup")
                {
                    foreach (VisualState vs in vsg.States)
                    {
                        if (vs.Name == "Dark")
                        {
                            vs.Storyboard.Completed += new EventHandler(Storyboard_Completed);
                        }
                    }
                }
            }
        }

        void Storyboard_Completed(object sender, EventArgs e)
        {
            rectMain.Fill = new SolidColorBrush(Colors.Orange);
            VisualStateManager.GoToState(this, "Normal", true);
        }

        private void btnTest_Click(object sender, RoutedEventArgs e)
        {
            rectMain.Fill = new SolidColorBrush(Colors.Red);
            VisualStateManager.GoToState(this, "Dark", true);
        }

    }

Page.xaml

<UserControl x:Class="SilverlightApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    Width="400" Height="300">
    <StackPanel x:Name="LayoutRoot" Background="White">
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="MyStateGroup">
                <vsm:VisualStateGroup.States>
                    <vsm:VisualState x:Name="Normal">
                        <Storyboard>
                            <DoubleAnimation 
                                Storyboard.TargetName="rectMain" 
                                Storyboard.TargetProperty="(Shape.Opacity)" 
                                To="1" />
                        </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="Dark">
                        <Storyboard>
                            <DoubleAnimation 
                                Storyboard.TargetName="rectMain" 
                                Storyboard.TargetProperty="(Shape.Opacity)" 
                                To="0" />
                        </Storyboard>
                    </vsm:VisualState>
                </vsm:VisualStateGroup.States>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
        <Rectangle x:Name="rectMain" Height="30" Width="30" Fill="Red" />
        <Button x:Name="btnTest" Height="30" Width="80" Content="Click Me!" Click="btnTest_Click" />
    </StackPanel>
</UserControl>

If this has answered your question, please click on "Mark as Answer" on this post.

Thanks,
Page Brooks
Silverlight MVP, MCSD
PageBrooks.com | @pbrooks

 Thank you very much, it's work..