WPF : How to place a Pop up below the current selected Datagrid cell

Question

I have a Datagrid and i need to show a pop below the selected cells,thanks in advance. :)

Answer 1

If you want to implement the only in Xaml, you can use below code:

 <Window.Resources>  
        <ControlTemplate x:Key="ItemWithPopup" TargetType="{x:Type DataGridCell}">  
            <Border Name="border" Padding="2">  
                <Grid>  
                    <Popup Name="popup" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" Width="400" Height="200">  
                        <TextBlock Margin="1" Background="White" Foreground="Black" Text="{Binding RelativeSource={RelativeSource AncestorType=DataGridCell,AncestorLevel=1,Mode=FindAncestor}}" />  
                    </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" />  
                    <Setter Property="Background" Value="Red"/>  
                    <Setter Property="Foreground" Value="Black"/>  
                </Trigger>  
            </ControlTemplate.Triggers>  
        </ControlTemplate>  
  
        <Style TargetType="{x:Type DataGridCell}">  
            <Setter Property="Template" Value="{StaticResource ItemWithPopup}"></Setter>  
        </Style>  
    </Window.Resources>  
    <Grid>  
        <DataGrid Name="dataGrid" ItemsSource="{Binding }" AutoGenerateColumns="False"  SelectionMode="Extended" SelectionUnit="CellOrRowHeader" >  
              
            <DataGrid.Columns>  
                <DataGridTextColumn Header="Name" Width="80" Binding="{Binding Name}"/>  
                <DataGridTextColumn Header="Age" Width="50" Binding="{Binding Age}" />  
                <DataGridCheckBoxColumn Header="Pass Exam?" Width="100"  Binding="{Binding Pass}"/>  
                <DataGridHyperlinkColumn Header="Email" Width="150" Binding="{Binding Email}"/>  
            </DataGrid.Columns>  
        </DataGrid>  
    </Grid>  

If not, you can also implement in with cs code, there is an answer which gives you a sample too.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.