How to display a Popup above mouse location?

Question

I have a DataGrid control in my application in which I added a custom-defined Popup for some actions. The basic thing is: I have a matrix of double numbers displayed in a DataGrid. Right clicking on selected cells will make a popup appear, in which the user can type a value then press enter to shift the values selected (all of the values selected will be incremented with the value entered)

Here is the current behavior:

And the XAML code for the popup:

<Style x:Key="ShiftPopupStyle" TargetType="{x:Type Popup}">
    <Setter Property="IsOpen" Value="False" />
    <Setter Property="StaysOpen" Value="False" />
    <Setter Property="AllowsTransparency" Value="True" />
    <Setter Property="PopupAnimation" Value="Fade" />
    <Setter Property="Placement" Value="Mouse" />
    <Setter Property="Child">
        <Setter.Value>
            <Border BorderBrush="Navy" Background="AliceBlue" BorderThickness="1" CornerRadius="2">
                <StackPanel Orientation="Horizontal" Margin="5">
                    <TextBox Text="{Binding ShiftValue, UpdateSourceTrigger=PropertyChanged}" Width="30" Margin="4" >
                        <TextBox.InputBindings>
                            <KeyBinding Command="{Binding ShiftCommand}" Key="Enter" />
                        </TextBox.InputBindings>
                    </TextBox>
                    <Button Content="Shift" Margin="0,4,0,4"
                            Command="{Binding ShiftCommand}"/>
                </StackPanel>
            </Border>
        </Setter.Value>
    </Setter>
</Style>

And here is how I open the Popup, this method is located in my custom DataGrid (I use a custom DataGrid able to display values from a 2D Array):

protected override void OnMouseRightButtonUp(System.Windows.Input.MouseButtonEventArgs e)
{
    if (!this.IsReadOnly)
    {
        this.shiftPopup.IsOpen = true;
    }
    base.OnMouseRightButtonUp(e);
}

Now, I need to add a ContextMenu to my DataGrid. When I try to add a ContextMenu directly on the DataGrid, I can see it before the grid is initialized, but afterwards, only the Popup shows up. No ContextMenu at all. I was expecting them to be at the same location, but the ContextMenu just won't appear.

Ideally what I'd need is an Office-like ContextMenu:

In which my shift Popup would appear above the mouse pointer, and my ContextMenu at the usual position.

If needed, I wouldn't care having a fixed layout (layout above/contextmenu under, whatever the mouse position is).

Would you have any idea on how to do so?

Alternatively, I was thinking about including the Popup content in the contextMenu, hoping it won't end up being ugly.

Thanks for your help!

Answer 1

The idea is to override default ContextMenu template.

Result:

Add reference to PresentationFramework.Aero.dll and try this code:

<Window 
    x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" 
    Title="MainWindow"
    Height="350" Width="525">

    <Window.Resources>
        <Style x:Key="MenuStyle" TargetType="{x:Type ContextMenu}" BasedOn="{StaticResource {x:Type ContextMenu}}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ContextMenu}">
                        <StackPanel>
                            <theme:SystemDropShadowChrome Name="Shdw2" Color="Transparent" SnapsToDevicePixels="true">
                                <Border Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}" 
                                        BorderThickness="{TemplateBinding BorderThickness}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBox Text="{Binding ShiftValue, UpdateSourceTrigger=PropertyChanged}"
                                                 Width="30" Margin="4">
                                            <TextBox.InputBindings>
                                                <KeyBinding Command="{Binding ShiftCommand}" Key="Enter" />
                                            </TextBox.InputBindings>
                                        </TextBox>
                                        <Button Content="Shift" Margin="0,4,0,4" Command="{Binding ShiftCommand}" />
                                    </StackPanel>
                                </Border>
                            </theme:SystemDropShadowChrome>

                            <theme:SystemDropShadowChrome Name="Shdw" Color="Transparent" SnapsToDevicePixels="true">
                                <Border Name="ContextMenuBorder"
                                        Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}">
                                    <Grid>
                                        <Rectangle Fill="#F1F1F1" HorizontalAlignment="Left" Width="28" Margin="2"
                                                   RadiusX="2" RadiusY="2" />
                                        <Rectangle HorizontalAlignment="Left" Width="1" Margin="30,2,0,2"
                                                   Fill="#E2E3E3" />
                                        <Rectangle HorizontalAlignment="Left" Width="1" Margin="31,2,0,2" Fill="White" />


                                        <ScrollViewer Name="ContextMenuScrollViewer" CanContentScroll="true"
                                                      Grid.ColumnSpan="2" Margin="1,0"
                                                      Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type FrameworkElement}, ResourceId=MenuScrollViewer}}">
                                            <Grid RenderOptions.ClearTypeHint="Enabled">
                                                <Canvas Height="0" Width="0" HorizontalAlignment="Left"
                                                        VerticalAlignment="Top">
                                                    <Rectangle
                                                        Height="{Binding ElementName=ContextMenuBorder,Path=ActualHeight}"
                                                        Width="{Binding ElementName=ContextMenuBorder,Path=ActualWidth}"
                                                        Fill="{Binding ElementName=ContextMenuBorder,Path=Background}" />
                                                </Canvas>
                                                <ItemsPresenter Name="ItemsPresenter"
                                                                Margin="{TemplateBinding Padding}" KeyboardNavigation.DirectionalNavigation="Cycle"
                                                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                            </Grid>
                                        </ScrollViewer>
                                    </Grid>
                                </Border>
                            </theme:SystemDropShadowChrome>
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasDropShadow" Value="true">
                                <Setter TargetName="Shdw" Property="Margin" Value="0,0,5,5" />
                                <Setter TargetName="Shdw" Property="Color" Value="#71000000" />
                                <Setter TargetName="Shdw2" Property="Margin" Value="0,0,5,5" />
                                <Setter TargetName="Shdw2" Property="Color" Value="#71000000" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <DataGrid IsReadOnly="True">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding}" />
            </DataGrid.Columns>

            <DataGrid.ContextMenu>
                <ContextMenu Style="{StaticResource MenuStyle}">
                    <MenuItem Header="Item 1"></MenuItem>
                    <MenuItem Header="Item 2"></MenuItem>
                    <MenuItem Header="Item 3"></MenuItem>
                </ContextMenu>
            </DataGrid.ContextMenu>

            <System:String>One</System:String>
            <System:String>Two</System:String>
            <System:String>Three</System:String>
        </DataGrid>
    </Grid>
</Window>