How is possibly Panorama realized? I need to create a vertical one, similar to Nokia map

Question

Background:

I'm new to silverlight/windows phone.

I want to create something like a Nokia map (windows phone 8 version). In Nokia map, when you click search, and got the search result, the page is splitted into 2 portions, the upper one is the map, the lower one is the result, and you can scroll between the map and the result using finger gestures.

My initial solution was: make a grid with 2 rows, and dynamically change (using DoubleAnimation with spline movement) the grid row's height. For example, when the map is shown, the bottom row's height will be shrinked, and when the bottom row is shown, the map's height will be shrinked.

However I soon found that this may not be the way that how Nokia map is realized. For example, if I make the map on top row, and when the height of the top row is shrinked, the location of the map is still about the center (it moves but with slower speed than the row is shrinked), meaning that the map itself is not "rolled upward" like what Nokia map does. What's more, if there's a Popup on the map (like the current location button in Nokia map), the Popup is not rolled up too.

Well, in theory, the above can still be solved by forcing the map and the Popup also rolls upward during the grid row height changes. But after some comparison and observation, I think the nokia map's upward and downward movement is just like a Panorama with a larger vertical canvas, and you just need to show the top portion or bottom portion of the canvas.

This make me curious on how to possibily implement something like a vertical Panorama.

My questions,

1. In your opinion, how is possibily Nokia map implemented? Is there any other easier ways?
2. Is it possible to customize the existing Panorama control to vertical Panorama?
3. If I have to implement my own one, how to implement it? My current thought is to make a big canvas and draw everything myself? Will it be too low level? Is there any good ways to reimplement the Panorama with vertical behaviour?

Thank you very much.

Answer 1

Having played around with it a bit, I think it's a bit more simple that a vertical panorama.

You are correct in your assertion that it's not resizing the map, but simply shifting it off screen.

So here are my thoughts.

1. My belief is that they have a Grid with 2 rows, both having a minimum height of ~100px or so (haven't checked actual value). This buffer is so you can see the other "screen" when one is slid up or down. The bottom screen is onliy visible when a search has been performed. Then, there is a tap and drag handling code that adjusts the overall top margin of the grid to slide it up and down. This is done based on the changes in the finger position.
2. No, I would be faily confident you would have to manually make this.
3. See my thoughts in answer 1.

I hope this makes sense. It's a tricky one, but I feel like this is on the right path.

Answer 2

My suggestion would be to try option 3. You can have one canvas the size of the page. Position the map control and the results control vertically. Then you need to handle the gesture and adjust the Canvas.Top property of each control to move it up/down.

Easier said than done I know... but if it were me, I would try that approach.