Windows Phone 8 - Expand/Collapse Map control

Question

This is my page, which shows the current location of the user:

enter image description here

In the bottom-left of the map control, there is an expand button. On click, the map control should expand to full-screen and the button should change to the collapse button. This would be easy but I want to animate the expand and collapse process. How can I do this?

My current solution is to remove the map control from the stackpanel (the gray rectangle), add the map to the ContentPanel and set the height to a static value. This is not really the best way, but for the first I want to clarify how I can create the animation process. — zrkl
Could you post your XAML (or a simplified version that shows the structure of the page)? — Gary Johnson

Neil Turner Neil Turner · Accepted Answer · 2013-03-02T21:08:53

For an overview of animation properties of XAML elements, look here...

http://windowsphonegeek.com/articles/wp7-animations-in-depthndash-overview-and-getting-started

For a Map, here is some C# code to animate its 'Height' property...

        // assumes Map element is called 'map'
        double height = map.Height;
        double from, to;

        // animate from 150 to 800, or vice versa
        if (height == 150)
        {
            from = 150;
            to = 800;
        }
        else
        {
            from = 800;
            to = 150;
        }

        Storyboard sb = new Storyboard();
        DoubleAnimation fillHeightAnimation = new DoubleAnimation();
        fillHeightAnimation.From = from;
        fillHeightAnimation.To = to;
        fillHeightAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));

        Storyboard.SetTarget(fillHeightAnimation, map);
        Storyboard.SetTargetProperty(fillHeightAnimation, new PropertyPath("Height"));

        sb.Children.Add(fillHeightAnimation);
        sb.Begin();

Windows Phone 8 - Expand/Collapse Map control

1 Answers