Works in Silverlight, not in WPF

08-15-2009 2:39 AM |

 Hi all,

I'm using Blend 3 and am trying to use some code from Chapter 6 of Foundation Expression Blend 3.  Basically, I'm trying to setup event handlers to trigger the VisualStateManager to cause some controls to scale when mouseenter/leave are triggered. 

What I've discovered is that the code example in the book works perfectly in a Silverlight project.  But if I create a WPF application (either in Blend or VS2008), the code does not work.  Basically doing this:  Create project, Draw rectangle, Create a visual state group, create a "MyMouseEnter" state, have the state apply a transform to the rectangle on the timeline, save.  Switch to VS2008, create an event handler for the rectangle mouseenter, trigger the "MyMouseEnter" state.  In a Silverlight app, this works as expected and a mouseenter transforms the rectangle.  The exact same steps in a WPF app result in no errors, but no transform/state animation happens on mouseenter.

Setting some breakpoints, it's clear that the events are setup correctly, the mouseenter event fires, but the VSM.GoToState always returns false (i.e. the state of the control never changes).  

So a long winded way to ask:  Is there some difference between a Silverlight app and a WPF app that I'm not understanding?  

Here's the code behind in the WPF version:

namespace WpfApplication2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();

            this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            rectRed.MouseEnter += new MouseEventHandler(rectRed_MouseEnter);
        }

        void rectRed_MouseEnter(object sender, MouseEventArgs e)
        {
            VisualStateManager.GoToState(this, "MyMouseEnter", true);
           

        }
    }

Here's the Silverlight code (with some extra stuff since I got farther on that version, but basically the same)

namespace StoryboardProject
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            MyRectangle.MouseEnter += new MouseEventHandler(MyRectangle_MouseEnter);
            MyRectangle.MouseLeave += new MouseEventHandler(MyRectangle_MouseLeave);
            MyRectangle.MouseLeftButtonDown += new MouseButtonEventHandler(MyRectangle_MouseLeftButtonDown);
            MyRectangle.MouseLeftButtonUp += new MouseButtonEventHandler(MyRectangle_MouseLeftButtonUp);

            //DoubleAnimation FadeInTBAnimation = new DoubleAnimation();

            //FadeInTBAnimation.From = 0;
            //FadeInTBAnimation.To = 1;

            //FadeInTBAnimation.BeginTime = TimeSpan.FromSeconds(3);

            //FadeInTBAnimation.Duration = new Duration(TimeSpan.FromSeconds(3));

            //Storyboard.SetTarget(FadeInTBAnimation, MyTextBlock);

            //Storyboard.SetTargetProperty(FadeInTBAnimation, new PropertyPath(FrameworkElement.OpacityProperty));

            //Storyboard FadeInTBSB = new Storyboard();

            //FadeInTBSB.Children.Add(FadeInTBAnimation);

            //FadeInTBSB.Begin();

            Storyboard fadeInSB = SBFader.FadeInFrameworkElement(MyTextBlock, 3, 3);

            if (fadeInSB != null)
            {
                fadeInSB.Begin();
            }
        }

        void MyRectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            VisualStateManager.GoToState(this, "MyMouseUpState", true);
        }

        void MyRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            VisualStateManager.GoToState(this, "MyMouseDownState", true);
        }

        void MyRectangle_MouseLeave(object sender, MouseEventArgs e)
        {
            VisualStateManager.GoToState(this, "MyMouseLeaveState", true);
        }

        void MyRectangle_MouseEnter(object sender, MouseEventArgs e)
        {
            VisualStateManager.GoToState(this, "MyMouseEnterState", true);
        }
    }
}

Anyone have any ideas why this is producing a different result?

Thanks!

Re: Works in Silverlight, not in WPF

09-24-2009 5:02 PM |

Hello Bob, I have noticed the same issue as you.  And the other responder is correct you need to get the WPFToolkit to use the Visual State Manager in WPF.  Alternatively you could use EventTriggers to fire a Storyboard in WPF.  It is just as easy to do:

1. Select a Rectangle on the Artboard (called MyRectangle);

2. Click +Event icon in the Events panel;

3. Chage the event to read When MyRectangle MouseLeftButtonDownEvent is Raised;

4. Click the + icon to add a new Storyboard

5. Make your Storyboard and Viola! Your Storyboard  will fire when you click MyRectangle.

Hope this Helps,

Victor Gaudioso