C# WPF MVVM项目实战(进阶②)

    这篇文章还是在之前用Caliburn.Micro搭建好的框架上继续做的开发，今天主要是增加了一个用户窗体ImageProcessView，然后通过Treeview切换选择项之后在界面显示不同效果的图片。

 

01

—

 

重要的知识点

 

本篇内容基于CM框架编写，涉及以下知识点：

①实现 INotifyPropertyChanged：在mvvm开发模式中，为了前台和后台更好的解耦合，前台界面一般通过绑定属性的方式获取属性值，而后台属性值变更后我们需要通知给前台视图，这时候我们的属性值就需要实现INotifyPropertyChanged这个接口。

由于StartViewModel继承了Caliburn.Micro.Screen，Caliburn.Micro.Screen实现了INotifyPropertyChanged，所以StartViewModel这个类本身是拥有属性变更通知界面的功能的。但是我们添加的窗体ImageProcessViewModel除了它的构造函数是在StartViewModel中实例化（拥有了INotifyPropertyChanged），其它想要实现这个接口有两种方式：

-. 继承Caliburn.Micro.Screen，即：

?

1	public class ImageProcessViewModel : Caliburn.Micro.Screen

　　-. 在nuget中引用PropertyChanged.Fody

并在类之前添加：

?

1	[AddINotifyPropertyChangedInterface]

　　这样我们的这个类中所有的属性变更后就会主动通知界面更新了！

②TreeView用法实例：

主要包括TreeView树列表构建以及事件附件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<TreeView Grid.Row="0" Grid.Column="0" Grid.RowSpan="1">             <TreeViewItem Header="TreeView">                 <TreeViewItem Header="TranslateTransform"/>                 <TreeViewItem Header="RotateTransform"/>                 <TreeViewItem Header="ScaleTransform"/>                 <TreeViewItem Header="SkewTransform"/>                 <TreeViewItem Header="TransformGroup"/>                 <TreeViewItem Header="MatrixTransform"/>             </TreeViewItem>             <TreeView.ItemContainerStyle>                 <Style TargetType="{x:Type TreeViewItem}" >                     <Setter Property="cal:Message.Attach" Value="[Event Selected] = [Action item_SelectedItemChanged($source,$eventArgs)]"/> </Style>             </TreeView.ItemContainerStyle>         </TreeView>

　　后台代码，重点是如何获取当前选择的Item：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

public void item_SelectedItemChanged(object sender, RoutedEventArgs e)         {             TreeViewItem tvi = e.OriginalSource as TreeViewItem;             var selectedItem = tvi.Header.ToString();             switch (selectedItem)             {                 case "TranslateTransform":                     MessageBox.Show("这是一个图片平移效果"); Image1Show = Visibility.Visible; break;                 case "RotateTransform":                     MessageBox.Show("这是一个图片旋转效果"); Image2Show = Visibility.Visible; break;                 case "ScaleTransform":                     MessageBox.Show("这是一个图片缩放效果"); Image3Show = Visibility.Visible; break;                 case "SkewTransform":                     MessageBox.Show("这是一个图片扭转效果"); Image4Show = Visibility.Visible; break;                 case "TransformGroup":                     MessageBox.Show("这是一个图片组合效果"); Image5Show = Visibility.Visible; break;                 case "MatrixTransform":                     MessageBox.Show("这是一个图片矩阵效果"); Image6Show = Visibility.Visible; break;                 default: break;             }         }

　　③图片显示效果，需要了解RenderTransform类，主要实现以下6中效果：

一. RenderTransform类的成员：

1.TranslateTransform 　　平移效果

2.RotateTransform 　　　 旋转效果

3.ScaleTransform 　　      缩放效果

4.SkewTransform 　　     扭转效果

5.TransformGroup　　　　组合效果

6.MatrixTransform　　　　是其他几个变形类的基类，矩阵方式实现效果

这里的代码较长，可以下载项目源码查看.

二. Visibility属性：

WPF的Visibility属性是个枚举变量，有三种值：Collapsed、Hidden、Visible。

Collapsed与Hidden区别：Hidden仅仅是属性设为不可视，但是属性在画面上依然占有空间。然而使用Collapsed的话，在不可视的基础上，它还能将属性在画面上的占位符清除，属性将彻底不影响画面

?

1 2 3 4 5 6 7 8 9

namespace System.Windows {     public enum Visibility : byte     {         Visible = 0,         Hidden = 1,         Collapsed = 2     } }

　　后台定义，切记给属性添加get; set;权限，不然界面不会更新

 public Visibility Image6Show { get; set; } = Visibility.Hidden;

在前台绑定就好：

Visibility="{Binding Image6Show}"

三. Image Stretch属性值详解：

?

1 2 3 4 5 6 7 8 9 10

namespace System.Windows.Media {     public enum Stretch     {         None = 0,         Fill = 1,         Uniform = 2,         UniformToFill = 3     } }

　　None ：保持原始尺寸，图片会按原始大小显示

 

Fill： 缩放到目标尺寸，宽高比不会保留， 图片会按原始大小显示

 

Uniform：缩放到目标尺寸之内，并保持原始宽高比。图片会按照设置的Width和Height显示，比例会失调

 

UniformToFill：保持原始宽高比进行缩放，以填充。如果两者的宽高比不同，源会被剪切掉多余的部分。

 

 

02

—

结尾

项目源码网盘下载地址

链接：https://pan.baidu.com/s/1uP1Lw96Br1csLaF4B7ZKpw

提取码:  a365

技术群：添加小编微信zls20210502，备注进群！