转载

WPF学习12：基于MVVM Light 制作图形编辑工具（3）

本文是 WPF学习11：基于MVVM Light 制作图形编辑工具（2）的后续

这一次的目标是完成 WPF学习12：基于MVVM Light 制作图形编辑工具（3）

两个任务。

本节完成后的效果：

WPF学习12：基于MVVM Light 制作图形编辑工具（3）

本文分为三个部分：

1.对之前代码不合理的地方重新设计。

2.图形可选择外框颜色，填充颜色的实现简介。

3.拖动图形的实现简介。

修改之前的代码

我们在写代码的时候，经常回头看之前的代码，如果觉得之前的代码有问题，这时候条件如果允许，就改了吧。

做出的改动：

1.修改Image为Canvas。

目的：使图形的缩放和移动这部分的代码实现大大简化。

去除了配置按钮。原因是：因为Image被换成了Canvas,更改画布大小的成本降低至接近0，直接把Canvas的宽高实现绑定就可以了。、

代码就不贴了，附件中有工程源码。

颜色部分

效果： WPF学习12：基于MVVM Light 制作图形编辑工具（3）

过程：首先是绑定颜色相关的List与属性。在前台代码中我们需要写好模板与绑定：

<TextBlock VerticalAlignment="Center"><Run Text="外框颜色："/></TextBlock> <ComboBox Width="100" Margin="0 0 10 0" ItemsSource="{Binding AvailableColors}" SelectedItem="{Binding BorderColor}">  <ComboBox.ItemTemplate>   <DataTemplate>    <Rectangle Width="87" Height="15" Fill="{Binding}"/>   </DataTemplate>  </ComboBox.ItemTemplate> </ComboBox> <TextBlock VerticalAlignment="Center"><Run Text="填充颜色："/></TextBlock> <ComboBox Width="100" Margin="0 0 10 0" ItemsSource="{Binding AvailableColors}" SelectedItem="{Binding BackGroundColor}">  <ComboBox.ItemTemplate>   <DataTemplate>    <Rectangle Width="87" Height="15" Fill="{Binding}"/>   </DataTemplate>  </ComboBox.ItemTemplate> </ComboBox>

接下来，我们在ViewModel中要实现一个列表与两个颜色的属性，注意：ItemSource绑定的元素需要为 Public的属性,不能是字段！

private Brush _borderColor; public Brush BorderColor {  get { return _borderColor; }  set   {    _borderColor = value;   RaisePropertyChanged("BorderColor");  } } private Brush _backGroundColor; public Brush BackGroundColor {  get { return _backGroundColor; }  set   {   _backGroundColor = value;   RaisePropertyChanged("BackGroundColor");  } } public List<Brush> AvailableColors { get; set; } /// <summary> /// Init property in ctor /// </summary> public MainViewModel() {  AvailableColors = new List<Brush>()   {    new SolidColorBrush(Colors.Red),   new SolidColorBrush(Colors.Black),   new SolidColorBrush(Colors.Green),   new SolidColorBrush(Color.FromRgb(1,180,255)),  };  //Init default drawing size & Color  DrawingAreaWidth = DrawingAreaHeight = 200;  BackGroundColor = BorderColor = AvailableColors[0]; }

如图 WPF学习12：基于MVVM Light 制作图形编辑工具（3），到了这一步，数据绑定就完成啦。

通过BackGroundColor，BorderColor我们又可以拿到选定的颜色，在后台代码中，画图时，把它们用上就好了。代码位于附件。

拖动部分

新建类ShapeManagement 由它来管理缩放与移动。

class ShapeManagement {  private Shape previseSelectedShape;  private Brush previseSelectedShapeBrush;  //使被选中的图形呈现橘黄色  private Brush selectedBrush = Brushes.Orange;  public void SelectedChange(Shape shape)  {   ClearSelectedEffect();   previseSelectedShape = shape;   previseSelectedShapeBrush = previseSelectedShape.Fill.Clone();   previseSelectedShape.Fill = selectedBrush;  }  public void ClearSelectedEffect()  {   if (previseSelectedShape != null)    previseSelectedShape.Fill = previseSelectedShapeBrush;  } }

在ViewModel创建一个图形管理器：

private ShapeManagement shapeManagement = new ShapeManagement();

在MouseDown中加入如下代码：

if(MovingModeEnable) {     if (e.Source is Shape)         shapeManagement.SelectedChange(e.Source as Shape);     else if(e.Source is Panel)         shapeManagement.ClearSelectedEffect(); }

如图，我们现在可以拿到被点击的对象 WPF学习12：基于MVVM Light 制作图形编辑工具（3）

之后就是移动的部分，在ShapeManagement加入如下代码：

class ShapeItem {  public Shape DisplayShape { get; set; }  public TranslateTransform translateTransform { get; set; }  public Point PositonRecord { get; set; }  public Point HistoryPositonRecord { get; set; } } private List<ShapeItem> shapeList = new List<ShapeItem>(); public void Add(Shape shape) {  var shapeItem = new ShapeItem()  {   DisplayShape = shape,   translateTransform = new TranslateTransform(),   PositonRecord = new Point(),   HistoryPositonRecord = new Point()  };  shapeList.Add(shapeItem);  shape.RenderTransform = new TransformGroup()  {   Children = new TransformCollection() { shapeItem.translateTransform }  }; }