Question

I am attempting to populate an ObservableCollection with the currently selected items in a MultiSelectList. The method of selection involves a checkbox control, and I am unsure of how to get the selected items to populate the ObservableCollection. I have referenced two methods which perform a single selection of the MultiSelectList as well as a ‘select all’ option of the MultiSelectList.

To note, networkSelectList is an ObservableCollection in a custom Settings class.

MainPage.xaml

<toolkit:MultiselectList x:Name="connectionTypeMultiSelectList" HorizontalAlignment="Left" VerticalAlignment="Top" Tap="connectionTypeMultiSelectList_Tap">
    <toolkit:MultiselectList.ItemTemplate>
        <DataTemplate>

            <StackPanel Orientation="Horizontal"  Margin="12,0,0,0">
                <Image Source="{Binding Icon}" Width="35" Height="35" Margin="0"/>
                <TextBlock Text="{Binding Name}" TextAlignment="Center"  Margin="10"/>
            </StackPanel>

        </DataTemplate>
    </toolkit:MultiselectList.ItemTemplate>                            
</toolkit:MultiselectList>

MainPage.xaml.cs

/// <summary>
    /// method to Select All and UnSelect All checkboxes
    /// </summary>
    /// <param name="selected"></param>
    /// <param name="predicate"></param>
    private void SetCheckBoxesSelected(bool selected, Predicate<ConnectionItem> predicate)
    {
        if (networkTypeList == null)
        {
            return;
        }
        if (predicate == null)
        {
            predicate = (networkInfo) => true;
        }


        ItemContainerGenerator itemContainerGenerator = this.connectionTypeMultiSelectList.ItemContainerGenerator;


        foreach (ConnectionItem networkInfo in networkTypeList)
        {
            if (networkInfo != null && predicate(networkInfo))
            {
                DependencyObject visualItem = itemContainerGenerator.ContainerFromItem(networkInfo);
                MultiselectItem multiselectItem = visualItem as MultiselectItem;
                if (multiselectItem != null)
                {
                    multiselectItem.IsSelected = selected;

                    //add selected item to networkSelectionChecked  ??
                    //Settings.networkSelectionChecked.Value.Add(multiselectItem.Name.ToString());
                }
            }
        }
    }

    /// <summary>
    /// triggered on tap of any item in connectionTypeMultiSelectList
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void connectionTypeMultiSelectList_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        DependencyObject tappedElement = e.OriginalSource as UIElement;
        MultiselectItem tappedItem = this.FindParentOfType<MultiselectItem>(tappedElement);
        ConnectionItem selectedItem = null;
        if (tappedItem != null)
        {
            // DataContext contains reference to data item
            selectedItem = tappedItem.DataContext as ConnectionItem;
        }


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

            //add selected item to networkSelectionChecked  ??
            //Settings.networkSelectionChecked.Value.Add(multiselectItem.Name.ToString());

        }
    }

    /// <summary>
    /// method to find out the element in VisualTree
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="element"></param>
    /// <returns></returns>
    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;
    }

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

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

So basically I am trying to add each item that is selected to an ObservableCollection. I would like to accomplish this so that I will be able to create secondary tiles and update them by passing a querystring representing the selected checkboxes. How might I accomplish correctly adding the selected checkbox items to an ObservableCollection? Also in a similiar sense, how would I detect when an item is unselected and remove that item from the ObservableCollection? Additionally, is there a correct way to persist the selected items in the MultiSelectList so that this may be saved for future application launched or activations?

Answer 1

You can get the selected items from the SelectedItems property.

var selectedItems = new ObservableCollection<ConnectionItem>(connectionTypeMultiSelectList.SelectedItems.Count);
foreach (var item in TextItemsList.SelectedItems)
{
    var connectionItem = item as ConnectionItem;
    if (connectionItem == null) continue;
    selectedItems.Add(connectionItem );
}

The SelectionChanged event will let you know when an item is (un)selected.

void MultiSelectListSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    foreach(var item in e.AddedItems)
    {
        // add to collection
    }
    foreach(var item in e.RemovedItems)
    {
        // remove from collection
    }
}