DotNetSpeaks - Part 84 - Windows Phone

Part 84 - Windows Phone - MultiSelectList

Published:

April 22, 2012 By Sumit Dutta

Visited: 2721

In this article I will discuss on how to create MultiSelectList in Windows Phone using Silverlight Windows Phone Toolkit. MultiSelectList lets you add a checkbox along with List to select and Unselect any ListItem.

Windows Phone - MultiSelectList

Let's write to code to build MultiSelectList.

Download Silverlight Windows Phone Toolkit

Step 1: Create a silverlight for Windows Phone project.

Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll

Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.

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

Step 4: Add MultiSelectList inside ContentPanel of Grid in MainPage.xaml. It has two TextBlock to bind Name and Number.

<toolkit:MultiselectList x:Name="multiSelectList" Tap="multiSelectList_Tap">
   <toolkit:MultiselectList.ItemTemplate>
      <DataTemplate>
         <StackPanel Orientation="Vertical" Margin="0,5,0,5">
            <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextTitle3Style}" />
            <TextBlock Text="{Binding Number}" Style="{StaticResource PhoneTextSmallStyle}"/>
         </StackPanel>
      </DataTemplate>
   </toolkit:MultiselectList.ItemTemplate>
</toolkit:MultiselectList>

Step 5: Add two MenuItem to implement Select and Unselect checkboxes of MultiSelectList.

<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBar.MenuItems>
         <shell:ApplicationBarMenuItem Click="selectAll_Click" Text="select all" x:Name="selectAllMenuItem"/>
         <shell:ApplicationBarMenuItem Click="unselectAll_Click" Text="unselect all" x:Name="unselectAllMenuItem"/>
      </shell:ApplicationBar.MenuItems>
      <shell:ApplicationBarMenuItem Click="selected_Click" Text="Selected Item" x:Name="selectedMenuItem"/>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Step 6: Create a ContactInfo class with Name and Number member variables.

public class ContactInfo
{
   public string Name
   {
      get;
      set;
   }

   public string Number
   {
      get;
      set;
   }
}

Step 7: Create a class level object of ContactInfo.

public partial class MainPage : PhoneApplicationPage
{
List<ContactInfo> contactInfoList;

Step 8: Place below code in the constructor of MainPage.xaml.cs. Below code will create list of ContactInfo and bind to MultiSelectList.

contactInfoList = new List<ContactInfo>()
{
   new ContactInfo() { Name = "Name 1", Number="012345678"},
   new ContactInfo() { Name = "Name 2", Number="111234558"},
   new ContactInfo() { Name = "Name 3", Number="234444555"},
   new ContactInfo() { Name = "Name 4", Number="666666777"},
   new ContactInfo() { Name = "Name 5", Number="998666444"},
   new ContactInfo() { Name = "Name 6", Number="223344556"},
   new ContactInfo() { Name = "Name 7", Number="897545568"},
   new ContactInfo() { Name = "Name 8", Number="455656564"},
   new ContactInfo() { Name = "Name 9", Number="343434567"}
};

this.multiSelectList.ItemsSource = contactInfoList;

Step 9: Add loaded event handler also to MainPage constructor which will invoke MainPage_Loaded when page is loaded.

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

Step 10: Add MainPage_Loaded in MainPage.xaml.cs. By default checkboxes in MultiSelectList are hidden when none of the checkbox is select, when you click on the area just before the lable it appears on the screen. To keep it visible on first load add below method. If you don't want Checkboxes to be visible of first load you can ignore Step 9 and Step 10.

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
this.multiSelectList.IsSelectionEnabled = true;
}

Step 11: Add SetCheckBoxesSelected method to Select All and UnSelect All checkboxes.

private void SetCheckBoxesSelected(bool selected, Predicate<ContactInfo> predicate)
{
   if (contactInfoList == null)
   {
      return;
   }
   if (predicate == null)
   {
      predicate = (contactInfo) => true;
   }

ItemContainerGenerator itemContainerGenerator = this.multiSelectList.ItemContainerGenerator;

   foreach (ContactInfo contactInfo in contactInfoList)
   {
      if (contactInfo != null && predicate(contactInfo))
      {
         DependencyObject visualItem = itemContainerGenerator.ContainerFromItem(contactInfo);
         MultiselectItem multiselectItem = visualItem as MultiselectItem;
         if (multiselectItem != null)
         {
            multiselectItem.IsSelected = selected;
         }
      }
   }
}

Step 12: Add unselectAll_Click and selectAll_Clik method which will be triggered on click of select All and unSelect All from menu item of ApplicaitonBar.

void unselectAll_Click(object sender, EventArgs e)
{
this.SetCheckBoxesSelected(false, null);
this.multiSelectList.IsSelectionEnabled = false;
}

void selectAll_Click(object sender, EventArgs e)
{
this.SetCheckBoxesSelected(true, null);
}

Step 13: Add selected_Click method in MainPage.xaml.cs to get all the selected item of MultiSelectList.

void selected_Click(object sender, EventArgs e)
{
   String str = "Select Items are ", selectedItems = "";
   foreach (ContactInfo cI in multiSelectList.SelectedItems)
   {
      selectedItems = selectedItems + " " + cI.Name;
   }
   MessageBox.Show(str + selectedItems);
}

Step 14: Add multiSelectList_Tap in MainPage.xaml.cs which will be triggered on tap of any item in MultiSelectList.

private void multiSelectList_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
   DependencyObject tappedElement = e.OriginalSource as UIElement;
   MultiselectItem tappedItem = this.FindParentOfType<MultiselectItem>(tappedElement);
   ContactInfo selectedItem = null;
   if (tappedItem != null)
   {
      // DataContext contains reference to data item
      selectedItem = tappedItem.DataContext as ContactInfo;
   }

   if (selectedItem != null)
   {
      MessageBox.Show(selectedItem.Name + "Tapped");
   }
}

Step 15: Add FindParentOfType method to find out the element in VisualTree.

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;
}

Step 16: Now run the application and you will get screen like below.

Windows Phone - MultiSelectList 1

This ends the article of MutliSelectList in Windows Phone.

Like us if you find this post useful. Thanks!

Set Index of AccordionPane using Javascript