WPF布局的应用

一 写在开头
1.1 本文内容
本文主要内容是使用WPF来实现几个简单的界面。

二 登录窗口小例子
2.1 实现代码
XAML代码：

 <Window x:Class="LoginDialog.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="Login" Height="200" Width="400">
     <Grid>
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition></RowDefinition>
                 <RowDefinition></RowDefinition>
                 <RowDefinition></RowDefinition>
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition></ColumnDefinition>
                 <ColumnDefinition></ColumnDefinition>
             </Grid.ColumnDefinitions>
             <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Grid.Row="0" Grid.Column="0" Text="用户名：" FontSize="18px"></TextBlock>
             <TextBox Name="tbUserName" Margin="5" Grid.Row="0" Grid.Column="1"></TextBox>
             <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" Grid.Row="1" Grid.Column="0" Text="密码：" FontSize="18px"></TextBlock>
             <PasswordBox Name="pbPassword" Margin="5" Grid.Row="1" Grid.Column="1"></PasswordBox>
             <Button Name="btnLogin" Margin="10" Grid.Row="2" Grid.Column="0" Content="登录" FontSize="18px" Click="btnLogin_Click"></Button>
             <Button Name="btnCancel" Margin="10" Grid.Row="2" Grid.Column="1" Content="取消" FontSize="18px"></Button>
         </Grid>
     </Grid>
 </Window>

逻辑代码：

 private void btnLogin_Click(object sender, RoutedEventArgs e)
 {
     string username = tbUserName.Text;
     string password = pbPassword.Password;

     if ((username == "") || (password == ""))
     {
         MessageBox.Show("用户名或密码不能为空！");
     }
     else
     {
         if ((username == "admin") && (password == ""))
         {
             MessageBox.Show("登录成功！");
         }
         else
         {
             MessageBox.Show("用户名或密码错误！");
         }
     }
 }

上面的逻辑代码中有个需要注意的地方。在WPF中TextBox和PasswordBox这两个输入框在用户没有输入的时候返回值为空字符串（即""）而不是null！

2.2 效果图

三 连连看游戏界面的实现
3.1 实现代码
XAML代码：

 <Window x:Class="连连看.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="600" Width="600" Loaded="Window_Loaded">
     <Grid>
         <Grid Name="gridGame"></Grid>
     </Grid>
 </Window>

为什么XAML里只有一个名为gridGame的Grid布局？因为界面中的元素在下面的逻辑代码中动态地创建了。

逻辑代码：

 private void Window_Loaded(object sender, RoutedEventArgs e)
 {
     // 修改窗口标题
     this.Title = "连连看";

     // 动态设定gridGame为10行10列
     for (int i = ; i < ; i++)
     {
         RowDefinition rd = new RowDefinition();
         gridGame.RowDefinitions.Add(rd);

         ColumnDefinition cd = new ColumnDefinition();
         gridGame.ColumnDefinitions.Add(cd);
     }

     // 随机数产生器
     Random random = new Random();

     // 随机产生图片名称并填入10行10列的格子中
     for (int i = ; i < ; i++)
     {
         for (int j = ; j < ; j++)
         {
             Image img = new Image();
             int imgNum = random.Next(, );
             img.Source = new BitmapImage(new Uri("img/" + imgNum + ".png", UriKind.Relative));
             Grid.SetRow(img, i);
             Grid.SetColumn(img, j);
             gridGame.Children.Add(img);
         }
     }
 }

3.2 效果图

四 Windows计算器界面的实现
4.1 实现代码
XAML代码：

 <Window x:Class="计算器.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="计算器" Height="332" Width="228">
     <Grid>
         <DockPanel>
             <Menu DockPanel.Dock="Top">
                 <MenuItem Header="查看"></MenuItem>
                 <MenuItem Header="编辑"></MenuItem>
                 <MenuItem Header="帮助"></MenuItem>
             </Menu>
             <Grid>
                 <Grid.RowDefinitions>
                     <RowDefinition></RowDefinition>
                     <RowDefinition></RowDefinition>
                     <RowDefinition></RowDefinition>
                     <RowDefinition></RowDefinition>
                     <RowDefinition></RowDefinition>
                     <RowDefinition></RowDefinition>
                     <RowDefinition></RowDefinition>
                 </Grid.RowDefinitions>
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition></ColumnDefinition>
                     <ColumnDefinition></ColumnDefinition>
                     <ColumnDefinition></ColumnDefinition>
                     <ColumnDefinition></ColumnDefinition>
                     <ColumnDefinition></ColumnDefinition>
                 </Grid.ColumnDefinitions>
                 <TextBlock Grid.Row="0" Grid.Column="0" FontSize="18px" TextAlignment="Right" Text="0" Grid.ColumnSpan="5"></TextBlock>
                 <Button Grid.Row="1" Grid.Column="0" Content="MC"></Button>
                 <Button Grid.Row="1" Grid.Column="1" Content="MR"></Button>
                 <Button Grid.Row="1" Grid.Column="2" Content="MS"></Button>
                 <Button Grid.Row="1" Grid.Column="3" Content="M+"></Button>
                 <Button Grid.Row="1" Grid.Column="4" Content="M-"></Button>
                 <Button Grid.Row="2" Grid.Column="0" Content="&lt;--"></Button>
                 <Button Grid.Row="2" Grid.Column="1" Content="CE"></Button>
                 <Button Grid.Row="2" Grid.Column="2" Content="C"></Button>
                 <Button Grid.Row="2" Grid.Column="3" Content="±"></Button>
                 <Button Grid.Row="2" Grid.Column="4" Content="√"></Button>
                 <Button Grid.Row="3" Grid.Column="0" Content="7"></Button>
                 <Button Grid.Row="3" Grid.Column="1" Content="8"></Button>
                 <Button Grid.Row="3" Grid.Column="2" Content="9"></Button>
                 <Button Grid.Row="3" Grid.Column="3" Content="/"></Button>
                 <Button Grid.Row="3" Grid.Column="4" Content="%"></Button>
                 <Button Grid.Row="4" Grid.Column="0" Content="4"></Button>
                 <Button Grid.Row="4" Grid.Column="1" Content="5"></Button>
                 <Button Grid.Row="4" Grid.Column="2" Content="6"></Button>
                 <Button Grid.Row="4" Grid.Column="3" Content="*"></Button>
                 <Button Grid.Row="4" Grid.Column="4" Content="1/x"></Button>
                 <Button Grid.Row="5" Grid.Column="0" Content="1"></Button>
                 <Button Grid.Row="5" Grid.Column="1" Content="2"></Button>
                 <Button Grid.Row="5" Grid.Column="2" Content="3"></Button>
                 <Button Grid.Row="5" Grid.Column="3" Content="-"></Button>
                 <Button Grid.Row="5" Grid.RowSpan="2" Grid.Column="4" Content="="></Button>
                 <Button Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" Content="0"></Button>
                 <Button Grid.Row="6" Grid.Column="2" Content="."></Button>
                 <Button Grid.Row="6" Grid.Column="3" Content="+"></Button>
             </Grid>
         </DockPanel>
     </Grid>
 </Window>

4.2 效果图