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

—

結尾

項目源碼網盤下載地址

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

提取碼:  a365

技術群：添加小編微信zls20210502，備注進群！