Trouble binding LongListSelector.SelectedItem to MVVM property

Question

Using Visual Studio 2013 and the Window Phone 8 SDK I cannot get the SelectedItem property of the LongListSelector to properly bind to an MVVM property

Answer 1

To get the item that was selected to the ViewModel, I'm always using a LongListSelector Extension - the code can be found here: https://gist.github.com/Depechie/7524630

What you need to do is add it to the XAML of your LongListSelector:

<phone:LongListSelector x:Name="List" ext:LongListSelectorExtension.Command="{Binding *YOURVIEWMODELCOMMAND*}" />

The command on the viewmodel will receive the object type of your item source on the LongListSelector

Answer 2

Use bahavior

public class LongListSelectedItemBehavior : Behavior<LongListSelector>
{
    public object SelectedItem
    {
        get { return (object)GetValue(SelectedItemProperty); }
        set { SetValue(SelectedItemProperty, value); }
    }

    // Using a DependencyProperty as the backing store for SelectedItem.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty SelectedItemProperty =
        DependencyProperty.Register("SelectedItem", typeof(object), typeof(LongListSelectedItemBehavior), new PropertyMetadata(null));


    protected override void OnAttached()
    {
        base.OnAttached();

        if (AssociatedObject != null)
        {
            AssociatedObject.SelectionChanged += AssociatedObject_SelectionChanged;
        }
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();

        if (AssociatedObject != null)
        {
            AssociatedObject.SelectionChanged -= AssociatedObject_SelectionChanged;
        }
    }

    private void AssociatedObject_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
    {
        SelectedItem = AssociatedObject.SelectedItem;
    }

And XAML

    <phone:LongListSelector Margin="0,0,-22,0"
                                    ItemsSource="{Binding Items}">
                <i:Interaction.Behaviors>
                    <local:LongListSelectedItemBehavior SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
                </i:Interaction.Behaviors>
            </phone:LongListSelector>