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，備註進群！
