WPF学习三（MVVM+自定义按钮等的登录界面）

跟着bilibil龙马哥视频做的一个登录界面，个人感觉讲得很到位，适合新手），他是从开始的前后绑定慢慢解耦合到MVVM，让我较快的理解了WPF的基础。

【WPF入门】WPF零基础到精通，从概念到实操，步步提升！_哔哩哔哩_bilibili

成果展示

鼠标放置颜色改变

对passwordbox添加属性，能够binding

实现过程

界面布局，直接使用代码进行编辑

整体分为上下两部分，及两行，顶行进行标题设计，第二行进行其他控件的设计。

第二行分为左右两部分，左边这部分放置图片，右边放置账号、密登录按钮这写text和button。下面的代码是最终版本，里面有些控件和属性属于自定义。

    <Grid><!--定义两行--><Grid.RowDefinitions><RowDefinition Height="25"></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><!--第一行 标题--><TextBlock Text="在线办公管理系统" Width="800" FontWeight="Bold"  Background="#0078d4"FontSize="20" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock><!--第二行--><Grid Grid.Row="1"><!--分成两列--><Grid.ColumnDefinitions><ColumnDefinition Width="180"></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><!--第一列:图片--><Border Background="LightBlue"><Image Source="Images/Login.png" Height="90" Width="90" ></Image></Border><!--第二列 使用border给整个部分赋值背景--><Border Grid.Column="1"  Background="LightCyan"><Grid HorizontalAlignment="Center" Height="200" Width="200" VerticalAlignment="Center"><!--三行两列--><Grid.RowDefinitions><RowDefinition Height="30"></RowDefinition><RowDefinition Height="30"></RowDefinition><!--auto 这一行占多少就有多高--><RowDefinition Height="auto"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="50"></ColumnDefinition><ColumnDefinition Width="100"></ColumnDefinition></Grid.ColumnDefinitions><!--第一行第一列--><TextBlock Text="账号" Margin="0,0,0,4"></TextBlock><!--第一行第二列--><!--Binding 绑定获取文本框的内容--><!--<TextBox Grid.Column="1" Margin="0,4"   x:Name="txtAccount" ></TextBox>--><TextBox Grid.Column="1" Margin="0,4"  Text="{Binding AccountModel.Account}"  ></TextBox><!--第二行第一列--><TextBlock Text="密码"  Grid.Row="1" Margin="0,4"  ></TextBlock><!--第二行第二列--><!--<TextBox Grid.Row="1" Grid.Column="1" Margin="0,4"  Text="{Binding AccountModel.Code}"></TextBox>--><!--<PasswordBox Grid.Row="1" Grid.Column="1" Margin="0,4"  Password="{Binding AccountModel.Code}"></PasswordBox> 报错 password不是依赖属性--><PasswordBox Grid.Row="1" Grid.Column="1" Margin="0,4"  pwdns:PasswordBoxExtend.MyPwd="{Binding AccountModel.Code,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" pwdns:PasswordBoxExtend.IsBind="True"  ></PasswordBox><!--第三行 2列合并:Grid.ColumnSpan="2"--><custBtnNs:CustomButtons OverBackground="green"  BtnRadius="5" Content="登录" Grid.Row="2" Grid.ColumnSpan="2" FontSize="20" Background="LightBlue" Command="{Binding Command}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="30" Width="100"></custBtnNs:CustomButtons><!--绑定命令--></Grid></Border></Grid></Grid>

我这里也按照我的理解一步一步的推进