? ? ?這篇文章還是在之前用Caliburn.Micro搭建好的框架上繼續(xù)做的開發(fā)，今天主要是增加了一個用戶窗體ImageProcessView，然后通過Treeview切換選擇項之后在界面顯示不同效果的圖片。

01

—

重要的知識點

本篇內(nèi)容基于CM框架編寫，涉及以下知識點：

①實現(xiàn)?INotifyPropertyChanged：在mvvm開發(fā)模式中，為了前臺和后臺更好的解耦合，前臺界面一般通過綁定屬性的方式獲取屬性值，而后臺屬性值變更后我們需要通知給前臺視圖，這時候我們的屬性值就需要實現(xiàn)INotifyPropertyChanged這個接口。

由于StartViewModel繼承了Caliburn.Micro.Screen，Caliburn.Micro.Screen實現(xiàn)了INotifyPropertyChanged，所以StartViewModel這個類本身是擁有屬性變更通知界面的功能的。但是我們添加的窗體ImageProcessViewModel除了它的構(gòu)造函數(shù)是在StartViewModel中實例化（擁有了INotifyPropertyChanged），其它想要實現(xiàn)這個接口有兩種方式：

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

public class ImageProcessViewModel : Caliburn.Micro.Screen

-. 在nuget中引用PropertyChanged.Fody

并在類之前添加：

[AddINotifyPropertyChangedInterface]

這樣我們的這個類中所有的屬性變更后就會主動通知界面更新了！

②TreeView用法實例：

主要包括TreeView樹列表構(gòu)建以及事件附件

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

后臺代碼，重點是如何獲取當(dāng)前選擇的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("這是一個圖片旋轉(zhuǎn)效果"); Image2Show = Visibility.Visible; break;case "ScaleTransform":MessageBox.Show("這是一個圖片縮放效果"); Image3Show = Visibility.Visible; break;case "SkewTransform":MessageBox.Show("這是一個圖片扭轉(zhuǎn)效果"); Image4Show = Visibility.Visible; break;case "TransformGroup":MessageBox.Show("這是一個圖片組合效果"); Image5Show = Visibility.Visible; break;case "MatrixTransform":MessageBox.Show("這是一個圖片矩陣效果"); Image6Show = Visibility.Visible; break;default: break;}}

③圖片顯示效果，需要了解RenderTransform類，主要實現(xiàn)以下6中效果：

一. RenderTransform類的成員：

1.TranslateTransform 　　平移效果

2.RotateTransform 　　　 旋轉(zhuǎn)效果

3.ScaleTransform 　　????? 縮放效果

4.SkewTransform 　　???? 扭轉(zhuǎn)效果

5.TransformGroup　　　　組合效果

6.MatrixTransform　　　　是其他幾個變形類的基類，矩陣方式實現(xiàn)效果

這里的代碼較長，可以下載項目源碼查看.

二.?Visibility屬性：

WPF的Visibility屬性是個枚舉變量，有三種值：Collapsed、Hidden、Visible。

Collapsed與Hidden區(qū)別：Hidden僅僅是屬性設(shè)為不可視，但是屬性在畫面上依然占有空間。然而使用Collapsed的話，在不可視的基礎(chǔ)上，它還能將屬性在畫面上的占位符清除，屬性將徹底不影響畫面

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

后臺定義，切記給屬性添加get; set;權(quán)限，不然界面不會更新

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：?縮放到目標(biāo)尺寸，寬高比不會保留，?圖片會按原始大小顯示

Uniform：縮放到目標(biāo)尺寸之內(nèi)，并保持原始寬高比。圖片會按照設(shè)置的Width和Height顯示，比例會失調(diào)

UniformToFill：保持原始寬高比進(jìn)行縮放，以填充。如果兩者的寬高比不同，源會被剪切掉多余的部分。

---------------------------------------------------------------------

其它的知識點已經(jīng)在之前講解過，不懂得話參考以下鏈接閱讀：

C# WPF MVVM項目實戰(zhàn)(進(jìn)階①)

C# WPF框架Caliburn.Micro入門實例1

C# 項目實戰(zhàn)(經(jīng)典)

02

—

操作演示

03

—

結(jié)尾

項目源碼網(wǎng)盤下載地址

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

提取碼:? 右下角點擊再看或者轉(zhuǎn)發(fā)，超過20個以后我會在留言區(qū)公布！

技術(shù)群：添加小編微信zls20210502，備注進(jìn)群！

總結(jié)

以上是生活随笔為你收集整理的C# WPF MVVM项目实战(进阶②)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。