C # WPF MVVM project practice (advanced ②)

zls366 2021-10-14 05:06:03

     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

Please bring the original link to reprint ,thank
Similar articles

2021-10-14