state animation problem

4 replies. Latest Post by handy007 on October 14, 2008.

(0)

handy007

Member

5 points

20 Posts

state animation problem

10-11-2008 2:49 PM |

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?

Thank you for your attention.

pbrooks

Contributor

2671 points

355 Posts

Re: state animation problem

10-11-2008 4:11 PM |

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

handy007

Member

5 points

20 Posts

Re: state animation problem

10-12-2008 4:56 AM |

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..

pbrooks

Contributor

2671 points

355 Posts

Re: state animation problem

10-12-2008 1:04 PM |

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

handy007

Member

5 points

20 Posts