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

01

—

重要的知識點

本篇內容基於CM框架編寫，涉及以下知識點：

①實現INotifyPropertyChanged：在mvvm開發模式中，為了前臺和後臺更好的解耦合，前臺介面一般通過繫結屬性的方式獲取屬性值，而後臺屬性值變更後我們需要通知給前臺檢視，這時候我們的屬性值就需要實現INotifyPropertyChanged這個介面。

由於StartViewModel繼承了Caliburn.Micro.Screen，Caliburn.Micro.Screen實現了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

—

結尾

專案原始碼網盤下載地址

連結：https://pan.baidu.com/s/1uP1Lw96Br1csLaF4B7ZKpw

提取碼: a365

技術群：新增小編微信zls20210502，備註進群！