在 wpf 中绑定可移动和可调整大小的矩形列表

如何解决在 wpf 中绑定可移动和可调整大小的矩形列表

我想在图像上标记人脸。 我有一个这样的矩形类：

public class Rect : INotifyPropertyChanged
    {
        private double? postop { get; set; }
        private double? postleft { get; set; }
        private double? height { get; set; }
        private double? width { get; set; }
        private string name { get; set; }
        public double? Postop
        {
            get { return postop; }
            set { postop = value; OnPropertyChanged("Postop"); }
        }
        public double? Posleft
        {
            get { return postleft; }
            set { postleft = value; OnPropertyChanged("Posleft"); }
        }
        public double? Height
        {
            get { return height; }
            set { height = value; OnPropertyChanged("Height"); }
        }
        public double? Width
        {
            get { return width; }
            set { width = value; OnPropertyChanged("Width"); }
        }
        public string Name
        {
            get { return name; }
            set { name = value; OnPropertyChanged("Name"); }
        }


        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
            }
        }
    }

我想绑定一个列表：

private ObservableCollection<Rect> rects { get; set; }
        public ObservableCollection<Rect> Rects
        {
            get
            {
                if (rects == null)
                {
                    rects = new ObservableCollection<Rect>();
                    rects.Add(new Rect() { Height = 50,Posleft = 100,Postop = 100,Width = 50,Name = "Test" });
                    rects.Add(new Rect() { Height = 50,Posleft = 200,Postop = 200,Name = "Test2" });
                }
                return rects;
            }
            set { rects = value; }
        }

到一个项目控件：

<ItemsControl x:Name="test" ItemsSource="{Binding Rects}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Rectangle Tag="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ItemsControl}}}" Width="{Binding Width,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Height="{Binding Height,UpdateSourceTrigger=PropertyChanged}">
                        <Rectangle.Style>
                            <Style TargetType="Rectangle">
                                <Setter Property="Stroke">
                                    <Setter.Value>
                                        <SolidColorBrush Color="Red"></SolidColorBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="StrokeThickness" Value="20"></Setter>
                            </Style>
                        </Rectangle.Style>
                        <i:Interaction.Behaviors>
                            <local:RectBehavior></local:RectBehavior>
                        </i:Interaction.Behaviors>
                    </Rectangle>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Canvas.Left" Value="{Binding Posleft,UpdateSourceTrigger=PropertyChanged}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Postop,UpdateSourceTrigger=PropertyChanged}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>

我有一个行为类来移动矩形，效果很好：

 public class RectBehavior : Behavior<FrameworkElement>
    {
        private TranslateTransform originTT = new TranslateTransform();
        private Point clickPosition;
        protected override void OnAttached()
        {
            var canvas = AssociatedObject as Rectangle;

            AssociatedObject.MouseLeftButtonDown += (s,e) =>
            {
                var parent = canvas.Tag as ItemsControl;
                originTT = canvas.RenderTransform as TranslateTransform ?? new TranslateTransform();
                clickPosition = e.GetPosition(parent);
                GlobalVars.isRectDragInProgress = true;
                AssociatedObject.CaptureMouse();
            };
            AssociatedObject.MouseMove += (s,e) =>
            {
                var mousePos = e.GetPosition(canvas);
                if (GlobalVars.isRectDragInProgress)
                {
                    var parent = canvas.Tag as ItemsControl;
                    Point currentPosition = e.GetPosition(parent);                    
                        var transform = parent.RenderTransform as TranslateTransform ?? new TranslateTransform();
                        transform.X = originTT.X + (currentPosition.X - clickPosition.X);
                        transform.Y = originTT.Y + (currentPosition.Y - clickPosition.Y);
                        canvas.RenderTransform = new TranslateTransform(transform.X,transform.Y);                    
                }
            };
            AssociatedObject.MouseLeftButtonUp += (s,e) =>
            {
                GlobalVars.isRectDragInProgress = false;
                AssociatedObject.ReleaseMouseCapture();
            };
        }
    }

我的问题是，

1. 当我移动它们时，Rect 类的属性 Postop 和 Posleft 似乎不会改变。
2. 我不知道如何调整矩形的大小。