Wpf Popup placement

Question

Hello,

Is there any chance I can place popup next to an item from ListBox? I use MVVM, list is bound to elements, and for some choosen elements I want to show popup next to the item.

I have list of elements and I want to show popup when I click on specified list element, but popup should be shown next to selected list item.

I tried something like this (it doesn't work):

    <Popup  IsOpen="{Binding Path=ShowPopup}" PlacementTarget="{Binding ElementName=List1, Path=SelectedItem}" Placement="Center">
        <TextBox Background="Red" Height="120" Text="Aaaaaa FUUUUUUUUUUUUU....."></TextBox>
    </Popup>

I don't want to use code behind, only xaml

Answer 1

Since you want to show the popup when the item is clicked, will this work for you:

<Popup  IsOpen="{Binding Path=ShowPopup}" Placement="Mouse">
     <TextBox Background="Red" Height="120" Text="Aaaaaa FUUUUUUUUUUUUU....."></TextBox>
 </Popup>

Answer 2

The reason your example doesn't work is simply because you are binding the placement target to a non-ui object.

PlacementTarget="{Binding ElementName=List1, Path=SelectedItem}"

SelectedItem in this case could be a model/view model that represents an item in your list, therefor is not a correct usage of the PlacementTarget property.

What you need is to set the PlacementTarget to the ItemContainer (Dr. WPF explains) and this is not possible without the help of "some" codes.

Now that you know the problem, there are a few ways to make your code work so i'll leave it up to you.

Answer 3

This will place a Popup to the right of the selected ListBoxItem

<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<ControlTemplate x:Key="PopupListBoxItemTemplate" TargetType="ListBoxItem">
    <Border Name="Border" Padding="2" SnapsToDevicePixels="true">
        <Grid>
            <Popup Name="c_popup" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" >
                <Border BorderBrush="Black" BorderThickness="1" CornerRadius="2.5">
                    <TextBlock Background="Wheat" Foreground="Black" Text="Aaaaaa FUUUUUUUUUUUUU....."/>
                </Border>
            </Popup>
            <ContentPresenter />
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsSelected" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
            <Setter TargetName="c_popup" Property="IsOpen" Value="True"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ListBox Name="c_listBox"
         ...>
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template" Value="{StaticResource ListBoxItemTemplate}" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>