Binding popup PlacementTarget to listbox SelectedItem

Question

I have the following XAML (simplified):

<Grid>
        <Popup Name="Popup" DataContext="{Binding ElementName=GameWheel, Path=SelectedItem}" PlacementTarget="{Binding SelectedItem}" Placement="Center" IsOpen="True">
            <Image Source="{Binding ImagePath}" Width="100" />
        </Popup>

        <DockPanel Margin="40,0">
            <ListBox x:Name="GameWheel"  ...>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <c:VirtualizingWrapPanel IsItemsHost="True" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image x:Name="GamesWheelImage" ... />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </DockPanel>
    </Grid>

While the DataContext is correct and it shows me the right image in the popup, the placement is completely wrong. My intention is to have the popup cover the center of the SelectedItem in the listbox, but for some reason it's always placed in the center of the window.

Any ideas on how to get the placement for the selectedItem in the listbox so the popup always covers the center of the selected item? The closest I get it to place the image in the center of the listbox, but I'm not able to get it to cover just the selected item.

Answer 1

In my opinion you should create a specific template for the ListBoxItems which belong to the Listbox called GameWheel . Just to give you a sample, I created a simplier version of your ListBox:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="300" Width="400">

    <Window.Resources>
        <ControlTemplate x:Key="ListBoxItemWithPopup" TargetType="{x:Type ListBoxItem}">
            <Border Name="border" Padding="2">
                <Grid>
                    <Popup Name="popup" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" 
                           Placement="Center" >
                        <TextBlock Margin="1" Background="White" Foreground="Black" Text="{TemplateBinding Content}" />
                    </Popup>
                    <ContentPresenter />
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="true">
                    <Setter TargetName="popup" Property="IsOpen" Value="True"/>
                    <Setter TargetName="border" Property="Background" Value="Azure" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>

    <Grid>

        <DockPanel Margin="40,0">
            <ListBox x:Name="GameWheel">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="Template" Value="{StaticResource ListBoxItemWithPopup}" />
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.Items>
                    <sys:String>One</sys:String>
                    <sys:String>Two</sys:String>
                    <sys:String>Three</sys:String>
                    <sys:String>Four</sys:String>
                </ListBox.Items>
            </ListBox>
        </DockPanel>
    </Grid>

</Window>

As you can see the Popup is directly contained in the ListBoxItem template and it is showed using a Trigger. I hope my sample can help you.