你的位置:首页 > 软件开发 > ASP.net > WPF学习12:基于MVVM Light 制作图形编辑工具(3)

WPF学习12:基于MVVM Light 制作图形编辑工具(3)

发布时间:2015-04-30 12:00:33
本文是WPF学习11:基于MVVM Light 制作图形编辑工具(2)的后续 这一次的目标是完成 两个任务。 本节完成后的效果: 本文分为三个部分: 1.对之 ...

    本文是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>

原标题:WPF学习12:基于MVVM Light 制作图形编辑工具(3)

关键词:wpf

wpf
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。