Techfriday: Looping Panorama for Windows Phone 7 Series

Just a quick note:  I’m sure MS will be providing controls to this interface in the future so we don’t have to spend too much time building these controls ourselves This post, as with the previous one, was meant more as an Expression Blend Exercise for myself to be explore the features of Silverlight / Windows Phone 7 and Expression Blend to see how much can be done with what we have today.

There’s one annoying thing that I can’t figure out though: on the first scroll, you’ll notice from the video that the screen flickers. There’s probably something I’m doing wrong here but I just can’t figure it out yet

So I had set out to accomplish two things: Simulate the looping background and sections in the panoramic interface on windows phone and instead of flicking, let the user touch and drag the controls from left to right before switching. I was able to accomplish the two, but like I mentioned, there’s an annoying thing that happens on the first transition from state one to state two. Another thing that’s wrong with this sample is that, I shouldn’t be switching states right away on a drag to left or drag to right. You should be able to pan a bit and the screen holds to that position till you pan to a certain threshold before the interface snaps to the next section. But yeah, maybe next time.

The first challenge was implementing the drag to next state instead of the flick. I couldn’t really isolate this into either a trigger or an action as it’s actually a combination of both, therefore a behavior. Basically, depending on the sum of the left and right value of the users drag motion, I trigger either GoToNextState() or GoToPreviousState(). Code for these two were modified from http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack.

So I built a PanoramicPanningBehavior that has a few properties I can set.

First there are  the BackgroundElement, SectionsElement, TitleElement. I want them to be grouped so when it’s time for me to handle the drags, they don’t necessarily have to move at the same pace. That’s when the BackgroundMovementFactor and TitleMovementFactor come to play. Intstead of translating the background and title according to the value of the drag, I multiply it by the specified factor first. I’ve also let myself specify the StateGroup that has the states of our sections as described in my previous post, just in case you have other stategroups in the scene (though I haven’t tested this yet ^_^)

Now that I have the essential parts of my UI identified, I can now define what I want to do with them in my behavior when I start handling the events ManipulationDelta and ManipulationCompleted.

First for ManipulationDelta, I first check to see whether the parts are not null, and then based on the input factors, I apply them to the Translation.X property of the DeltaManipulation, or basically the change in the touch points and assign the value to the TranslateX properties of the CompositeTransform of the elements that have been identified through the properties. I think it’s better to read the code  

void RootVisual_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
     {
         if (!e.IsInertial)
         {
             if (BackgroundElement != null) {
                 var BG = getElement(BackgroundElement).RenderTransform as CompositeTransform;
                 BG.TranslateX += e.DeltaManipulation.Translation.X * BackgroundMovementFactor;
             
             }
             if (SectionsElement != null) {
                 var SE = getElement(SectionsElement).RenderTransform as CompositeTransform;
                 SE.TranslateX += e.DeltaManipulation.Translation.X;
             
             }
             if (TitleElement != null) { 
                 var TE = getElement(TitleElement).RenderTransform as CompositeTransform;
                 TE.TranslateX += e.DeltaManipulation.Translation.X* TitleMovementFactor;  
             }
                               
         };
     }

If I wanted to run the project at this point, I’ll have to create a stateGroup and the section states in order for this not to go haywire. When I recreated the project, I actually added the panning behavior last. Next we’ll see the reason why I say this is meant more as an exercise for myself (and maybe for building demo apps) than production code. I think from this screenshot you can more or less figure out what I did.

Okay, so seeing as how you’re able to, from the leftmost part of your UI, be able to pan even more to the left to peek and even transit into the rightmost section, there had to be something there. And since I didn’t want to duplicate all the controls, I wanted to use WPF’s VisualBrush. Sadly, this isn’t available for Silverlight, however, I did find this: http://dotneteers.net/blogs/vbandi/archive/2009/03/26/discovering-silverlight-3-poor-man-s-visualbrush-behavior.aspx When I tested it out, it wasn’t as performant as WPF’s visual brush, but since I only needed to draw the UI once, I thought this would do.If we had the PathListBox in WP7, that would have been a better option too.

If you look at my visual tree, I basically created a brush for the background image(image), the TitleGrid and the ContentGrid (which you won’t see since I collapsed it because there were more stuff inside. Next, you’ll notice that these elements are inside a stack and before and after each of them is a Rectangle. Basically, I created identically sized rectangles that use as brushes the PoorMansVisualBrush.

To do this, after adding a reference to the PoorMansVisualBrush (which I’ve made a WP version of ), I select the Rectangle and temporarily choose, TileBrush, click on Advanced Options in the Fill property and select Convert to New Resource… This will prompt me with a dialog to create a new brush resource and I’ll name it accordingly. In this Case, I have BackgroundBrush.

Next, with the behavior selected, I set the properties accordingly. Most important to note is to set the UpdateIntervalDuration to 00:00:00 so that the behavior doesn’t waste resources by repainting the brush. Next, you’ll want to go to each of the rectangles and assign their fill properties to the BrushResources you created. Also remember to set the Stroke to No brush especially if you have background images that are supposed to seamlessly merge the leftmost and rightmost portions. Now the tedious part is doing this for all the rectangles.  

The last, and yet another tricky part is setting up the states. What you’re seeing here is pretty much the same as the last post where I have 3 states, to show my 3 sections. Note that when you position the states, you’ll want to position the actual to the middle/actual objects. It’ll probably be too difficult to set up using the rectangles with the brushes anyway since they don’t render at design time ^_^. Here, you’ll notice I’ve added custom transitions for when Section1State goes to Section3State and vice versa.

To do this, I’ll click on add transition button and select Section1State –> Section3State

In order to see what I’m doing better, I’ll switch to the Animation Workspace by pressing the function key [F6]. I’ve also minimized the stacks back so it’s easier to manage. With the transition to Section3State selected I’ll record a keyframe at the start, and end of the .5s transition.

When I record a key frame at the end, it’ll actually default to moving to the right most part of the actual controls which I changed to the one below. I’ve highlighted the outlines of the rectangles that mimic the actual controls.

Do the same for transitioning Section3State->Section1State. What will happen here is the application will play this custom transition animation to showing the visual brushes and when the transition is done, it’ll switch to the destination state where the real controls are visible.

Run the app to test and that’s it!

Again, not an ideal solution for production but at least I got to learn a few more useful things in Blend that might be useful in the future.

I’ve uploaded the code here so if you want to test it out, download the zip file, rightclick –> properties –> Unblock to avoid getting those dll not found / inaccessible errors.

http://cid-bdfb7845c22e26b6.skydrive.live.com/embedicon.aspx/Projects/TechFriday/Panoramic%20Drag/PanoramaDrag.zip