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

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

这一次的目标是完成

两个任务。

本节完成后的效果：

本文分为三个部分：

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

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

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

---

修改之前的代码

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

做出的改动：

1.修改Image为Canvas。

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

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

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

---

颜色部分

效果：

过程：首先是绑定颜色相关的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];
}

如图，到了这一步，数据绑定就完成啦。

通过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();
}

如图，我们现在可以拿到被点击的对象

之后就是移动的部分，在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 }
    };
}

之前，我们已经拿到了当前选中的对象，然后就可以根据LINQ查询，来操作该对象，找到相应的变形，点的信息，予以操作。

代码在附件中，目前还有一些BUG。

开发环境VS2013， .NET4.5。

源码