当前位置:网站首页>C # WPF MVVM project practice (advanced ②)

C # WPF MVVM project practice (advanced ②)

2021-10-14 05:06:03 zls366

     This article was used before Caliburn.Micro Continue the development based on the established framework , today The main thing is to add a user form ImageProcessView, And then through Treeview After switching options, pictures with different effects will be displayed on the interface .

 

01

 

Important knowledge points

 

This article is based on CM Framework preparation , Involve the following knowledge points :

Realization  INotifyPropertyChanged: stay mvvm In the development mode , In order to better decouple the foreground and background , The foreground interface generally obtains the attribute value by binding the attribute , After the background attribute value changes, we need to notify the foreground view , At this time, our attribute value needs to implement INotifyPropertyChanged This interface .

because StartViewModel Inherited Caliburn.Micro.Screen,Caliburn.Micro.Screen Realized INotifyPropertyChanged, therefore StartViewModel This class itself has the function of property change notification interface . But the form we added ImageProcessViewModel Except that its constructor is in StartViewModel Instantiation in ( Have the INotifyPropertyChanged), There are two other ways to implement this interface :

-. Inherit Caliburn.Micro.Screen, namely :

public class ImageProcessViewModel : Caliburn.Micro.Screen

  -. stay nuget I quote PropertyChanged.Fody

And add... Before the class :

[AddINotifyPropertyChangedInterface]

   In this way, after all the properties in our class are changed, we will actively notify the interface to update !

②TreeView Usage examples :

It mainly includes TreeView Tree list construction and event attachments

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

   Background code , The focus is on how to get the current selection 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(" This is a picture pan effect "); Image1Show = Visibility.Visible; break;
                case "RotateTransform":
                    MessageBox.Show(" This is a picture rotation effect "); Image2Show = Visibility.Visible; break;
                case "ScaleTransform":
                    MessageBox.Show(" This is a picture zoom effect "); Image3Show = Visibility.Visible; break;
                case "SkewTransform":
                    MessageBox.Show(" This is a picture twist effect "); Image4Show = Visibility.Visible; break;
                case "TransformGroup":
                    MessageBox.Show(" This is a picture combination effect "); Image5Show = Visibility.Visible; break;
                case "MatrixTransform":
                    MessageBox.Show(" This is a picture matrix effect "); Image6Show = Visibility.Visible; break;
                default: break;
            }
        }

  ③ Picture display effect , Need to know RenderTransform class , The main implementation is as follows 6 Medium effect :

One . RenderTransform Class members :

1.TranslateTransform    Pan effect

2.RotateTransform     Rotation effect

3.ScaleTransform         Zoom effect

4.SkewTransform        Twist effect

5.TransformGroup     Combined effect

6.MatrixTransform     It is the base class of several other deformation classes , Matrix method to achieve the effect

The code here is longer , You can download the project source code to view .

Two . Visibility attribute :

WPF Of Visibility Property is an enumerated variable , There are three values :Collapsed、Hidden、Visible.

Collapsed And Hidden difference :Hidden Just make the property invisible , But attributes still occupy space on the screen . However, using Collapsed Words , On an invisible basis , It can also clear the placeholder of the attribute on the screen , Properties will not affect the screen at all

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

   Background definition , Remember to add... To the attribute get; set; jurisdiction , Otherwise, the interface will not be updated

 public Visibility Image6Show { get; set; } = Visibility.Hidden;

Just bind at the front desk :

Visibility="{Binding Image6Show}"

3、 ... and . Image Stretch Attribute value details :

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

  None : Keep original size , The picture will be displayed in its original size

 

Fill:  Zoom to target size , The aspect ratio is not retained ,  The picture will be displayed in its original size

 

Uniform: Zoom to within target dimensions , And maintain the original aspect ratio . The picture will follow the settings Width and Height Show , The proportion will be out of balance

 

UniformToFill: Keep the original aspect ratio for scaling , Fill in . If the aspect ratio of the two is different , The source will be cut out of excess .

 

 

02

ending

Project source code network disk download address

link :https://pan.baidu.com/s/1uP1Lw96Br1csLaF4B7ZKpw

Extraction code :  a365

Technology Group : Add small make up WeChat zls20210502, remarks Into the group of

版权声明
本文为[zls366]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/10/20211002145410613n.html

随机推荐