How to get the Tapped Item in a MultiselectList control

published on: 1/19/2012 | Views: N/A | Tags: WP7Toolkit

by WindowsPhoneGeek

In this article I am going to talk about how to get a reference to the item that has been tapped in a MultiselectList. At first look this task may look pretty simple but in fact it is not. The problem here is that the SelectedItems collection is empty when the MultiselectList is not in a selection mode.

To begin with, lets first create a new Windows Phone application project and add the necessary reference to the Windows Phone Toolkit. For more information about the MultiselectList control, take a look at the previous in depth posts:

• Windows Phone Toolkit MultiselectList in depth | Part1: key concepts and API
• Windows Phone Toolkit MultiselectList in depth| Part2: Data Binding

Step1: Add a MultiselectList control to your page:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <toolkit:MultiselectList x:Name="multiselectList">
        
    </toolkit:MultiselectList>
</Grid>

where "toolkit" is the following included namespace:

<phone:PhoneApplicationPage     
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Step2: Add the following code to create a data source for the multi-select list:

public class ListItem
{
    public string Title
    {
        get;
        set;
    }

    public string SubTitle
    {
        get;
        set;
    }
}

public IEnumerable<ListItem> CreateListItem()
{
    List<ListItem> listItems = new List<ListItem>();
    int count = 10;
    for (int i = 0; i < count; i++)
    {
        ListItem listItem = new ListItem()
        {
            Title = string.Format("Item {0} title", i),
            SubTitle = string.Format("Item {0} sub-title", i)
        };
        listItems.Add(listItem);
    }

    return listItems;
}

Next set the data source in this way:

// Constructor
public MainPage()
{
    InitializeComponent();

    // set data source
    this.multiselectList.ItemsSource = this.CreateListItem();
}

Step3: Add the following MultiselectList  ItemTemplate and bindings:

<toolkit:MultiselectList x:Name="multiselectList" toolkit:TiltEffect.IsTiltEnabled="True">
    <toolkit:MultiselectList.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextTitle3Style}" />
                <TextBlock Text="{Binding SubTitle}" Style="{StaticResource PhoneTextSmallStyle}"/>
            </StackPanel>
        </DataTemplate>
    </toolkit:MultiselectList.ItemTemplate>
</toolkit:MultiselectList>

Step4: Subscribe to the MultiselectList Tap event:

public MainPage()
{
    InitializeComponent();
    //...

    // subscribe to Tap event
    this.multiselectList.Tap+=new EventHandler<System.Windows.Input.GestureEventArgs>(multiselectList_Tap);
}

Step5: Add the following code inside the tap handler:

void multiselectList_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    if (this.multiselectList.IsSelectionEnabled)
    {
        // do not show message box if in selection mode
        return;
    }

    DependencyObject tappedElement = e.OriginalSource as UIElement;
    // find parent UI element of type MultiselectItem
    MultiselectItem tappedItem = this.FindParentOfType<MultiselectItem>(tappedElement);
    ListItem selectedItem = null;
    if (tappedItem != null)
    {
        // DataContext contains reference to data item
        selectedItem = tappedItem.DataContext as ListItem;
    }

    // if selected data item is not null
    if (selectedItem != null)
    {
        // then multiselect list item was tapped - show message box
        MessageBox.Show(string.Format("Item with title '{0}' was tapped", selectedItem.Title));
    }
}

The tap handler above, uses the FindParentOfType method from the snipped below. This method uses the VisualTreeHelper class to find a parent UI element of a particular type given a starting element.

private T FindParentOfType<T>(DependencyObject element) where T : DependencyObject
{
    T result = null;
    DependencyObject currentElement = element;
    while (currentElement != null)
    {
        result = currentElement as T;
        if (result != null)
        {
            break;
        }
        currentElement = VisualTreeHelper.GetParent(currentElement);
    }

    return result;
}

Step6: That's it, build and run the project.

Here is the full source code:

I hope that the post was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'How to get the Tapped Item in a MultiselectList control'

Title Your Name

Comment