Всплывающее меню по нажатию кнопки

Question

Имеется форма:

Код:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <!-- First row -->
        <Grid Grid.Row="0">
            <ScrollViewer>
                <ItemsControl ItemsSource="{Binding Servers, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Margin="10" BorderBrush="#FFBBBBBB" BorderThickness="1">
                                <Grid Width="200" Height="150" Margin="5">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="auto"/>
                                    </Grid.RowDefinitions>
                                    <Image Grid.Row="0"
                                       Margin="3"
                                       Width="50"
                                       Height="50"
                                       Source="{Binding ServerLogo}"/>
                                    <Grid Grid.Row="1"
                                          Background="{Binding StatusColor, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition/>
                                            <ColumnDefinition/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="{Binding CurrentServer.Name}"
                                               Grid.Column="0"
                                               FontFamily="ArialBold"/>
                                        <Button Grid.Column="1"
                                            BorderThickness="0"
                                            Background="{x:Null}"
                                            Foreground="Blue"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Right"
                                            Content=". . ."
                                            Width="40"
                                            FontFamily="ArialBold"
                                            HorizontalContentAlignment="Center"
                                            VerticalContentAlignment="Center"/>
                                    </Grid>
                                    <TextBlock Text="{Binding CurrentServer.IP}"
                                               Background="{Binding StatusColor, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                               Grid.Row="2"
                                               FontFamily="Arial"/>
                                    <TextBlock Text="{Binding CurrentServer.Description}"
                                               Grid.Row="3"
                                               FontSize="12"
                                               TextWrapping="WrapWithOverflow"/>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
        <!-- End first row-->
        <!-- Second row -->
        <Grid Grid.Row="1">
            <Button Content="Settings"
                    Command="{Binding SettingsBTCommand}"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left"
                    Margin="10"/>
        </Grid>
        <!-- End second row-->
    </Grid>

У каждого элемента ItemsControl есть кнопка (3 точечки), как сделать так, чтобы при нажатии открывалось всплывающее окно рядом с этим элементом, с неким перечнем действий.

Смотрел в сторону Popup, но он всплывает при наведении на кнопку, а если увести мышку с кнопки то он пропадает. Пример:

Answer 1

Сделал так:

Добавил в кнопку свойство:

behaviors:ContextMenuLeftClickBehavior.IsLeftClickEnabled="True"

И само контекстное меню:

<Button.ContextMenu>
  <ContextMenu>
     <MenuItem Header=""/>
     <MenuItem Header=""/>
     <Separator/>
     <MenuItem Header=""/>
   </ContextMenu>
</Button.ContextMenu>

Описал класс:

public static class ContextMenuLeftClickBehavior
    {
        public static bool GetIsLeftClickEnabled(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsLeftClickEnabledProperty);
        }

        public static void SetIsLeftClickEnabled(DependencyObject obj, bool value)
        {
            obj.SetValue(IsLeftClickEnabledProperty, value);
        }

        public static readonly DependencyProperty IsLeftClickEnabledProperty = DependencyProperty.RegisterAttached(
            "IsLeftClickEnabled",
            typeof(bool),
            typeof(ContextMenuLeftClickBehavior),
            new UIPropertyMetadata(false, OnIsLeftClickEnabledChanged));

        private static void OnIsLeftClickEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            if (sender is UIElement uiElement)
            {
                bool IsEnabled = e.NewValue is bool && (bool)e.NewValue;

                if (IsEnabled)
                {
                    switch (uiElement)
                    {
                        case ButtonBase _:
                            ((ButtonBase)uiElement).Click += OnMouseLeftButtonUp;
                            break;
                        default:
                            uiElement.MouseLeftButtonUp += OnMouseLeftButtonUp;
                            break;
                    }
                }
                else
                {
                    switch (uiElement)
                    {
                        case ButtonBase _:
                            ((ButtonBase)uiElement).Click -= OnMouseLeftButtonUp;
                            break;
                        default:
                            uiElement.MouseLeftButtonUp -= OnMouseLeftButtonUp;
                            break;
                    }
                }
            }
        }

        private static void OnMouseLeftButtonUp(object sender, RoutedEventArgs e)
        {
            if (sender is FrameworkElement fe)
            {
                // if we use binding in our context menu, then it's DataContext won't be set when we show the menu on left click
                // (it seems setting DataContext for ContextMenu is hardcoded in WPF when user right clicks on a control, although I'm not sure)
                // so we have to set up ContextMenu.DataContext manually here
                if (fe.ContextMenu.DataContext == null)
                {
                    fe.ContextMenu.SetBinding(FrameworkElement.DataContextProperty, new Binding { Source = fe.DataContext });
                }

                fe.ContextMenu.IsOpen = true;
            }
        }

    }

Answer 2

Можно использовать обычное меню

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Width="800" Height="500">
    <Grid>
        <Menu HorizontalAlignment="Left" VerticalAlignment="Top">
            <MenuItem>
                <MenuItem.Header>
                    <TextBlock Text="&#xE712;" FontFamily="Segoe MDL2 Assets" FontSize="30"/>
                </MenuItem.Header>
                <MenuItem Header="Изменить"/>
                <MenuItem Header="Удалить"/>
                <Separator/>
                <MenuItem Header="Закрыть"/>
            </MenuItem>
        </Menu>
    </Grid>
</Window>

БЛОГ НА HUSL

Всплывающее меню по нажатию кнопки

Ответы (2 шт):