WPFでの動的追加コントローラの削除方法

前提・実現したいこと

WPF(C#)でユーザが動的にオブジェクトを追加削除できるアプリの作成を行っています。
下記サイト様のgitコードを参考に取り組んでおります。
https://noitalog.tokyo/wpf-excel-shape-line/

サンプルコードはボタンを押すと、矩形とボタン(押すとLineが出る)がセットとなったオブジェクトが追加されます。
このサンプルのオブジェクトにdeleteボタンを追加し、それを押すとオブジェジェクトを削除できる機能を加えたいです。

質問したいこと

動的に追加されたオブジェクト(複数のボタンやLineを保有)を削除する方法がわからず、やり方や指針を教えていただけないでしょうか。

該当のソースコード

MainWindow.xaml
<Window
    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"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" x:Name="window"
    x:Class="WpfApp1.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
    <Grid x:Name="LayoutRoot">
        <materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth1" Mode="PrimaryMid">
            <DockPanel>
                <StackPanel Orientation="Horizontal">
                    <ToggleButton IsChecked="False" Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
                    <TextBlock Margin="16,0,0,0" VerticalAlignment="Center" Text="MainWindow" />
                </StackPanel>
            </DockPanel>
        </materialDesign:ColorZone>

        <Button 
            Content="図形追加" 
            HorizontalAlignment="Left" 
            VerticalAlignment="Top" 
            Width="120"
            Style="{StaticResource MaterialDesignRaisedButton}" 
            Margin="10,80,0,0" Click="AddShape_Click"/>

        <Canvas Margin="0,0,0,0" x:Name="canvas"></Canvas>
        
    </Grid>
</Window>

MainWindow.xaml.cs

using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void AddShape_Click(object sender, RoutedEventArgs e)
        {
            canvas.Children.Add(new ShapeObject());
        }
    }
}

ShapeObject.xaml
<Thumb
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:b="http://schemas.microsoft.com/xaml/behaviors" 
    x:Name="userControl" 
    x:Class="WpfApp1.ShapeObject"
    mc:Ignorable="d" 
    d:DesignHeight="100" d:DesignWidth="100" 
    d:DataContext="{d:DesignInstance {x:Type local:ShapeObjectViewModel}}">
    <Thumb.Template>
        <ControlTemplate TargetType="{x:Type Thumb}">
            <Grid x:Name="LayoutRoot">
                <materialDesign:Card 
                    Background="{DynamicResource PrimaryHueDarkBrush}" 
                    Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
                    Padding="8"
                    UniformCornerRadius="6"
                    VerticalAlignment="Stretch"
                    Margin="3">
                    <StackPanel>
                        <TextBlock TextWrapping="Wrap" Text="{Binding XPosition, StringFormat=X:{0}}"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding YPosition, StringFormat=Y:{0}}"/>
                    </StackPanel>
                </materialDesign:Card>

                <Button Background="GreenYellow" 
                    x:Name="right" 
                    HorizontalAlignment="Right" 
                    Width="5" Height="5" 
                    VerticalAlignment="Center" Cursor="Hand" PreviewMouseDown="Button_MouseDown" PreviewMouseMove="Button_MouseMove" PreviewMouseUp="Button_MouseUp">
                </Button>

<!--deleteボタンを追加-->
                <Button Content="×" 
                    Background="GreenYellow" 
                    x:Name="delete"  Margin="80,3,3,0" 
                    VerticalAlignment="Top" Height="20" Click="Clicked_Delete"></Button>
            </Grid>
        </ControlTemplate>
    </Thumb.Template>

</Thumb>

ShapeObject.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;

namespace WpfApp1
{
    public partial class ShapeObject : Thumb
    {
        private readonly ShapeObjectViewModel ViewModel;
        public ShapeObject()
        {
            InitializeComponent();
            ViewModel = new ShapeObjectViewModel();
            DataContext = ViewModel;
            HorizontalAlignment = HorizontalAlignment.Left;
            VerticalAlignment = VerticalAlignment.Top;
            Width = 100;
            Height = 100;
            Canvas.SetTop(this, 100);
            Canvas.SetLeft(this, 100);
            DragDelta += UserControl_DragDelta;
        }

        private void UserControl_DragDelta(object sender, DragDeltaEventArgs e)
        {
            var point = new Point(Canvas.GetLeft(this), Canvas.GetTop(this));
            point.X += e.HorizontalChange;
            point.Y += e.VerticalChange;
            Canvas.SetLeft(this, point.X);
            Canvas.SetTop(this, point.Y);

            if (ViewModel.RightLine != null)
            {
                var btn = Template.FindName("right", this) as Button;
                var btn_Vector = VisualTreeHelper.GetOffset(btn);
                var btnPoint = new Point(point.X, point.Y);
                btnPoint.X += btn_Vector.X;
                btnPoint.Y += btn_Vector.Y;
                ViewModel.RightLine.StartMove(btnPoint);
            }
        }

        private void Button_MouseDown(object sender, MouseButtonEventArgs e)
        {
            ViewModel.IsMouseDown = true;
            var canvas = (Canvas)Parent;
            var btn = (Button)sender;
            var btn_Vector = VisualTreeHelper.GetOffset(btn);
            var point = new Point(Canvas.GetLeft(this), Canvas.GetTop(this));
            point.X += btn_Vector.X;
            point.Y += btn_Vector.Y;
            var line = new LineObject(canvas);
            switch (btn.Name)
            {
                case "right":
                    ViewModel.RightLine = line;
                    ViewModel.RightLine.SetStartDirection(LineObjectViewModel.DirectionIndex.Right);
                    break;
                default:
                    return;
            }
            line.Addin(point, point);
        }

        private void Button_MouseMove(object sender, MouseEventArgs e)
        {
            if (!ViewModel.IsMouseDown) return;

            var btn = (Button)sender;
            var btn_Vector = VisualTreeHelper.GetOffset(btn);
            var point = new Point(Canvas.GetLeft(this), Canvas.GetTop(this));
            point.X += btn_Vector.X;
            point.Y += btn_Vector.Y;
            var btnPoint = e.GetPosition((Button)sender);
            point.X += btnPoint.X;
            point.Y += btnPoint.Y;
            LineObject line;
            switch (btn.Name)
            {
                case "right":
                    line = ViewModel.RightLine;
                    break;
                default:
                    return;
            }
            line.EndMove(point);
        }

        private void Button_MouseUp(object sender, MouseButtonEventArgs e)
        {
            ViewModel.IsMouseDown = false;
        }

        // delete機能を追加したいが、動的に追加された複数の要素をもつオブジェクトの削除方法がわからず.
　　　　 private void Clicked_Delete(object sender, RoutedEventArgs e)
        {
        }
    }
}

行動規範の内容に同意します

回答1件

ベストアンサー

こうでしょうか。

C#
1// LineObject.cs
2        // 追加
3        public void Remove()
4        {
5            this.ViewModel.Canvas.Children.Remove(this.ViewModel.linePath);
6            this.ViewModel.Canvas.Children.Remove(this.ViewModel.startPath);
7            this.ViewModel.Canvas.Children.Remove(this.ViewModel.endPath);
8        }

C#
1// ShapeObject.xaml.cs
2
3        private void Clicked_Delete(object sender, RoutedEventArgs e)
4        {
5            ViewModel.TopLine?.Remove();
6            ViewModel.RightLine?.Remove();
7            ViewModel.BottomLine?.Remove();
8            ViewModel.LeftLine?.Remove();
9
10            ((Canvas)this.Parent).Children.Remove(this);
11        }