Damian Mehers' Blog Android, VR and Wearables from Geneva, Switzerland.

11Apr/113

GoBackAction–a Windows Phone Behavior to navigate back

Behaviors are a great way to encapsulate functionality that can be used in a drag-and-drop environment such as Expression Blend.

Out of the box you get a NavigateToPageAction, but I couldn’t see an easy way to navigate backwards to the previous page using any of the built-in behaviors.  I wanted to let the user click on an item in a list, and then have the Phone automatically navigate to the previous page.

So here it is, the world’s simplest behavior:

[DefaultTrigger(typeof (ButtonBase), typeof (System.Windows.Interactivity.EventTrigger), "Click")]
[DefaultTrigger(typeof (UIElement), typeof (System.Windows.Interactivity.EventTrigger), "MouseLeftButtonDown")]
public class GoBackAction : TriggerAction<FrameworkElement>
{
    protected override void Invoke(object parameter)
    {
        var rootFrame = Application.Current.RootVisual as PhoneApplicationFrame;
        if(rootFrame !=null)
        {
            rootFrame.GoBack();
        }
    }
}

Once you’ve built this class in your project, if you open your project in Expression Blend you should see the GoBackAction listed in the Behaviors section of the Assets tab.  You can then drag the behavior onto a UI element, define the event that should trigger the action, and then when the event occurs you should be automatically navigated backwards.

Filed under: WP7 3 Comments
4Apr/111

Adapting Fluid List Animation to work with the LongListSelector

Colin Eberhardt at ScottLogic has been doing some excellent work showing how we can make our own UIs animate in a fluid manner similar to the built in Microsoft UIs on Windows Phone.

His Fluid List Animation is particularly neat, and I thought I’d apply it to the UI I’m developing, specifically on a couple of LongListSelectors that I embed in Pivots.

Unfortunately his code didn’t work on the LongListSelector out of the box because although Colin went out of his way to make it work with any ItemsControl, the LongListSelector is not an ItemsControl.  Fortunately his code was well commented, and it was trivial to modify it to work with the LongListSelector.

All the changes are in the OnIsPivotAnimatedChanged method in the ListAnimation class.

private static void OnIsPivotAnimatedChanged(DependencyObject d, DependencyPropertyChangedEventArgs args)
{
//  ItemsControl list = d as ItemsControl;
    LongListSelector list = d as LongListSelector;

Next find the section that starts with the comment “locate the stack panel that hosts the items” and replace the code that follows it (up to and including the for loop) with:

var itemsInView = list.GetItemsWithContainers(true, true);

foreach (ContentPresenter item in itemsInView)
{
    var localItem = item;
    list.Dispatcher.BeginInvoke(() =>
    {
        var animationTargets = localItem.Descendants().Where(p => GetAnimationLevel(p) > -1);
        foreach (FrameworkElement target in animationTargets)
        {
            // trigger the required animation
            GetAnimation(target, fromRight).Begin();
        }
    });
}

The key is the call to GetItemsWithContainers – the first parameter indicates we only want items that are in view, and the second indicates we want the containers (hence the ContentPresenter type in the foreach).

That’s it – Colin did all the hard work – I just adapted it – all kudos to him.

Filed under: WP7 1 Comment