Find Index of Item in ItemsControl nested inside a LixtBox.Item

Question

I have an ItemsControl nested inside a ListBox.ItemTemplate. The top ListBox is data-bound to an ObservableCollection. The collection is essentially a Purchase which contains Formulae which in turn contain individual products.

Now, if an individual product inside a formula is clicked, I would like it to be deleted from its formula. So, in the event handler, I should be able to determine the product's position using:

var index = [theItemsControl].ItemContainerGenerator.IndexFromContainer((sender as Button).TemplatedParent);

However, in my event handler, I do not how how to find the containing ItemsControl. I cannot give it a fixed name, since it is itself a part of a ListBox.ItemTemplate, meaning there will be multiple instances.

This is my XAML, stripped of any style-related stuff:

<ListBox x:Name="lbBasketFormulae" ItemsSource="{Binding Path=Purchase.Formulae}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Vertical">

        <!-- Formula Title -->
        <StackPanel Orientation="Horizontal">
          <Label Width="30" Content="{Binding Path=Quantity}"></Label>
          <Label Content="{Binding Path=FormulaType, Converter={StaticResource formulaTypeToNameConverter}}"></Label>
        </StackPanel>

        <!-- Formula Products -->
        <ItemsControl ItemsSource="{Binding Path=Products}">
          <ItemsControl.ItemTemplate>
            <DataTemplate>
              <Button x:Name="bnBasketFormulaProduct" HorizontalContentAlignment="Left" Content="{Binding Path=Name}" Click="bnBasketFormulaProduct_Click">
                <Button.Template>
                  <ControlTemplate TargetType="Button">
                    <TextBlock Text="{TemplateBinding Content}" />
                  </ControlTemplate>
                </Button.Template>
              </Button>
            </DataTemplate>
          </ItemsControl.ItemTemplate>
        </ItemsControl>

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

So, my question is: How do I find the position of my product inside my formula and the position of that formula inside the purchase, so that I can remove it from the ObservableCollection? (Changing the collection should then automatically reflect to the UI since it is data-bound.)

Many thanks in advance for any advice or hints!

Regards,

Chris

Answer 1

It is true that you should be able to do it via the viewmodel. But if you want you could use:

VisualTreeHelper.GetParent(myUserControl);

Answer 2

The answer is you don't find any positions of anything using ItemContainerGenerator.IndexFromContainer. Your problem is clearly taking place inside ViewModel and therefore you should seek for selected item or whatever inside your ViewModel and not in ListBox or code behind of Window.

Therefore I suggest you to create a proper ViewModel with proper Bindings.