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

Tarun 21 Reputation points
2021-03-03T16:58:07.687+00:00

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

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,694 questions
0 comments No comments
{count} votes

Accepted answer
  1. DaisyTian-1203 11,616 Reputation points
    2021-03-04T02:53:27.08+00:00

    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.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful