Listview like mail app in Windows Phone 8.1

Question

I am trying to emulate the behavior of a ListView like the Messaging app in Windows Phone 8.1 but I can't seem to get the hang of it.

My XAML so far is:

        <ListView ItemsSource="{Binding}"
                  ItemTemplate="{StaticResource dataTemplate}"
                  Name="characterListView"
                  SelectionChanged="CharacterListView_OnSelectionChanged"
                  SelectionMode="Multiple"
                  ItemClick="CharacterListView_OnItemClick"
                  IsItemClickEnabled="False">

        </ListView>

And the code behind is:

    private void CharacterListView_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (characterListView.SelectedItems.Count > 0)
        {
            characterListView.SelectionMode = ListViewSelectionMode.Multiple;
        }
        else
        {
            //characterListView.ItemClick -= CharacterListView_OnItemClick;
            characterListView.SelectionMode = ListViewSelectionMode.Single;
        }
    }

    private void CharacterListView_OnItemClick(object sender, ItemClickEventArgs e)
    {
        Frame.Navigate(typeof (PivotPage), e.ClickedItem);
    }

The idea is, basically: if no items are selected, navigate to a page using the clicked item as parameter. Tapping at the left of the item should activate multiselect, and disable navigation. (I have another plans for multiselection, on the appbar, but that's another story). Well... Just like the messaging app!

I am aware of this component: https://modernography.wordpress.com/2014/08/28/multiselectlistview_with_edge_action/ which is nice, but I can't get it to work exactly anyway. I've fiddled with this for a couple of weeks and nada.

Manuel Santiago Yépez Manuel Santiago Yépez · Accepted Answer · 2015-06-27T21:41:55

I went back to using the MultiSelectView with Edge Action component and managed to get a sample or the source code. Based on that, here's that I intended to do:

<q:MultiSelectListView 
            ItemsSource="{Binding}"
            ItemTemplate="{StaticResource dataTemplate}"
            IsItemClickEnabled="True"
            ItemClick="CharacterListView_OnItemClick"
            Name="characterListView"
            SelectionChanged="CharacterListView_OnSelectionChanged"
            SelectionModeChanged="CharacterListView_OnSelectionModeChanged"
            >
        </q:MultiSelectListView>

Code behind:

    private void CharacterListView_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        characterListView.SelectionMode = characterListView.SelectedItems.Count == 0 ? 
            ListViewSelectionMode.None : ListViewSelectionMode.Multiple;
    }

    private void CharacterListView_OnSelectionModeChanged(object sender, RoutedEventArgs e)
    {
        if (characterListView != null)
        {
            characterListView.IsItemClickEnabled = characterListView.SelectionMode != ListViewSelectionMode.Multiple;
        }
    }


    private void CharacterListView_OnItemClick(object sender, ItemClickEventArgs e)
    {
        Frame.Navigate(typeof (CharacterPage), e.ClickedItem);
    }

Listview like mail app in Windows Phone 8.1

1 Answers