如何在画布上移动/调整大小/旋转ContentControl？

我试图用WPF创建图设计器并使用MVVM模式，我从本指南中获取信息和一些技巧：https : //www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1

一会儿，我的项目看起来像：

WPF：在运行时具有可拖动控件的水合画布

当然，我也遇到了与上述作者类似的问题：当绘制我的时ContentControl，它使用随机坐标正确绘制，但是当我尝试移动它时，它就不会移动！当我调试类时MoveThumb，我看到我的类ContentControl还没有Parent。但在我看来，它应该有Canvas一个Parent。我知道我应该覆盖某些系统/基本方法，但是我不明白应该覆盖什么以及如何覆盖它。也许有人有主意？

现在，我尝试描述我的实现，首先创建BaseShapeViewModel

abstract public class BaseShapeViewModel : BaseViewModel
{

    public BaseShapeViewModel()
    {

    }

    private double left;
    public double Left
    {
        get => left;
        set => SetField(ref left, value, nameof(Left));
    }

    private double top;
    public double Top
    {
        get => top;
        set => SetField(ref top, value, nameof(Top));
    }

    private int width;
    public int Width
    {
        get => width;
        set => SetField(ref width, value, nameof(Width));
    }

    private int height;
    public int Height
    {
        get => height;
        set => SetField(ref height, value, nameof(Height));
    }

    private string fill;
    public string Fill
    {
        get => fill;
        set => SetField(ref fill, value, nameof(Fill));
    }

    private string text;
    public string Text
    {
        get => text;
        set => SetField(ref text, value, nameof(Text));
    }

}

其他ViewModels EllipseViewModel，RectangleViewModel继承自BaseShapeViewModel。我的MainViewModel看起来像

class MainViewModel : BaseViewModel
{
    public MainViewModel()
    {          
        BaseShapeViewModels = new ObservableCollection<BaseShapeViewModel>();                    
    }

    public ObservableCollection<BaseShapeViewModel> BaseShapeViewModels { get; set; }

    //public Canvas DesignerCanvas;
   
    private RelayCommand createUseCase;
    private RelayCommand createRectangle;

    public ICommand CreateUseCase
    {
        get
        {
            return createUseCase ?? 
                (
                    createUseCase = new RelayCommand(() => { AddUseCase(); })                    
                );
        }
    }
    public ICommand CreateRectangle
    {
        get
        {
            return createRectangle ??
                (
                    createRectangle = new RelayCommand(() => { AddRectangle(); })
                );
        }
    }

    private void AddUseCase()
    {
        Random rnd = new Random();
        
        int valueLeft = rnd.Next(0, 200);
        int valueTop = rnd.Next(0, 200);
        
        EllipseViewModel useCaseViewModel = new EllipseViewModel {Left=valueLeft,Top=valueTop, Height = 100, Width = 200, Fill="Blue"};
        BaseShapeViewModels.Add(useCaseViewModel);
  
    }

    private void AddRectangle()
    {
        Random rnd = new Random();
        
        int valueLeft = rnd.Next(0, 200);
        int valueTop = rnd.Next(0, 200);

        RectangleViewModel rectangleViewModel = new RectangleViewModel { Left = valueLeft, Top = valueTop, Height = 100, Width = 200, Fill = "Blue" };
        BaseShapeViewModels.Add(rectangleViewModel);
    }
}

我的MoveThumb.cs看起来像

 public class MoveThumb : Thumb
{
  
    public MoveThumb()
    {
        DragDelta += new DragDeltaEventHandler(this.MoveThumb_DragDelta);
    }

    private void MoveThumb_DragDelta(object sender, DragDeltaEventArgs e)
    {
        ContentControl designerItem = DataContext as ContentControl;
       
        if (designerItem != null)
        {
            Point dragDelta = new Point(e.HorizontalChange, e.VerticalChange);
            
            RotateTransform rotateTransform = designerItem.RenderTransform as RotateTransform;
            if (rotateTransform != null)
            {
                dragDelta = rotateTransform.Transform(dragDelta);
            }
            double left = Canvas.GetLeft(designerItem);
            double top = Canvas.GetTop(designerItem);
           
            Canvas.SetLeft(designerItem, left + dragDelta.X);
            Canvas.SetTop(designerItem, top + dragDelta.Y);       
        }

    }
}

并且知道我想说我不是Xaml的专家，但是我从第一个链接检查了材料并像这样创建MoveThumb.xaml

<ResourceDictionary 

<ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type s:MoveThumb}">
    <Rectangle Fill="Transparent"/>
</ControlTemplate>

在我创建ResizeDecorator和RotateDecorator之后，但是现在没关系，并创建DesignerItem.xaml

ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="MoveThumb.xaml"/>
    <ResourceDictionary Source="ResizeDecorator.xaml"/>
    <ResourceDictionary Source="RotateDecorator.xaml"/>
</ResourceDictionary.MergedDictionaries>

<!-- ContentControl style to move, resize and rotate items -->
<Style x:Key="DesignerItemStyle" TargetType="ContentControl">
    <Setter Property="MinHeight" Value="50"/>
    <Setter Property="MinWidth" Value="50"/>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
                <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                    <Control Name="RotateDecorator"
                             Template="{StaticResource RotateDecoratorTemplate}"
                             Visibility="Collapsed"/>
                    <s:MoveThumb Template="{StaticResource MoveThumbTemplate}"
                                 Cursor="SizeAll"/>
                    <Control x:Name="ResizeDecorator"
                             Template="{StaticResource ResizeDecoratorTemplate}"
                             Visibility="Collapsed"/>
                    <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter TargetName="ResizeDecorator" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="RotateDecorator" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我尝试在我的MainWindow.xaml中为我的ContentControls绑定此样式

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/DesignerItem.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>

    <StackPanel Background="Gray" Grid.RowSpan="2">
        <TextBlock Text="Shapes"                      
                   FontSize="18"
                   TextAlignment="Center" />
        <Button Content="Initial Node" />
        <Button Content="Final Node" />
        <Button Content="Line" />
        <Button Content="Action" />
        <Button Content="Decision Node" />
        <Button Content="Actor" />
        <Button Content="Class" Command="{Binding Path=CreateRectangle}"/>
        <Button Content="Use Case" Command="{Binding Path = CreateUseCase}"/>
    </StackPanel>

    <Grid Grid.Column="2">

        <ItemsControl ItemsSource="{Binding Path= BaseShapeViewModels}">

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>

                    <Canvas/>

                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.Resources>
                <DataTemplate DataType="{x:Type viewModel:EllipseViewModel}">
                    <ContentControl
                                           Selector.IsSelected="True"
                                           Style="{StaticResource DesignerItemStyle}">

                        <Ellipse 
                                           Fill="{Binding Fill}"                                               
                                           IsHitTestVisible="False"/>

                    </ContentControl>
                </DataTemplate>

                <DataTemplate DataType="{x:Type viewModel:RectangleViewModel}">
                    <ContentControl             
                                           Selector.IsSelected="True"
                                           Style="{StaticResource DesignerItemStyle}">

                        <Rectangle 
                                           Fill="{Binding Fill}"                                              
                                           IsHitTestVisible="False"/>
                    </ContentControl>
                </DataTemplate>
            </ItemsControl.Resources>

            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding Left, Mode=TwoWay}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Top, Mode=TwoWay}"/>
                    <Setter Property="Width" Value="{Binding Width, Mode=TwoWay}"/>
                    <Setter Property="Height" Value="{Binding Height,Mode=TwoWay}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
        
    </Grid>
</Grid>