相对于按钮放置上下文菜单

Question

I'm trying to do exactly what is described here , except with a Rectangle instead of a Button. I did what is described in the answer (among many other things), and I cannot get it to display as shown relative to the rectangle (which, in my case is being used by a button).

I am using a rectangle as a button because I didn't like the mouseover effects of a button and it seemed easier to just use a rectangle rather than building a custom button. As a note, I had this same problem even when I was using a button, in Expression Blend 4.

This is the XAML for my rectangle:

        <Rectangle x:Name="rectangle" HorizontalAlignment="Left" MouseDown="MenuClicked" Height="55" VerticalAlignment="Top" Width="135" Grid.ColumnSpan="2" Margin="0,1,0,0" ContextMenuService.Placement="Bottom">
        <Rectangle.ContextMenu>
            <ContextMenu x:Name="Menu" >

                <MenuItem x:Name="LoadXML" Header="Load XML" Command="{Binding Command}" CommandParameter="BrowseXML"/>
                <MenuItem x:Name="SaveXML" Header="Save XML" Command="{Binding Command}" CommandParameter="SaveXML"/>
                <MenuItem x:Name="SaveBinary" Header="Save Binary" Command="{Binding Command}" CommandParameter="SaveBinary"/>
                <MenuItem x:Name="SaveText" Header="Save Text" Command="{Binding Command}" CommandParameter="SaveText"/>
            </ContextMenu>
        </Rectangle.ContextMenu>

        <Rectangle.Fill>
            <ImageBrush ImageSource="Resources/Logo.png" Stretch="Uniform" />
        </Rectangle.Fill>

    </Rectangle>

This still displays the contextmenu directly next to the point of mouse click. If I set Placement to bottom within the Context Menu code, rather than adding the ContextMenuService bit to the Rectangle, it displays it at the bottom or top relative to the entire window.

Any help would be appreciated. Thanks!

EDIT: I am also using a method to enable left-clicking of the rectangle. On MouseDown, it calls this method:

    private void MenuClicked(object sender, System.Windows.RoutedEventArgs e)
    {
        Menu.PlacementTarget = this;
        Menu.IsOpen = true;
    }

Answer 1

You need to set the ContextMenuService.PlacementTarget property so the framework knows which element the context menu should be positioned relative to, eg:

<Rectangle x:Name="rectangle" ContextMenuService.PlacementTarget="{Binding RelativeSource={RelativeSource Self}}" ... />

Just add that property to your Rectangle declaration. When combined with ContextMenuService.Placement="Bottom" , the context menu will appear at the bottom as you intended.

EDIT: Since you are opening the menu programatically, you need to set the Placement and PlacementTarget properties directly on the menu itself. The attached properties from ContextMenuService , when set on the menu's owner, will only take effect if the context menu is opened by conventional means, eg, a right click. In your MouseDown handler, you are setting PlacementTarget = this; , but you should be setting PlacementTarget = rectangle; .