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,即:

public class ImageProcessViewModel : Caliburn.Micro.Screen

  -. 在nuget中引用PropertyChanged.Fody

并在类之前添加:

[AddINotifyPropertyChangedInterface]

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

②TreeView用法实例:

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

<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:

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的话,在不可视的基础上,它还能将属性在画面上的占位符清除,属性将彻底不影响画面

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属性值详解:

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

  None :保持原始尺寸,图片会按原始大小显示

 

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

 

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

 

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

 

 

02

结尾

项目源码网盘下载地址

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

提取码:  a365

技术群:添加小编微信zls20210502,备注进群

Tags: