Resizing a grid control programatically over a period of time

Question

G'day,

I am attempting to simulate the old XBox 360 GUI with the sliding tabs (Remember, you'd press left or right and the content would slide in depending on the tab?) Anyways, at the moment, I have this working well, however I cannot get the "animation" working.

When the user presses left arrow or right arrow, my OpenWindow(int iIndex) method will be called, where iIndex is the index to the next or previous "window" to be slid in. (Not a window... each "Window" is a struct with a parent grid control containing a button and a smaller grid control that contains the windows contents.)

Now, my problem lies with resizing the parent grid control. When it is slid in, it is resized by calling mygrid.Width += 1; That works, but I don't see it happen over a determined period of time, it just lags a bit and then resizes to the required width. Whereas if I call this.Width += 1 in the same method, (this being the main program window) the window resizes how I want the grid control to resize. I've tried UpdateLayout() but to no avail. This tells me my timing is okay.

If anyone could be of assistance, it would be greatly appreciated.

Here is my OpenWindow method...

public void OpenWindow(int iIndex)
    {
        int iInterval = 1;
        for (int i = (int)myDict[iIndex].Shell.Width; i < (int)stack_outter.Width; i += iInterval)
        {                
            myDict[iIndex].Shell.Width += 1;
            myDict[iIndex].Shell.UpdateLayout();
            System.Threading.Thread.Sleep(1);                

        }

        myDict[iIndex].Shell.Width = stack_outter.Width - (BUTTON_WIDTH * (myDict.Count - 1));
    }

myDict is a Dictionary, Shell is the grid that I am attempting to animate when resizing. Sorry about the code, it's messy, my code is always hacked when I am trying to get stuff working :)

Thanks,

Ash

Neried Web Solutions

Answer 1

Your OpenWindow method is happening on the Dispatcher thread. That's also the thread responsible for rendering, so as long as your OpenWindow method doesn't return, nothing gets rendered.

The proper way to fix this would be to animate the Width property. I don't have any experience in starting animations from code (I've only used them in the past for things like a fade-in button highlight on mouse over, which is more easily done from WPF), but I took a quick read-through this page, Animation Overview on MSDN , and I think you'll want something like this:

        DoubleAnimation myDoubleAnimation = new DoubleAnimation();
        myDoubleAnimation.From = myDict[iIndex].Shell.Width;
        myDoubleAnimation.To = stack_outter.Width;
        myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.5));
        myDoubleAnimation.AutoReverse = false;
        myDoubleAnimation.RepeatBehavior = new RepeatBehavior(1.0);

        myStoryboard = new Storyboard();
        myStoryboard.Children.Add(myDoubleAnimation);
        Storyboard.SetTarget(myDoubleAnimation, myDict[iIndex].Shell);
        Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(FrameworkElement.WidthProperty));
        myStoryboard.Begin(myDict[iIndex].Shell);