WPF学习第一天之控件属性及一个小动画的实现

推荐有winform基础的想学习WPF的可以去bilibili网站看朝夕教育的《2020最新录制WPF完整实战合集》，讲解的知识点很多，跟着做很有好处。https://www.bilibili.com/video/BV1Jy4y1C7hU?p=8

1.大布局

1.1画布

初次进入Window.xaml文档，处于window窗体中，要开始编辑窗口，应从画布开始，一层层排列布局，常用的布局画布有Grid，StackPanel，UniformGrid...

1.2属性

新建控件之后，部分属性设置如下所示，重点属性有Margin（控件位置），Height

<Grid.RowDefinitions>
                <RowDefinition Height="1.5*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="100"/>
            </Grid.RowDefinitions>
            <!--登录界面顶部窗体布局-->
            <Border Background="#007DFA" CornerRadius="10,10,0,0"/>
            <Button VerticalAlignment="Top" HorizontalAlignment="Right" Width="40" Height="30"
                    Template="{StaticResource CloseButtonTemplate}"/>
            <StackPanel VerticalAlignment="Bottom" Margin="30">
                <Border Width="80" Height="80" Margin="0,0,0,10" VerticalAlignment="Center" HorizontalAlignment="Center" CornerRadius="10">
                    <Border.Background>
                        <ImageBrush ImageSource="../Assets/Sun.png"/>
                    </Border.Background>
                </Border>
                <TextBlock Text="教育管理平台" HorizontalAlignment="Center" FontSize="20" Foreground="White" Opacity="0.7"/>
            </StackPanel>

2.利用MVVM框架制作一个旋转图片动画

2.1新建一个图片控件

                <Image Source="../Assets/QQ.png" RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="-11.754"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>

 2.2新建一个类，实现属性改变时通知的接口

    public class NotifyBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        
        public void DoNotify([CallerMemberName]string propName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
        }

    }

2.3 新建一个Model类，继承NotifyBase类

    public class LoginModel:NotifyBase
    {
        private int angle;

        public int Angle
        {
            get { return angle; }
            set { angle = value; this.DoNotify(); }
        }

    }

2.4新建一个ModelView类，创建Model类，简单创建一个线程，使角度值循环增加，并将其赋给窗体的DataContext

    public class LoginViewModel
    {
        private LoginModel loginModel;
        public LoginModel LoginModel { get => loginModel; set => loginModel = value; }

        public LoginViewModel()
        {
            loginModel = new LoginModel();
            System.Threading.Thread thread = new System.Threading.Thread(StartRotate);
            thread.Start();
        }
         private void StartRotate()
        {
            int i = 0;
            while (i++ < 10000)
            {
                loginModel.Angle += 1;
                System.Threading.Thread.Sleep(1);
            }
        }
    }

    /// <summary>
    /// LoginWindow.xaml 的交互逻辑
    /// </summary>
    public partial class LoginWindow : Window
    {
        public LoginWindow()
        {
            InitializeComponent();
            DataContext = new LoginViewModel();
        }

    }

 2.5修改xaml中Image控件Angle值，将其与变化的Angle绑定

<RotateTransform Angle="{Binding LoginModel.Angle}"/>

 2.6完成效果如下所示