如何在 ContextMenu 中從 canvas 中刪除橢圓？

Question

我試圖通過右鍵單擊它並選擇刪除來刪除選定的橢圓。 我試圖通過 e 訪問元素，但從調試項目中我看到在 e 中我有一個文本塊類型的 object。 我還嘗試刪除 texblock 來解決問題，但后來我得到了另一個不是橢圓的元素。 有沒有辦法解決這個問題或做同樣的事情的替代解決方案？ 我是 canvas 的新手。

DFAWindow.xaml.cs

public partial class DFAWindow : Window
{
    Brush CustomBrush;
    private static int _numberOfStates;
    public DFAWindow()
    {
        InitializeComponent();
        _numberOfStates = -1;
    }

    private void AddStates_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (e.OriginalSource is Ellipse)
        {

            //nothing for the moment
        }
        else
        {
            _numberOfStates++;
            var text = new TextBlock()
            {
                Text = "q"
            };
            Canvas.SetLeft(text, e.GetPosition(DFACanvas).X + 20);
            Canvas.SetTop(text, e.GetPosition(DFACanvas).Y + 18);

            CustomBrush = new SolidColorBrush(Color.FromRgb(251,155,80));
            Ellipse newCirc = new Ellipse
            {
                Width = 50,
                Height = 50,
                StrokeThickness = 3,
                Fill = CustomBrush,
                Stroke = Brushes.Black
            };

            Canvas.SetLeft(newCirc, e.GetPosition(DFACanvas).X); 
            Canvas.SetTop(newCirc, e.GetPosition(DFACanvas).Y);

            DFACanvas.Children.Add(newCirc);
            DFACanvas.Children.Add(text);

            newCirc.MouseRightButtonDown += OnEllipseMouseRightButtonDown;

        }
    }


    private void RemoveState_Click(object sender, MouseButtonEventArgs e)
    {
        if (e.OriginalSource is Ellipse )
        {
            Ellipse activeCircle = (Ellipse)e.OriginalSource;
            DFACanvas.Children.Remove(activeCircle);
        }
    }

    void OnEllipseMouseRightButtonDown(object sender, MouseButtonEventArgs e)
    {
        OptionsMenu.IsOpen = true;
    }

    }

DFAWindow.xaml

<Grid Background="#5bb4c4">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.15*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="0.15*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Horizontal" Background="#2c599d" >
        <Label Content="Alphabet:"
               Style="{StaticResource LabelInput}"/>
        <TextBox Style="{StaticResource TextboxInput}"/>
        <Button Content="Choose"
                Style="{StaticResource SelectButton}"/>
    </StackPanel>
    <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right" Background="#2c599d" >
        <Label Content="Input:"
               Style="{StaticResource LabelInput}"/>
        <TextBox Style="{StaticResource TextboxInput}"/>
        <Button Content="Check"
                Style="{StaticResource SelectButton}"/>
    </StackPanel>
    <Canvas Grid.Row="1" x:Name="DFACanvas" 
            Focusable="True" 
            MouseLeftButtonDown="AddStates_MouseLeftButtonDown" 
            Background="Transparent">
        <Ellipse>
        <Ellipse.ContextMenu >
            <ContextMenu x:Name="OptionsMenu">
                <MenuItem Header="Remove state" PreviewMouseDown="RemoveState_Click"/>
                <MenuItem Header="Make initial state"/>
                <MenuItem Header="Make final state"/>
            </ContextMenu>
        </Ellipse.ContextMenu>
        </Ellipse>

    </Canvas>
</Grid>

Answer 1

希望它仍然會有所幫助，但您可以檢查此解決方案：我將上下文菜單添加到橢圓：

ContextMenu contextMenu = new ContextMenu();
MenuItem  mItem1 = new MenuItem() { Header = "Remove state" };
mItem1.Click += new System.Windows.RoutedEventHandler(mItem1_Click);
contextMenu.Items.Add(mItem1);

然后將上下文菜單設置為橢圓：

ellipse.ContextMenu = contextMenu;

現在您可以通過以下步驟到達橢圓：

private void mItem1_Click(object sender, RoutedEventArgs e)
{
    var menuItem = sender as MenuItem;
    var contextMenu = menuItem?.Parent as ContextMenu;
    var ellipse = contextMenu?.PlacementTarget as Ellipse;
    DFACanvas.Children.Remove(ellipse);
}

我通過代碼添加了上下文菜單，但我認為它也應該從 xaml 工作，只需檢查上下文菜單 function 處理程序