Designing with Silverlight

Re: state animation problem

handy007 — Tue, 14 Oct 2008 20:41:46 GMT

Thank you very much, it's work..

Re: state animation problem

pbrooks — Sun, 12 Oct 2008 17:04:44 GMT

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>

Re: state animation problem

handy007 — Sun, 12 Oct 2008 08:56:23 GMT

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

Re: state animation problem

pbrooks — Sat, 11 Oct 2008 20:11:21 GMT

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!

state animation problem

handy007 — Sat, 11 Oct 2008 18:49:15 GMT

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.