How to get the index of an item added dynamically to a ListBox

Question

I would like to get the current index of an item in a listbox that was added dynamically. Essentially my item is a HubTile, and hubtiles are added on a click event one at a time. The collection of hubtile items are held in an ObservableCollection. This observablecolelction is bound to a listbox which displays the items. To illustrate, what I have is as follows:

TabsPage.xaml

<ListBox x:Name="tileList" Grid.Row="0" Margin="12,0,12,0" toolkit:TiltEffect.IsTiltEnabled="True">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <toolkit:HubTile Title="{Binding TileName}" Margin="6"
                                         Notification="{Binding Notification}"
                                         DisplayNotification="{Binding DisplayNotification}"
                                         Message="{Binding Message}"
                                         GroupTag="{Binding GroupTag}"
                                         Source="{Binding ImageUri}"
                                         Tap="hubTile_Tap">
                        <toolkit:ContextMenuService.ContextMenu>
                            <toolkit:ContextMenu x:Name="menu">
                                <toolkit:MenuItem Header="pin to start" Tap="MenuItem_Tap"/>
                                <toolkit:MenuItem Header="delete" Tap="deleteMenuItem_Tap"/>
                            </toolkit:ContextMenu>
                        </toolkit:ContextMenuService.ContextMenu>
                    </toolkit:HubTile>

                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

TabsPage.xaml.cs

ObservableCollection<TileItem> tileItems;

public TabsPage()
    {
        InitializeComponent();

        CreateTileList(); //starts the list of HubTiles with a single main tile
    }

private void CreateTileList()
    {
        tileItems = new ObservableCollection<TileItem>()             
        {            
            //TileItem is     
            new TileItem() { ImageUri = mainImage, Title = "main", /*Notification = "",*/ Message = "main", GroupTag = "MainGroup", TileName = "main" },

        };

        //Set the first tile item
        this.tileList.ItemsSource = tileItems;  //sets the tileList Listbox ItemsSource to the tileItems ObservableCollection            

    }

void addNew_Click(object sender, EventArgs e)
    {
        BitmapImage newTileImage = new BitmapImage();

        var newItem = new TileItem() { ImageUri = newTileImage, Title = "new", /*Notification = "",*/ Message = "new HubTile", GroupTag = "TileGroup", TileName = "new" };
        tileItems.Add(newItem); //update UI immediately and add to collection
    }

private void hubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        //how to get the current index of the tapped HubTile//
        //var tap = (((sender as HubTile).Parent as ListBox).SelectedIndex); //NullReferenceException thrown
    }

So, the HubTile items are correctly added to the UI, but on the tapped event I do not know how to get the selected index of the currently tapped HubTile item?

Shawn Kendrot Shawn Kendrot · Accepted Answer · 2012-09-21T23:21:52

You can use the DataContext of the item clicked like such

private void hubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    FrameworkElement element = (FrameworkElement)sender;
    TileItem item = (TileItem)element.DataContext;
    int index = tileItems.IndexOf(item);
    // Use the index
}

You can also subscribe to the SelectionChanged event of the ListBox instead of the Tap event of the Hubtile. Then in the Selectionchanged event you can get the index.

private void OnSelectionChanged(object sender, SelectionChangedEventArgs selectionChangedEventArgs)
    {
        int index = tileList.SelectedIndex;
    }

How to get the index of an item added dynamically to a ListBox

2 Answers