Display a new window next to a DataCell in a DataGrid (WPF)

Question

I need a scenario where a user clicks on a cell in a DataGrid in WPF, I want to open the NumPad next to it (this is mainly for input with a touch interface). NumPad, I understand this is a separate window.

1) How to find out which cell is selected
2) how can i show the numpad next to the cell?
3) How can I find the coordinates of the cell to place my NumPad?
4) How to set cell value based on NumPad record?

NumPad is a WPF user control in the same application. DataGrid is a .NET 4 control. It is a regular Windows desktop application.

Answer 1

This is not a trivial task, and you should have some knowledge of WPF for this, but here are some ideas you can look for:

• The DataGridCell.IsSelected property indicates whether a cell is selected.
• I would use Popup to show the NumPad directly besides the cell.
• If you use Popup , you do not need coordinates, but you can specify the relative location using the Popup.Placement property. Also see this MSDN document: Popup Placement Behavior
• You can try using the binding from NumPad for the user control in the DataGridCell.

Using DataGrid.CellStyle or DataGridColumn.CellStyle you can specify an alternative style for all DataGrid cells or a specific column. In this style, you can change the template and add a Popup that opens only if the current cell is selected. You can easily achieve this by Popup.IsOpen property to DataGridCell.IsSelected .

This is just an initial idea. You still have to look at the provided MSDN links, as well as read some other WPF stuff. Although it may take some time to learn this “WPF method” (i.e., XAML only), it (before my eyes) is much easier than using a lot of code to determine the current selected cell, positioning the control in the right place. transferring data from NumPad to a cell and so on ...

Answer 2

I really like the answer of Gehho. Executing, as he suggested, in addition to using the Template column over text column styles, led to the following XAML:

  <Grid x:Name="LayoutRoot"> <DataGrid> <DataGrid.Columns> <DataGridTextColumn Header="R" Binding="{Binding Color.R}" /> <DataGridTextColumn Header="G" Binding="{Binding Color.G}" /> <DataGridTextColumn Header="B" Binding="{Binding Color.B}" /> <DataGridTextColumn Header="Alpha" Binding="{Binding Color.A}" /> <DataGridTemplateColumn Header="Thumb"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Border x:Name="border" Background="{Binding}"> <Popup IsOpen="{Binding IsMouseOver, ElementName=border, Mode=OneWay}" PopupAnimation="Fade" Placement="MousePoint"> <Border Width="200" Height="200" Background="{Binding Background , ElementName=border, Mode=OneWay}" /> </Popup> </Border> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> <SolidColorBrush Color="Red"/> <SolidColorBrush Color="Green"/> <SolidColorBrush Color="Blue"/> <SolidColorBrush Color="Yellow"/> <SolidColorBrush Color="SteelBlue"/> <SolidColorBrush Color="Lime"/> <SolidColorBrush Color="Cyan"/> </DataGrid> </Grid> </Window> 

Hope this helps!