Popup Window and ElementName in WPF

Question

I have ListBox with ItemTemplate that contain a ToggleButton:

    <ListBox x:Name="lbInvoice" ItemsSource="{Binding ocItemsinInvoice}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <ToggleButton x:Name="btnInvoiceItem">
                    <StackPanel Orientation="Horizontal" Width="375">
                        <TextBlock Text="{Binding Item.ItemName}" Width="200"/>
                        <TextBlock Text="{Binding SalePrice}" Width="60"/>
                        <TextBlock Text="{Binding Quantity}" Width="40"/>
                        <TextBlock Text="{Binding Total}" FontWeight="Bold" TextAlignment="Center" Width="70"/>
                    </StackPanel>
                </ToggleButton>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Also, I have Popup window ,I want this Popup window opend when I check the ToggleButton, Here's my Popup code:

        <Popup x:Name="popup" PopupAnimation="Fade" AllowsTransparency="True" PlacementTarget="{Binding ElementName=btnInvoiceItem}" StaysOpen="False">
            <Grid>
                <TextBlock Text="pla pla pla"></TextBlock>
            </Grid>
        </Popup>

I set the btnInvoiceItem as ElementName for Popup but the Popup window dose not appear beside the ToggleButton :(

what I miss here ?

Thanks in advance.

Answer 1

btnInvoiceItem only exists within the context of the ListBoxItem that corresponds to the item in your collection. Therefore, the simplest way to do what you want is to put the Popup in the same DataTemplate as the button.

<DataTemplate>
    <StackPanel>
        <ToggleButton x:Name="btnInvoiceItem">
            <StackPanel Orientation="Horizontal" Width="375">
                <TextBlock Text="{Binding Item.ItemName}" Width="200"/>
                <TextBlock Text="{Binding SalePrice}" Width="60"/>
                <TextBlock Text="{Binding Quantity}" Width="40"/>
                <TextBlock Text="{Binding Total}" FontWeight="Bold" TextAlignment="Center" Width="70"/>
            </StackPanel>
        </ToggleButton>
        <Popup PopupAnimation="Fade" AllowsTransparency="True" StaysOpen="False" IsOpen="{Binding ElementName=btnInvoiceItem, Path=IsChecked, Mode=TwoWay}">
            <Grid>
                <TextBlock Text="pla pla pla"></TextBlock>
            </Grid>
        </Popup>
    </StackPanel>
</DataTemplate>

Answer 2

I think that you want to do something like this:

<Popup IsOpen={Binding IsChecked, ElementName=btnInvoiceItem} x:Name="popup" PopupAnimation="Fade" AllowsTransparency="True" PlacementTarget="{Binding ElementName=btnInvoiceItem}" StaysOpen="False">
        <Grid>
            <TextBlock Text="pla pla pla"></TextBlock>
        </Grid>
    </Popup>