Showing a new Window right next to a DataCell in D

Question

I want a scenario when a user clicks on a cell in DataGrid in WPF, I want to open NumPad next to it (This is basically for touch based input). The NumPad, I understand is a separate window.

1) How can I know which Cell is selected
2) how can I show the NumPad next to the cell?
3) How can I find the coordinates of cell to position my NumPad?
4) How can I set the value of cell based on NumPad entry?

NumPad is a WPF User Control in the same application. DataGrid is a .NET 4 Control. It's a normal Windows Desktop application

Answer 1

I really like Gehho's answer. Doing as he suggested, besides using the Template column over styling text columns, resulted in 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!

Answer 2

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

1. The DataGridCell.IsSelected property tells you whether a cell is selected.
2. I would use a Popup to show the NumPad directly besides the cell.
3. If you use a Popup you do not need the coordinates, but you can specify the relative placement using the Popup.Placement property. Also see this MSDN document: Popup Placement Behavior
4. You could try to use a Binding from the NumPad to the user control in the DataGridCell.

Using the DataGrid.CellStyle or the DataGridColumn.CellStyle property you can specify an alternate style for all cells of the DataGrid or some specific column. Within this style, you could change the template and add a Popup which is opened only if the current cell is selected. You can easily achieve this by binding the Popup.IsOpen property to the DataGridCell.IsSelected property.

This is just an initial idea. You will still have to have a look at the provided MSDN links and also read some other stuff about WPF. Although it might take some time to learn this 'WPF way' (i.e. only XAML), it is (in my eyes) much easier than using lots of code-behind to determine the currently selected cell, positioning a control at the correct location, transferring the data from the NumPad to the cell and so on...