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